zenite-ui 1.0.3

package/README.md

@@ -0,0 +1,47 @@
+# Zênite UI Framework
+
+O Zênite UI é um framework front-end moderno, leve e responsivo, focado na simplicidade e na elegância. Construído com HTML5, CSS3 puro e Vanilla JavaScript, foi concebido para acelerar o desenvolvimento de interfaces web de alto padrão.
+
+---
+
+## 1. Diferenciais
+- Leveza: Sem dependências externas pesadas, focado em performance.
+- Responsividade: Design totalmente adaptável para qualquer dispositivo.
+- Modularidade: Estrutura organizada para importação direta ou via bundlers.
+
+---
+
+## 2. Instalação
+
+O framework pode ser instalado no seu projeto via gerenciador de pacotes NPM. Execute o comando abaixo no seu terminal:
+
+    npm install zenite-framework
+
+---
+
+## 3. Guia de Utilização
+
+### Importação em Projetos Estáticos (HTML)
+Adicione as referências diretamente no seu arquivo HTML apontando para a pasta node_modules:
+
+    <link rel="stylesheet" href="./node_modules/zenite-framework/zenite-framework/zenite.css">
+    <script src="./node_modules/zenite-framework/js/zenite.js"></script>
+
+### Importação via Bundlers (Webpack, Vite, etc.)
+Em arquiteturas modernas, importe o CSS e o JS nos seus arquivos principais:
+
+    import 'zenite-framework/zenite-framework/zenite.css';
+    import 'zenite-framework';
+
+---
+
+## 4. Estrutura do Projeto
+O framework é composto por diversos módulos para facilitar a manutenção:
+- Layout: Grid, Colunas e classes utilitárias.
+- Componentes: Buttons, Cards, Modals, Navbars, entre outros.
+- Formulários: Inputs estilizados, Checkboxes e Switches.
+
+---
+
+## 5. Licença
+Este projeto está sob a licença MIT. Desenvolvido por Zênite Tecnologia.

package/js/zenite.js

