"use client"; import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react"; import { AlertTriangle, CheckCircle2, Loader2, MapPin, Package, ReceiptText, Settings2, Store, Wrench } from "lucide-react"; import { pedirFiscal } from "@/components/fiscal/comum"; import { Dica } from "@/components/fiscal/dica"; import { FormatoDoCodigo } from "@/components/fiscal/formato-do-codigo"; import { Aviso } from "@/components/ui/aviso"; import { CampoDecimal } from "@/components/ui/campo-decimal"; import { CustomSelect } from "@/components/ui/custom-select"; import { Switch } from "@/components/ui/switch"; import { exigenciasDaCidade, problemaNaIdentificacaoDoCsc, problemaNoCsc, type CidadeDaNfse, type ConfigNfce, type ConfigNfe, type ConfigNfse, } from "@/lib/fiscal/emissor"; import { faltasDoServico, lerRegrasDeMercadoria, lerRegrasDeServico, MODELOS_DE_MERCADORIA, regimeUsaCsosn, SEM_REGRAS_DE_SERVICO, type Regime, type RegrasDeMercadoria, type RegrasDeServico, } from "@/lib/fiscal/regras"; import { AjustesDoContador } from "./ajustes-do-contador"; import { BarraDeSalvar, Bloco, Campo, Escolha, Recolhivel, soDigitos, TopoDoPasso, type PerfilNaTela } from "./campos"; import type { PropsDoPasso } from "./cliente"; import { ProdutosSemNcm } from "./produtos-sem-ncm"; type ComoVende = "producao" | "revenda"; type TipoDeServico = "grafico" | "visual" | "outro"; const AVISO_DO_ESTADO: Record = { PE: "Em Pernambuco, o credenciamento do cupom fiscal é pedido no e-Fisco, em Cadastros e Credenciamentos > Credenciamento de Emissor de DF-e: tipo 83 para teste e tipo 84 para uso real. Peça os dois — sai na hora.", SC: "Em Santa Catarina, o cupom fiscal exige cadastrar o sistema emissor na Secretaria da Fazenda antes do uso real.", PR: "No Paraná, o cupom fiscal exige a autorização de uso do sistema no portal da Receita estadual antes do uso real.", ES: "No Espírito Santo, o cupom fiscal exige o cadastro do sistema emissor na Secretaria da Fazenda antes do uso real.", PA: "No Pará, o cupom fiscal exige o cadastro do sistema emissor na Secretaria da Fazenda antes do uso real.", RS: "No Rio Grande do Sul, o cupom fiscal exige a maquininha de cartão integrada ao sistema, o que ainda não está disponível.", }; const SERVICOS: Record = { grafico: { titulo: "Serviço gráfico", texto: "Impressão personalizada feita sob encomenda.", codigo: "13.05", nome: "Serviço gráfico sob encomenda" }, visual: { titulo: "Arte e comunicação visual", texto: "Criação de arte, design e comunicação visual.", codigo: "23.01", nome: "Criação de arte e comunicação visual" }, outro: { titulo: "Outro serviço", texto: "Instalação, manutenção ou outro. O contador informa o código.", codigo: null, nome: "Outro serviço" }, }; function perfilPrincipal(perfis: PerfilNaTela[], tipo: "mercadoria" | "servico") { const doTipo = perfis.filter((p) => p.ativo && p.tipo === tipo); return doTipo.find((p) => p.padrao) ?? doTipo[0] ?? null; } /** Qual resposta gerou a tributação que está salva. Se ninguém reconhece, foi o contador que ajustou. */ function respostaDoPerfil(perfil: PerfilNaTela | null, regime: Regime): ComoVende | "ajustado" | null { if (!perfil) return null; const regras = lerRegrasDeMercadoria(perfil.regras); for (const modelo of MODELOS_DE_MERCADORIA.filter((m) => m.regimes.includes(regime))) { const r = modelo.regras; const igual = regras.cfopInterno === r.cfopInterno && regras.cfopInterestadual === r.cfopInterestadual && (regimeUsaCsosn(regime) ? regras.csosn === r.csosn : regras.cstIcms === r.cstIcms) && regras.pisCst === r.pisCst && regras.cofinsCst === r.cofinsCst; if (igual) return modelo.chave.startsWith("producao") ? "producao" : "revenda"; } return "ajustado"; } function tipoDoServico(codigo: string | null): TipoDeServico { if (codigo === "13.05") return "grafico"; if (codigo === "23.01") return "visual"; return "outro"; } export function PassoNotas({ painel, recarregar, irPara, abrir }: PropsDoPasso) { const emissor = painel.emissor; const regime: Regime = emissor?.regime ?? "simplesNacional"; const normal = !regimeUsaCsosn(regime); const [nfe, setNfe] = useState(() => emissor?.nfe ?? { ativo: false, ambiente: "homologacao", serie: "1", danfe: "default" }); const [nfce, setNfce] = useState( () => emissor?.nfce ?? { ativo: false, ambiente: "homologacao", serie: "1", tokenIdHomologacao: null, tokenIdProducao: null, contingenciaOffline: false } ); const [nfse, setNfse] = useState>(() => ({ ativo: emissor?.nfse.ativo ?? false, ambiente: emissor?.nfse.ambiente ?? "simulacao", serie: emissor?.nfse.serie ?? null, forma: emissor?.nfse.forma ?? "normal", usuario: emissor?.nfse.usuario ?? null, enviarInscricaoMunicipal: emissor?.nfse.enviarInscricaoMunicipal ?? "automatic", })); const [segredos, setSegredos] = useState({ cscHomologacao: "", cscProducao: "", nfseSenha: "", nfseNumeroAutenticacao: "" }); const [numeracao, setNumeracao] = useState({ nfe: "", nfce: "", nfse: "", nfseLote: "" }); /* Produtos: uma pergunta monta a tributação no padrão do regime. */ const perfilDeProduto = perfilPrincipal(painel.perfis, "mercadoria"); const respostaSalva = respostaDoPerfil(perfilDeProduto, regime); const regrasSalvas = useMemo(() => (perfilDeProduto ? lerRegrasDeMercadoria(perfilDeProduto.regras) : null), [perfilDeProduto]); const [comoVende, setComoVende] = useState(respostaSalva === "producao" || respostaSalva === "revenda" ? respostaSalva : null); const [aliquotas, setAliquotas] = useState({ icms: regrasSalvas?.aliquotaIcms ?? null, pis: regrasSalvas?.pisAliquota ?? null, cofins: regrasSalvas?.cofinsAliquota ?? null, }); /* Serviços. */ const perfilDeServico = perfilPrincipal(painel.perfis, "servico"); const [servico, setServico] = useState(() => (perfilDeServico ? lerRegrasDeServico(perfilDeServico.regras) : { ...SEM_REGRAS_DE_SERVICO, codigoLc116: "13.05" })); const [tipoServico, setTipoServico] = useState(() => tipoDoServico(perfilDeServico ? lerRegrasDeServico(perfilDeServico.regras).codigoLc116 : "13.05")); const [cidade, setCidade] = useState(emissor?.nfse.cidade ?? null); const [consultandoCidade, setConsultandoCidade] = useState(false); const [cidadeNaoAtendida, setCidadeNaoAtendida] = useState(false); const [salvando, setSalvando] = useState(false); const [erro, setErro] = useState(null); const [janela, setJanela] = useState(() => { if (abrir === "produtos") return "produtos"; if (abrir?.startsWith("ajustes")) { const perfilId = abrir.split(":")[1]; return painel.perfis.find((p) => p.id === perfilId)?.tipo === "servico" ? "ajustes-servico" : "ajustes-mercadoria"; } return null; }); const perfilDoEndereco = abrir?.startsWith("ajustes:") ? abrir.split(":")[1] : null; /* A barra de salvar só gruda no pé da tela quando há o que salvar. */ const retrato = JSON.stringify({ nfe, nfce, nfse, segredos, numeracao, comoVende, aliquotas, servico, tipoServico }); const [retratoInicial] = useState(retrato); const alterado = retrato !== retratoInicial; const uf = emissor?.endereco.uf ?? ""; const ibge = emissor?.endereco.ibge ?? ""; const exige = exigenciasDaCidade(cidade?.opcoes ?? null); const produtoLigado = nfe.ativo || nfce.ativo; const consultarCidade = useCallback(async () => { if (!ibge) return; setConsultandoCidade(true); setCidadeNaoAtendida(false); try { const json = await pedirFiscal<{ cidade: CidadeDaNfse | null }>(`/api/fiscal/cidade?ibge=${ibge}`); setCidade(json.cidade); setCidadeNaoAtendida(!json.cidade); if (json.cidade && !emissor?.nfse.cidade) { setNfse((atual) => ({ ...atual, forma: json.cidade?.opcoes?.useNationalLayout ? "annfs" : "normal" })); } } catch { setCidadeNaoAtendida(false); } finally { setConsultandoCidade(false); } }, [ibge, emissor?.nfse.cidade]); useEffect(() => { if (!nfse.ativo || cidade || cidadeNaoAtendida) return; const relogio = setTimeout(() => void consultarCidade(), 0); return () => clearTimeout(relogio); }, [nfse.ativo, cidade, cidadeNaoAtendida, consultarCidade]); if (!emissor?.cadastradoNaSpedy) { return (
irPara("empresa")} className="ks-button ks-button-primary ks-button-sm"> Ir para Sua empresa } > As notas ficam ligadas ao CNPJ salvo no passo 1.
); } const opcoesDaCidade = cidade?.opcoes ?? null; const pedeUsuario = opcoesDaCidade?.authentication === "userName"; const pedeSenha = opcoesDaCidade?.authentication === "userName" || opcoesDaCidade?.authentication === "token"; const faltaInscricaoEstadual = produtoLigado && !soDigitos(emissor.inscricaoEstadual); const faltaInscricaoMunicipal = nfse.ativo && !emissor.inscricaoMunicipal; const mudarServico = (parcial: Partial) => { setErro(null); setServico((atual) => ({ ...atual, ...parcial })); }; const regrasDoProduto = (): RegrasDeMercadoria | null => { if (!comoVende) return null; const modelo = MODELOS_DE_MERCADORIA.find((m) => m.regimes.includes(regime) && m.chave.startsWith(comoVende)); if (!modelo) return null; return { ...modelo.regras, origem: regrasSalvas?.origem ?? modelo.regras.origem, informacoesAdicionais: regrasSalvas && respostaSalva !== "ajustado" ? regrasSalvas.informacoesAdicionais ?? modelo.regras.informacoesAdicionais : modelo.regras.informacoesAdicionais, ...(normal ? { aliquotaIcms: aliquotas.icms, pisAliquota: aliquotas.pis, cofinsAliquota: aliquotas.cofins } : {}), }; }; const salvar = async () => { setErro(null); if (!nfe.ativo && !nfce.ativo && !nfse.ativo) { setErro("Ligue pelo menos um tipo de nota."); return; } if (faltaInscricaoEstadual || faltaInscricaoMunicipal) { setErro( <> Falta {faltaInscricaoEstadual ? "a inscrição estadual" : "a inscrição municipal"} da empresa.{" "} ); return; } if (produtoLigado && !comoVende && respostaSalva !== "ajustado") { setErro("Responda como você vende os seus produtos."); return; } if (produtoLigado && normal && comoVende && !(Number(aliquotas.icms) > 0 && Number(aliquotas.pis) > 0 && Number(aliquotas.cofins) > 0)) { setErro("Informe as alíquotas de ICMS, PIS e COFINS. O seu contador sabe quais são."); return; } if (nfce.ativo) { const temCscDeTeste = Boolean(segredos.cscHomologacao || emissor.nfce.cscHomologacaoGuardado); if (!nfce.tokenIdHomologacao || !temCscDeTeste) { setErro("Para o cupom fiscal, preencha a identificação e o código CSC de teste."); return; } const problemaDoCupom = problemaNaIdentificacaoDoCsc(nfce.tokenIdHomologacao, "identificação do CSC de teste") ?? problemaNoCsc(segredos.cscHomologacao, "CSC de teste") ?? (!segredos.cscHomologacao ? emissor.nfce.problemaNoCscHomologacao : null) ?? problemaNaIdentificacaoDoCsc(nfce.tokenIdProducao, "identificação do CSC de uso real") ?? problemaNoCsc(segredos.cscProducao, "CSC de uso real"); if (problemaDoCupom) { setErro(problemaDoCupom); return; } } if (nfse.ativo) { if (cidadeNaoAtendida) { setErro("A nota de serviço da sua cidade ainda não pode ser emitida pelo Ktalogu. Desligue a nota de serviço por enquanto."); return; } const faltas = faltasDoServico(servico, exige); if (faltas.length) { setErro(`Para a nota de serviço, falta: ${faltas.join(", ")}.`); return; } if (pedeUsuario && !nfse.usuario) { setErro("A prefeitura pede o usuário de acesso ao sistema de notas dela."); return; } if (pedeSenha && !segredos.nfseSenha && !emissor.nfse.senhaGuardada) { setErro(opcoesDaCidade?.authentication === "token" ? "A prefeitura pede o código de acesso (token)." : "A prefeitura pede a senha de acesso ao sistema de notas dela."); return; } } setSalvando(true); try { /* 1. Tributação dos produtos, a partir da resposta (o ajuste do contador fica se ninguém mudou a resposta). */ if (produtoLigado && comoVende) { const regras = regrasDoProduto(); const mudouResposta = respostaSalva !== comoVende; const mudouAliquota = normal && (regrasSalvas?.aliquotaIcms !== aliquotas.icms || regrasSalvas?.pisAliquota !== aliquotas.pis || regrasSalvas?.cofinsAliquota !== aliquotas.cofins); if (regras && (!perfilDeProduto || mudouResposta || mudouAliquota)) { const modelo = MODELOS_DE_MERCADORIA.find((m) => m.regimes.includes(regime) && m.chave.startsWith(comoVende)); await pedirFiscal(perfilDeProduto ? `/api/fiscal/perfis/${perfilDeProduto.id}` : "/api/fiscal/perfis", { method: perfilDeProduto ? "PUT" : "POST", json: { nome: modelo?.nome ?? "Venda de produtos", tipo: "mercadoria", padrao: true, regras }, }); } } /* 2. Tributação dos serviços. */ if (nfse.ativo) { await pedirFiscal(perfilDeServico ? `/api/fiscal/perfis/${perfilDeServico.id}` : "/api/fiscal/perfis", { method: perfilDeServico ? "PUT" : "POST", json: { nome: perfilDeServico?.nome ?? SERVICOS[tipoServico].nome, tipo: "servico", padrao: true, regras: servico }, }); } /* 3. As notas ligadas e os códigos de cada uma. */ await pedirFiscal("/api/fiscal/modelos", { method: "PUT", json: { nfe, nfce, nfse, segredos, numeracao: { nfe: Number(numeracao.nfe) || null, nfce: Number(numeracao.nfce) || null, nfse: Number(numeracao.nfse) || null, nfseLote: Number(numeracao.nfseLote) || null, }, }, }); setSegredos({ cscHomologacao: "", cscProducao: "", nfseSenha: "", nfseNumeroAutenticacao: "" }); setNumeracao({ nfe: "", nfce: "", nfse: "", nfseLote: "" }); await recarregar(); irPara("testar"); } catch (e) { setErro(e instanceof Error ? e.message : "Não foi possível salvar."); await recarregar(); } finally { setSalvando(false); } }; return (
setNfe({ ...nfe, ativo })} /> setNfce({ ...nfce, ativo })} /> { setCidadeNaoAtendida(false); setNfse({ ...nfse, ativo }); }} />
{faltaInscricaoEstadual || faltaInscricaoMunicipal ? ( irPara("empresa")} className="ks-button ks-button-primary ks-button-sm"> Preencher } > {faltaInscricaoEstadual ? "A nota de produto e o cupom fiscal precisam do número da inscrição estadual. Empresa isenta emite só nota de serviço." : "A nota de serviço precisa da inscrição municipal da empresa."} ) : null} {produtoLigado ? ( setJanela("ajustes-mercadoria")} className="ks-button ks-button-soft ks-button-sm"> Ajustes do contador } >

