📦 FluidState UI

Gestão visual de estados para qualquer UI, sem frameworks.

Uma biblioteca JS + CSS para aplicar estados dinâmicos em botões, inputs, cards, modais e qualquer elemento HTML. Rápida, leve e universal: funciona com HTML puro ou em frameworks (React, Vue, Angular, etc).

✨ Por que usar?

• 🚀 Plug & Play: Use data-state ou classes sem precisar escrever lógica repetitiva.
• 🎨 Design tokens prontos: Estilos e microinterações para os estados mais comuns (loading, success, error, warning, disabled).
• ⚡ API mínima em JS: Altere estados em uma linha.
• 🧩 Independente de frameworks: Funciona em qualquer projeto.
• 🛢 Extensível: Crie seus próprios estados e temas.

📦 Instalação

Instale via NPM:

npm install fluidstate-ui

Ou adicione via CDN no seu HTML:

<link rel="stylesheet" href="[https://cdn.fluidstate-ui.css](https://cdn.fluidstate-ui.css)">
<script src="[https://cdn.fluidstate-ui.js](https://cdn.fluidstate-ui.js)"></script>

🚀 Uso Básico

1. Adicione o atributo data-state ao seu elemento HTML:

<button id="saveBtn" data-state="idle">Salvar</button>

2. Controle o estado com JavaScript:

// Muda para "loading"
FluidState.set("#saveBtn", "loading");

// Depois de 2s, mostra sucesso
setTimeout(() => {
  FluidState.set("#saveBtn", "success");
}, 2000);

3. A biblioteca aplica o CSS correspondente automaticamente:

/* Estilos incluídos na biblioteca */
[data-state="idle"] {
  background: #007bff;
  color: white;
}
[data-state="loading"] {
  background: #999;
  pointer-events: none;
  position: relative;
}
[data-state="loading"]::after {
  content: "...";
  animation: blink 1s infinite;
}
[data-state="success"] {
  background: #28a745;
  animation: pop 0.3s ease;
}
[data-state="error"] {
  background: #dc3545;
  animation: shake 0.3s ease;
}

🎨 Estados Disponíveis por Padrão

• idle: estado inicial.
• loading: desabilita interação e mostra um indicador.
• success: cor verde + animação de confirmação.
• error: cor vermelha + animação de "shake".
• warning: cor amarela + animação de "pulse".
• disabled: cor cinza, sem interação.

⚡ API

• FluidState.set(selector, state): Define o estado de um ou mais elementos.

  FluidState.set("#saveBtn", "loading");

• FluidState.get(selector): Obtém o estado atual de um elemento.

  const currentState = FluidState.get("#saveBtn"); // Retorna, por exemplo: "loading"

• FluidState.reset(selector): Remove o estado, fazendo o elemento voltar ao seu estilo padrão ou ao estado idle.

  FluidState.reset("#saveBtn");

🧩 Customização

Você pode facilmente criar seus próprios estados. Basta definir o estilo no seu CSS e usar o nome do estado na API.

CSS:

[data-state="pending"] {
  background: orange;
  color: white;
  animation: pulse 1s infinite;
}

JavaScript:

FluidState.set("#orderStatus", "pending");

🛠 Exemplo Prático: Formulário de Login

HTML:

<form id="loginForm">
  <input type="text" placeholder="Usuário">
  <input type="password" placeholder="Senha">
  <button id="loginBtn" data-state="idle">Entrar</button>
</form>

JavaScript:

document.querySelector("#loginForm").onsubmit = async (e) => {
  e.preventDefault();
  const loginBtn = "#loginBtn";

  FluidState.set(loginBtn, "loading");

  // Simula uma chamada de API
  try {
    const success = await fakeApiCall(); 
    FluidState.set(loginBtn, "success");
  } catch (error) {
    FluidState.set(loginBtn, "error");
  }
};

🌍 Casos de Uso

• Botões de login, cadastro e submissão de formulários.
• Checkouts de e-commerce com feedback instantâneo.
• Passos (steps) em processos de onboarding.
• Status de tarefas (upload, download, processamento).
• Componentes de dashboards e UIs administrativas.

📊 Diferenciais no Mercado

• Não é apenas CSS, nem apenas JS: é a ponte entre os dois, unindo estilo e lógica.
• Reduz boilerplate: elimina a necessidade de código repetitivo para gerenciar classes e estilos de estado.
• Feedback universal: fornece uma experiência de usuário consistente em qualquer stack tecnológica.
• Compatível: pode ser usado junto com bibliotecas utilitárias como Tailwind CSS sem conflitos.

🔮 Futuras Features

• Temas prontos (dark, neon, minimal).
• Animações configuráveis via API.
• Integração com atributos ARIA para acessibilidade automática.
• Compatibilidade nativa com Web Components.

📜 Licença

Este projeto está licenciado sob a Licença MIT. Veja o arquivo LICENSE.md para mais detalhes.