@@ -0,0 +1,170 @@
+//combobox
+document.addEventListener('DOMContentLoaded', () => {
+  const comboboxes = document.querySelectorAll('.zf-combobox');
+
+  comboboxes.forEach(combobox => {
+    const input = combobox.querySelector('.zf-combobox-input');
+    const items = combobox.querySelectorAll('.zf-combobox-item');
+    const clearBtn = combobox.querySelector('.zf-combobox-clear'); 
+
+    const toggleClearBtn = () => {
+      if (input.value.trim() !== '') {
+        combobox.classList.add('has-value');
+      } else {
+        combobox.classList.remove('has-value');
+      }
+    };
+
+    if (clearBtn) {
+      clearBtn.addEventListener('mousedown', (e) => {
+        e.preventDefault(); 
+        e.stopPropagation(); 
+        
+        input.value = ''; 
+        toggleClearBtn();
+        
+        items.forEach(item => item.style.display = '');
+        
+        input.focus();
+      });
+    }
+
+    input.addEventListener('focus', () => {
+      combobox.classList.add('active');
+    });
+
+    input.addEventListener('mousedown', (e) => {
+      if (e.offsetX > input.offsetWidth - 40) {
+        e.preventDefault();
+        
+        combobox.classList.toggle('active'); 
+        
+        if (combobox.classList.contains('active')) {
+          input.focus();
+        }
+      }
+    });
+
+    //filtra itens
+    input.addEventListener('input', (e) => {
+      toggleClearBtn();
+      const termoPesquisa = e.target.value.toLowerCase();
+
+      items.forEach(item => {
+        const textoItem = item.textContent.toLowerCase();
+
+        if (textoItem.includes(termoPesquisa)) {
+          item.style.display = ''; 
+        } else {
+          item.style.display = 'none';
+        }
+      });
+    });
+
+    //seleciona item
+    items.forEach(item => {
+      item.addEventListener('click', () => {
+        const nomeElemento = item.querySelector('.zf-cb-name');
+
+        let cpfElemento = item.querySelector('.zf-cb-cpf');
+        let nomeSelecionado = "";
+        let idSelecionado = item.getAttribute('data-id') || "Sem ID"; 
+
+        if (nomeElemento) {
+          nomeSelecionado = nomeElemento.textContent.trim();
+          input.value = nomeSelecionado;
+        } else {
+          nomeSelecionado = item.textContent.trim();
+          input.value = nomeSelecionado;
+        }
+
+        toggleClearBtn();
+        combobox.classList.remove('active');
+
+        const dadosJSON = {
+          id: idSelecionado,
+          nome: nomeSelecionado,
+          cpf: cpfElemento ? cpfElemento.textContent.trim() : "CPF não encontrado"
+        };
+
+        console.log("Objeto Selecionado:", JSON.stringify(dadosJSON, null, 2));
+      });
+    });
+
+    //fecha lista se clicar fora
+    document.addEventListener('click', (e) => {
+      if (!combobox.contains(e.target)) {
+        combobox.classList.remove('active');
+      }
+    });
+
+    //filtra itens
+    input.addEventListener('input', (e) => {
+      const termoPesquisa = e.target.value.toLowerCase();
+
+      items.forEach(item => {
+        const textoItem = item.textContent.toLowerCase();
+
+        if (textoItem.includes(termoPesquisa)) {
+          item.style.display = ''; 
+        } else {
+          item.style.display = 'none';
+        }
+      });
+    });
+
+    //seleciona item
+    items.forEach(item => {
+      item.addEventListener('click', () => {
+        const nomeElemento = item.querySelector('.zf-cb-name');
+
+        let cpfElemento = item.querySelector('.zf-cb-cpf');
+        let nomeSelecionado = "";
+        let idSelecionado = item.getAttribute('data-id') || "Sem ID"; 
+
+        if (nomeElemento) {
+          nomeSelecionado = nomeElemento.textContent.trim();
+          input.value = nomeSelecionado;
+        } else {
+          nomeSelecionado = item.textContent.trim();
+          input.value = nomeSelecionado;
+        }
+
+        combobox.classList.remove('active');
+
+        const dadosJSON = {
+          id: idSelecionado,
+          nome: nomeSelecionado,
+          cpf: cpfElemento ? cpfElemento.textContent.trim() : "CPF não encontrado"
+        };
+
+        console.log("Objeto Selecionado:", JSON.stringify(dadosJSON, null, 2));
+        alert("JSON:\n" + JSON.stringify(dadosJSON, null, 2));
+      });
+    });
+
+    //fecha lista se clicar fora
+    document.addEventListener('click', (e) => {
+      if (!combobox.contains(e.target)) {
+        combobox.classList.remove('active');
+      }
+    });
+  });
+
+//--------------------------------------------------------------------------
+//dark/light mode toggle
+  const themeSwitch = document.getElementById('theme-toggle');
+  const themeLabel = document.getElementById('theme-label');
+
+  if (themeSwitch) {
+    themeSwitch.addEventListener('change', (e) => {
+      if (e.target.checked) {
+        document.documentElement.removeAttribute('data-theme');
+        themeLabel.textContent = "Modo Escuro Ativado";
+      } else {
+        document.documentElement.setAttribute('data-theme', 'light');
+        themeLabel.textContent = "Modo Claro Ativado";
+      }
+    });
+  }
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "zenite-ui",
+  "version": "1.0.3",
+  "description": " Framework front-end responsivo e elegante em CSS e Vanilla JS.",
+  "keywords": [
+    "css",
+    "framework",
+    "ui",
+    "frontend",
+    "javascript"
+  ],
+  "homepage": "https://github.com/zenitetecnologia/zenite-ui#readme",
+  "bugs": {
+    "url": "https://github.com/zenitetecnologia/zenite-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zenitetecnologia/zenite-ui.git"
+  },
+  "license": "MIT",
+  "author": "Zênite Tecnologia",
+  "type": "commonjs",
+  "main": "js/zenite.js",
+  "style": "zenite-ui/zenite.css",
+  "files": [
+    "zenite-ui",
+    "js"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/zenite-ui/accordion.css

@@ -0,0 +1,77 @@
+details {
+  background-color: var(--zf-background-secondary);
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  border-radius: 8px;
+  margin-bottom: 1rem;
+  padding: 0 1.5rem;
+  transition: border-color 0.3s ease;
+  overflow: hidden;
+}
+
+details:hover {
+  border-color: rgba(212, 175, 55, 0.5);
+}
+
+summary {
+  font-weight: 600;
+  color: var(--zf-text-light);
+  cursor: pointer;
+  padding: 1.5rem 0;
+  outline: none;
+  list-style: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/*seta dourada */
+summary::after {
+  content: "▼";
+  color: var(--zf-accent);
+  font-size: 0.8em;
+  transition: transform 0.3s ease;
+}
+
+/*roda a seta quando o detalhe está aberto */
+details[open] summary::after {
+  transform: rotate(180deg);
+}
+
+details[open] summary {
+  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
+  margin-bottom: 1rem;
+}
+
+details p {
+  padding-bottom: 0.5rem;
+}
+
+/*animacao da caixa*/
+details[open] {
+  animation: expandirCaixa 1.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
+}
+
+@keyframes expandirCaixa {
+  0% {
+    max-height: 75px; 
+  }
+  100% {
+    max-height: 500px;
+  }
+}
+
+/*anima a revelação suave do texto*/
+details[open] summary ~ * {
+  animation: revelarTexto 0.3s ease-in-out forwards;
+}
+
+@keyframes revelarTexto {
+  0% {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/zenite-ui/alert.css

@@ -0,0 +1,13 @@
+.alert {
+  padding: 1rem 1.5rem;
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+  background-color: var(--zf-background-secondary);
+  color: var(--zf-text-light);
+  border-left: 4px solid var(--zf-text-main);
+  display: flex;
+  align-items: center;
+}
+.alert-success { border-left-color: #28a745; background-color: rgba(40, 167, 69, 0.1); }
+.alert-error { border-left-color: #dc3545; background-color: rgba(220, 53, 69, 0.1); }
+.alert-warning { border-left-color: #ffc107; background-color: rgba(255, 193, 7, 0.1); }

package/zenite-ui/avatar.css

@@ -0,0 +1,16 @@
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: var(--zf-background-secondary);
+  color: var(--zf-text-light);
+  font-weight: bold;
+  object-fit: cover;
+  border: 2px solid var(--zf-accent);
+}
+
+.avatar-sm { width: 32px; height: 32px; font-size: 0.8rem; }
+.avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; }

package/zenite-ui/badge.css

@@ -0,0 +1,22 @@
+.badge {
+  display: inline-block;
+  padding: 0.25em 0.85em;
+  font-size: 0.75em;
+  font-weight: 700;
+  text-transform: uppercase;
+  border-radius: 9999px; /*efeito pilula*/
+  background-color: transparent;
+  color: var(--zf-text-main);
+  border: 1px solid var(--zf-text-main);
+  letter-spacing: 0.05em;
+  line-height: 1.5;
+  text-align: center;
+  white-space: nowrap;
+}
+
+/*dourado para destacar*/
+.badge.badge-accent {
+  background-color: rgba(212, 175, 55, 0.1);
+  color: var(--zf-accent);
+  border-color: var(--zf-accent);
+}

package/zenite-ui/button.css

@@ -0,0 +1,53 @@
+.button {
+  display: inline-block;
+  font-family: inherit;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.5;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  padding: 0.75rem 2rem;
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  transition: all 0.3s ease;
+  
+  background-color: var(--zf-accent);
+  color: var(--zf-background-primary);
+}
+
+.button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3); 
+}
+
+.button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.button.button-outline {
+  background-color: transparent;
+  border-color: var(--zf-accent);
+  color: var(--zf-accent);
+}
+
+.button.button-outline:hover:not(:disabled) {
+  background-color: var(--zf-accent);
+  color: var(--zf-background-primary);
+}
+
+.button:disabled,
+.button[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.button-group {
+  display: flex;
+  flex-wrap: wrap; 
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}

package/zenite-ui/calendar.css

@@ -0,0 +1,111 @@
+.calendar {
+  background-color: var(--zf-background-secondary);
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  width: 100%;
+  max-width: 380px; 
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.calendar:hover {
+  border-color: var(--zf-accent);
+  box-shadow: 0 8px 24px rgba(2, 13, 42, 0.8);
+}
+
+/*cabeçalho(mes, ano e botoes)*/
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.calendar-header h3 {
+  margin: 0;
+  color: var(--zf-text-light);
+  font-size: 1.2rem;
+  font-weight: 700;
+}
+
+/*botoes de mes*/
+.calendar-btn {
+  background: transparent;
+  border: 1px solid rgba(212, 175, 55, 0.3);
+  color: var(--zf-text-main);
+  border-radius: 8px;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-weight: bold;
+}
+
+.calendar-btn:hover {
+  background-color: var(--zf-accent);
+  color: var(--zf-background-primary);
+  border-color: var(--zf-accent);
+}
+
+/*dias*/
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr); 
+  gap: 0.5rem;
+  text-align: center;
+}
+
+/*dias da semana*/
+.calendar-day-name {
+  font-weight: 700;
+  font-size: 0.8rem;
+  color: var(--zf-accent);
+  text-transform: uppercase;
+  margin-bottom: 0.5rem;
+}
+
+/*numeros dos dias*/
+.calendar-day {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: 0.95rem;
+  color: var(--zf-text-main);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+
+.calendar-day:hover:not(.empty) {
+  background-color: rgba(212, 175, 55, 0.1);
+  color: var(--zf-text-light);
+  border-color: rgba(212, 175, 55, 0.3);
+}
+
+/*dia selecionado */
+.calendar-day.active {
+  background-color: var(--zf-accent);
+  color: var(--zf-background-primary);
+  font-weight: bold;
+  box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
+}
+
+.calendar-day.empty {
+  cursor: default;
+  opacity: 0.3;
+}
+
+/*ajuste modo claro*/
+[data-theme="light"] .calendar {
+  border-color: #0A1F44 !important; 
+}
+
+[data-theme="light"] .calendar-day.active {
+  color: #FFFFFF !important;
+}

package/zenite-ui/card.css

@@ -0,0 +1,33 @@
+.card {
+  background-color: var(--zf-background-secondary);
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 1.0rem;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+  height: 100%;
+  position: relative; 
+  z-index: 1; 
+}
+
+/*efeito de elevaçao interativa*/
+.card:hover,
+.card:focus-within {
+  transform: translateY(-4px);
+  border-color: var(--zf-accent);
+  box-shadow: 0 8px 24px rgba(2, 13, 42, 0.8);
+  z-index: 50; 
+}
+
+/*ajustes de tipografia dentro do card para nao ter margens excessivas*/
+.card > h1:first-child,
+.card > h2:first-child,
+.card > h3:first-child {
+  margin-top: 0;
+}
+
+.card > *:last-child {
+  margin-bottom: 0;
+}

package/zenite-ui/carousel.css

@@ -0,0 +1,56 @@
+.carousel {
+  display: flex;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  gap: 1.5rem;
+  padding-bottom: 1.5rem; 
+  margin-bottom: 1.5rem;
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--zf-accent) var(--zf-background-secondary);
+}
+
+.carousel::-webkit-scrollbar {
+  height: 8px;
+}
+
+.carousel::-webkit-scrollbar-track {
+  background: var(--zf-background-secondary);
+  border-radius: 4px;
+}
+
+.carousel::-webkit-scrollbar-thumb {
+  background: var(--zf-accent);
+  border-radius: 4px;
+}
+
+.carousel-item {
+  flex: 0 0 100%;
+  scroll-snap-align: center;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+.carousel-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.carousel-cards .carousel-item {
+  flex: 0 0 calc(100% - 3rem); 
+}
+
+@media (min-width: 768px) {
+  .carousel-cards .carousel-item {
+    flex: 0 0 calc(50% - 0.75rem); 
+  }
+}
+
+@media (min-width: 1024px) {
+  .carousel-cards .carousel-item {
+    flex: 0 0 calc(33.333% - 1rem);
+  }
+}

package/zenite-ui/column.css

@@ -0,0 +1,41 @@
+.container {
+  width: 100%;
+  max-width: var(--zf-container-width);
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zf-column-gap);
+  margin-bottom: var(--zf-column-gap); 
+}
+
+/*coluna automatica*/
+.column {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/*12 colunas*/
+.column-1  { flex: 0 0 calc(8.333%  - (var(--zf-column-gap) * 11 / 12)); }
+.column-2  { flex: 0 0 calc(16.666% - (var(--zf-column-gap) * 10 / 12)); }
+.column-3  { flex: 0 0 calc(25%     - (var(--zf-column-gap) * 9 / 12)); }
+.column-4  { flex: 0 0 calc(33.333% - (var(--zf-column-gap) * 8 / 12)); }
+.column-5  { flex: 0 0 calc(41.666% - (var(--zf-column-gap) * 7 / 12)); }
+.column-6  { flex: 0 0 calc(50%     - (var(--zf-column-gap) * 6 / 12)); }
+.column-7  { flex: 0 0 calc(58.333% - (var(--zf-column-gap) * 5 / 12)); }
+.column-8  { flex: 0 0 calc(66.666% - (var(--zf-column-gap) * 4 / 12)); }
+.column-9  { flex: 0 0 calc(75%     - (var(--zf-column-gap) * 3 / 12)); }
+.column-10 { flex: 0 0 calc(83.333% - (var(--zf-column-gap) * 2 / 12)); }
+.column-11 { flex: 0 0 calc(91.666% - (var(--zf-column-gap) * 1 / 12)); }
+.column-12 { flex: 0 0 100%; }
+
+/*responsivo mobile*/
+@media (max-width: 768px) {
+  .column, 
+  [class^="column-"] {
+    flex: 0 0 100%;
+  }
+}