Como você vende os seus produtos?

{ setErro(null); setComoVende(valor); }} opcoes={[ { valor: "producao", titulo: "Fabrico ou personalizo", texto: "Produzo aqui: impressos, brindes personalizados, placas, adesivos sob medida." }, { valor: "revenda", titulo: "Compro pronto e revendo", texto: "Mercadoria comprada de fornecedor e vendida sem mudar nada." }, ]} />

{respostaSalva === "ajustado" && !comoVende ? "Os impostos dos produtos foram ajustados pelo contador e continuam como estão. Escolher uma opção acima troca pelo padrão." : "Se vende dos dois jeitos, escolha o mais comum: dá para trocar em cada produto. Os impostos seguem o padrão do seu regime; confira a nota de teste com o contador."}

{normal ? (
setAliquotas({ ...aliquotas, icms: Number.isFinite(n) && n > 0 ? n : null })} casas={4} zeroVazio className="ks-field" /> setAliquotas({ ...aliquotas, pis: Number.isFinite(n) && n > 0 ? n : null })} casas={4} zeroVazio className="ks-field" /> setAliquotas({ ...aliquotas, cofins: Number.isFinite(n) && n > 0 ? n : null })} casas={4} zeroVazio className="ks-field" />
) : null} {painel.produtosSemNcm > 0 ? (

{painel.produtosSemNcm} {painel.produtosSemNcm === 1 ? "produto sem código fiscal" : "produtos sem código fiscal"}

Todo produto que sai em nota precisa do código fiscal (NCM). Dá para completar agora ou depois; a nota de um produto sem código não sai.

) : (

Todos os produtos têm código fiscal.{" "}

)} {nfe.ativo ? (
setNfe({ ...nfe, serie: soDigitos(e.target.value).slice(0, 3) })} inputMode="numeric" className="ks-field tabular-nums" /> setNumeracao({ ...numeracao, nfe: soDigitos(e.target.value).slice(0, 9) })} inputMode="numeric" className="ks-field tabular-nums" /> setNfe({ ...nfe, danfe: v === "simplified" ? "simplified" : "default" })} />
) : null} ) : null} {nfce.ativo ? ( {AVISO_DO_ESTADO[uf] ? {AVISO_DO_ESTADO[uf]} : null}
setNfce({ ...nfce, tokenIdHomologacao: soDigitos(e.target.value).slice(0, 6) || null })} inputMode="numeric" className="ks-field tabular-nums" /> setSegredos({ ...segredos, cscHomologacao: e.target.value.replace(/\s+/g, "") })} placeholder={emissor.nfce.cscHomologacaoGuardado ? "••••••••" : ""} autoComplete="off" className="ks-field" /> setNfce({ ...nfce, tokenIdProducao: soDigitos(e.target.value).slice(0, 6) || null })} inputMode="numeric" className="ks-field tabular-nums" /> setSegredos({ ...segredos, cscProducao: e.target.value.replace(/\s+/g, "") })} placeholder={emissor.nfce.cscProducaoGuardado ? "••••••••" : ""} autoComplete="off" className="ks-field" />
setNfce({ ...nfce, serie: soDigitos(e.target.value).slice(0, 3) })} inputMode="numeric" className="ks-field tabular-nums" /> setNumeracao({ ...numeracao, nfce: soDigitos(e.target.value).slice(0, 9) })} inputMode="numeric" className="ks-field tabular-nums" />
) : null} {nfse.ativo ? ( setJanela("ajustes-servico")} className="ks-button ks-button-soft ks-button-sm"> Ajustes do contador } >
{consultandoCidade ? ( <>

Conferindo a prefeitura da sua cidade…

) : cidadeNaoAtendida ? ( <>

A nota de serviço de {emissor.endereco.cidade}/{uf} ainda não pode ser emitida pelo Ktalogu. Desligue a nota de serviço por enquanto e continue emitindo pelo site da prefeitura.

) : cidade ? ( <>

A prefeitura de {cidade.nome}/{cidade.uf} está pronta para receber as suas notas de serviço.

) : ( <>

Salve o endereço da empresa para conferirmos a prefeitura.

)}

Que serviço você presta?

{ setTipoServico(tipo); mudarServico({ codigoLc116: SERVICOS[tipo].codigo ?? (tipoServico === "outro" ? servico.codigoLc116 : null) }); }} opcoes={(Object.keys(SERVICOS) as TipoDeServico[]).map((tipo) => ({ valor: tipo, titulo: SERVICOS[tipo].titulo, texto: SERVICOS[tipo].texto }))} />
{tipoServico === "outro" ? ( mudarServico({ codigoLc116: e.target.value.replace(/[^\d.]/g, "").slice(0, 6) || null })} className="ks-field tabular-nums" /> ) : null} mudarServico({ aliquotaIss: Number.isFinite(n) && n > 0 ? n : null })} casas={4} zeroVazio className="ks-field" /> {exige.codigoMunicipal ? ( mudarServico({ codigoMunicipal: e.target.value.trim().slice(0, 20) || null })} className="ks-field tabular-nums" /> ) : exige.codigoMunicipalOpcional ? ( mudarServico({ codigoMunicipal: e.target.value.trim().slice(0, 20) || null })} className="ks-field tabular-nums" /> ) : null} {exige.cnae ? ( ({ value: c.codigo, label: `${c.codigo}${c.principal ? " (principal)" : ""}` }))]} value={servico.cnae ?? ""} onChange={(v) => mudarServico({ cnae: v || null })} /> ) : null} {exige.codigoMunicipal ? (
c.codigo)} aoEscolherCnae={exige.cnae ? (cnae) => mudarServico({ cnae }) : undefined} />
) : null} {exige.nbs ? ( mudarServico({ nbs: e.target.value.trim().slice(0, 12) || null })} placeholder={opcoesDaCidade?.useNationalLayout ? "1.2101.21.00" : undefined} className="ks-field tabular-nums" /> ) : null} {exige.codigoTributacaoNacional ? ( mudarServico({ codigoTributacaoNacional: e.target.value.trim().slice(0, 12) || null })} className="ks-field tabular-nums" /> ) : null} {exige.anexoSimples ? ( ({ value: a, label: `Anexo ${a}` }))]} value={servico.anexoSimples ?? ""} onChange={(v) => mudarServico({ anexoSimples: (v || null) as RegrasDeServico["anexoSimples"] })} /> ) : null} {pedeUsuario ? ( setNfse({ ...nfse, usuario: e.target.value.trim() || null })} autoComplete="off" className="ks-field" /> ) : null} {pedeSenha ? ( setSegredos({ ...segredos, nfseSenha: e.target.value })} placeholder={emissor.nfse.senhaGuardada ? "••••••••" : ""} autoComplete="new-password" className="ks-field" /> ) : null}

Quem paga o ISS?

mudarServico({ issRetido })} opcoes={[ { valor: "nunca", titulo: "A minha empresa", texto: "O caso mais comum." }, { valor: "cliente_pj", titulo: "O cliente, quando é empresa", texto: "Clientes com CNPJ descontam o ISS." }, { valor: "sempre", titulo: "Sempre o cliente", texto: "Todo cliente desconta o ISS." }, ]} />
{cidade ? ( setNfse({ ...nfse, forma })} opcoes={[ { valor: "normal", titulo: "Sistema da prefeitura", texto: "O caminho de sempre da cidade." }, { valor: "annfs", titulo: "Emissor nacional", texto: "Para cidades que passaram a usar o padrão nacional." }, ]} /> ) : null}
{opcoesDaCidade?.series ? ( setNfse({ ...nfse, serie: e.target.value.trim().slice(0, 5) || null })} className="ks-field" /> ) : null} setNumeracao({ ...numeracao, nfse: soDigitos(e.target.value).slice(0, 9) })} inputMode="numeric" className="ks-field tabular-nums" /> setNumeracao({ ...numeracao, nfseLote: soDigitos(e.target.value).slice(0, 9) })} inputMode="numeric" className="ks-field tabular-nums" /> setSegredos({ ...segredos, nfseNumeroAutenticacao: e.target.value.trim() })} autoComplete="off" className="ks-field" /> setNfse({ ...nfse, enviarInscricaoMunicipal: v as typeof nfse.enviarInscricaoMunicipal })} />
) : null} {erro ? ( setErro(null)}> {erro} ) : null} void salvar()} mensagem={ nfe.ativo || nfce.ativo || nfse.ativo ? `Ligadas: ${[nfe.ativo ? "nota de produto" : null, nfce.ativo ? "cupom fiscal" : null, nfse.ativo ? "nota de serviço" : null].filter(Boolean).join(", ")}.` : "Ligue pelo menos um tipo de nota." } /> {janela === "produtos" ? setJanela(null)} aoSalvar={recarregar} /> : null} {janela === "ajustes-mercadoria" || janela === "ajustes-servico" ? ( setJanela(null)} aoSalvar={recarregar} /> ) : null}
); } function CartaoDoModelo({ Icone, titulo, sigla, texto, ligado, aoMudar, }: { Icone: typeof Package; titulo: string; sigla: string; texto: string; ligado: boolean; aoMudar: (ligado: boolean) => void; }) { return (
aoMudar(!ligado)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); aoMudar(!ligado); } }} className={`flex cursor-pointer flex-col gap-4 rounded-3xl p-5 text-left outline-none transition focus-visible:ring-2 focus-visible:ring-[var(--ks-color-primary)] ${ ligado ? "bg-gradient-to-br from-violet-500 to-purple-600 text-white shadow-[0_16px_36px_rgba(124,58,237,0.32)]" : "bg-[var(--ks-color-bg-inset)] text-[var(--ks-color-text-primary)] hover:bg-[var(--ks-color-bg-hover)]" }`} > e.stopPropagation()}> {titulo} {sigla} {texto}
); }