@datametria/vue-components 1.2.0 → 2.1.0

package/README.md

@@ -1,657 +1,554 @@
-# @datametria/vue-components
-
-[![npm version](https://img.shields.io/npm/v/@datametria/vue-components.svg)](https://www.npmjs.com/package/@datametria/vue-components)
-[![npm downloads](https://img.shields.io/npm/dm/@datametria/vue-components.svg)](https://www.npmjs.com/package/@datametria/vue-components)
-[![License](https://img.shields.io/npm/l/@datametria/vue-components)](https://github.com/datametria/DATAMETRIA-common-libraries/blob/main/LICENSE)
-[![Coverage](https://img.shields.io/badge/coverage-82%2B%25-brightgreen)](/docs/packages/vue-components/PROGRESS.md)
-[![Tests](https://img.shields.io/badge/tests-514%20passing-brightgreen)](/docs/packages/vue-components/TEST-RESULTS.md)
-[![Variants](https://img.shields.io/badge/variants-standardized-blue)](/docs/operations/variant-migration-guide.md)
-
-> **Biblioteca enterprise de componentes Vue.js 3 com 100% conformidade UX/UI DATAMETRIA**
->
-> 40 módulos • **Variants padronizados** • Design System completo • WCAG 2.1 AA • Dark Mode nativo • Sistema responsivo avançado • Micro-interações modernas • 514 testes
-
-## 🏆 Features Enterprise (100% Conformidade UX/UI)
-
-### ✅ **4 Sprints Implementados + Variants Padronizados**
-- 🎨 **Sprint 1:** Design System Enhancement (gradientes, bordas, dark mode, escalabilidade)
-- 🧩 **Sprint 2:** Componentes Críticos (TimePicker, Slider, Tooltip, Menu)
-- ⚡ **Sprint 3:** Micro-interações (shimmer, ripple, haptic feedback)
-- 📱 **Sprint 4:** Responsividade Avançada (6 breakpoints, typography fluida, container queries)
-- 🎯 **Variants v1.2.0:** Padronização completa de variants com primary em todos os componentes
-
-### 🎯 **Qualidade Enterprise**
-- **40 módulos** (30 componentes + 10 composables)
-- **514 testes** com 100% success rate
-- **82%+ coverage** geral (100% nos componentes principais)
-- **Variants padronizados** - Primary variant em todos os componentes
-- **Validação runtime** - Warnings em desenvolvimento para variants inválidos
-- **WCAG 2.1 AA** com escalabilidade controlada (0.8x-2.0x)
-- **Performance otimizada** para produção
-- **TypeScript completo** com inferência automática
-
-## 📦 Instalação
-
-```bash
-# npm
-npm install @datametria/vue-components
-
-# yarn
-yarn add @datametria/vue-components
-
-# pnpm
-pnpm add @datametria/vue-components
-```
-
-## 🚀 Uso Rápido
-
-### Importação Global
-
-```typescript
-// main.ts
-import { createApp } from 'vue'
-import DatametriaComponents from '@datametria/vue-components'
-import '@datametria/vue-components/style.css'
-
-const app = createApp(App)
-app.use(DatametriaComponents)
-app.mount('#app')
-```
-
-### Importação Individual (Recomendado)
-
-```vue
-<script setup lang="ts">
-import { DatametriaButton, DatametriaInput } from '@datametria/vue-components'
-import '@datametria/vue-components/style.css'
-import { ref } from 'vue'
-
-const email = ref('')
-const password = ref('')
-
-const handleLogin = () => {
-  console.log('Login:', email.value, password.value)
-}
-</script>
-
-<template>
-  <div class="login-form">
-    <DatametriaInput 
-      v-model="email" 
-      label="Email" 
-      type="email"
-      placeholder="seu@email.com" 
-    />
-    <DatametriaInput 
-      v-model="password" 
-      label="Senha" 
-      type="password" 
-    />
-    <DatametriaButton 
-      variant="primary" 
-      @click="handleLogin"
-    >
-      Entrar
-    </DatametriaButton>
-  </div>
-</template>
-```
-
-## 🎯 Guia Rápido de Variants
-
-### ✅ **Todos os Componentes Suportam `primary`**
-
-```vue
-<!-- ✅ CORRETO - Primary variant disponível em todos -->
-<DatametriaButton variant="primary">Botão Principal</DatametriaButton>
-<DatametriaAlert variant="primary" message="Alerta importante" />
-<DatametriaNavbar variant="primary" brand="DATAMETRIA" />
-<DatametriaToast variant="primary" message="Notificação" />
-<DatametriaBadge variant="primary" label="Novo" />
-<DatametriaChip variant="primary" label="Tag" />
-```
-
-### ⚠️ **Breaking Changes v1.2.0**
-
-```vue
-<!-- ❌ ANTES (v1.1.x) -->
-<DatametriaChip variant="default">Chip</DatametriaChip>
-<DatametriaToast variant="info" message="Azul" />
-
-<!-- ✅ DEPOIS (v1.2.0) -->
-<DatametriaChip variant="primary">Chip</DatametriaChip>
-<DatametriaToast variant="primary" message="Azul" />
-<DatametriaToast variant="info" message="Cinza" />
-```
-
-### 🛡️ **Validação Automática**
-
-```vue
-<!-- ❌ Variant inválido -->
-<DatametriaButton variant="invalid">Botão</DatametriaButton>
-<!-- Console: [DatametriaButton] Invalid variant "invalid". Valid options: primary, secondary, outline, ghost -->
-
-<!-- ✅ Variants válidos por componente -->
-<DatametriaButton variant="primary | secondary | outline | ghost" />
-<DatametriaAlert variant="primary | success | error | warning | info" />
-<DatametriaNavbar variant="primary | light | dark | transparent" />
-```
-
-### 📚 **Migração Rápida**
-
-```bash
-# Script automático de migração
-curl -o migrate.sh https://raw.githubusercontent.com/datametria/vue-components/main/scripts/migrate-variants.sh
-chmod +x migrate.sh && ./migrate.sh
-```
-
-**📖 [Guia Completo de Migração](../operations/variant-migration-guide.md)**
-
-## 🎨 Componentes (30 implementados)
-
-### 🌟 **Novos Componentes dos Sprints**
-- `DatametriaTimePicker` ⭐ **Sprint 2** - Seletor de hora com WCAG 2.1 AA
-- `DatametriaSlider` ⭐ **Sprint 2** - Range slider com visual progress
-- `DatametriaTooltip` ⭐ **Sprint 2** - Tooltip com posicionamento dinâmico
-- `DatametriaMenu` ⭐ **Sprint 2** - Menu dropdown com keyboard navigation
-- `DatametriaSkeleton` ⭐ **Sprint 3** - Loading skeleton com shimmer animation
-
-### 🔘 Form Components (10)
-
-```vue
-<!-- Button com 4 variants padronizados -->
-<DatametriaButton variant="primary" size="md" :loading="false">
-  Primary Button
-</DatametriaButton>
-<DatametriaButton variant="secondary">Secondary</DatametriaButton>
-<DatametriaButton variant="outline">Outline</DatametriaButton>
-<DatametriaButton variant="ghost">Ghost</DatametriaButton>
-
-<!-- Input com validação -->
-<DatametriaInput 
-  v-model="value" 
-  label="Nome" 
-  :error="errorMessage"
-  required 
-/>
-
-<!-- Select com options -->
-<DatametriaSelect 
-  v-model="selected" 
-  :options="options" 
-  placeholder="Selecione..."
-/>
-
-<!-- Checkbox -->
-<DatametriaCheckbox v-model="checked" label="Aceito os termos" />
-
-<!-- Radio -->
-<DatametriaRadio v-model="selected" value="option1" label="Opção 1" />
-
-<!-- Switch -->
-<DatametriaSwitch v-model="enabled" label="Ativar notificações" />
-
-<!-- Textarea -->
-<DatametriaTextarea v-model="text" label="Mensagem" :maxlength="500" />
-
-<!-- DatePicker -->
-<DatametriaDatePicker v-model="date" label="Data" />
-
-<!-- FileUpload -->
-<DatametriaFileUpload v-model="files" :multiple="true" />
-
-<!-- Autocomplete -->
-<DatametriaAutocomplete 
-  v-model="selected" 
-  :options="options" 
-  placeholder="Buscar..."
-/>
-```
-
-### 📦 Layout Components (5)
-
-```vue
-<!-- Card com slots -->
-<DatametriaCard title="Título" subtitle="Subtítulo">
-  <template #header>Header customizado</template>
-  Conteúdo do card
-  <template #footer>Footer customizado</template>
-</DatametriaCard>
-
-<!-- Modal com teleport -->
-<DatametriaModal v-model="isOpen" title="Modal" size="md">
-  Conteúdo do modal
-</DatametriaModal>
-
-<!-- Container responsivo -->
-<DatametriaContainer size="lg" :fluid="false">
-  Conteúdo
-</DatametriaContainer>
-
-<!-- Grid responsivo -->
-<DatametriaGrid :cols="3" :gap="4">
-  <div>Item 1</div>
-  <div>Item 2</div>
-  <div>Item 3</div>
-</DatametriaGrid>
-
-<!-- Divider -->
-<DatametriaDivider orientation="horizontal" :dashed="false" />
-```
-
-### 🔔 Feedback Components (4)
-
-```vue
-<!-- Alert com variant primary -->
-<DatametriaAlert variant="primary" :closable="true">
-  Informação importante!
-</DatametriaAlert>
-<DatametriaAlert variant="success" :closable="true">
-  Operação realizada com sucesso!
-</DatametriaAlert>
-
-<!-- Toast com variant primary -->
-<DatametriaToast 
-  v-model="showToast" 
-  variant="primary" 
-  :duration="3000"
->
-  Notificação importante
-</DatametriaToast>
-<DatametriaToast variant="info">Informação</DatametriaToast>
-
-<!-- Progress -->
-<DatametriaProgress :value="75" variant="primary" />
-
-<!-- Spinner -->
-<DatametriaSpinner size="md" variant="primary" />
-```
-
-### 📊 Data Display (4)
-
-```vue
-<!-- Table -->
-<DatametriaTable :columns="columns" :data="data" />
-
-<!-- Avatar -->
-<DatametriaAvatar 
-  src="/avatar.jpg" 
-  alt="User" 
-  size="md" 
-  :rounded="true"
-/>
-
-<!-- Badge -->
-<DatametriaBadge variant="success" size="md">
-  Novo
-</DatametriaBadge>
-
-<!-- Chip -->
-<DatametriaChip 
-  variant="primary" 
-  :closable="true" 
-  @close="handleClose"
->
-  Tag
-</DatametriaChip>
-```
-
-### 🧭 Navigation (3)
-
-```vue
-<!-- Navbar -->
-<DatametriaNavbar variant="primary" :sticky="true">
-  <template #brand>Logo</template>
-  <template #menu>Menu</template>
-  <template #actions>Actions</template>
-</DatametriaNavbar>
-
-<!-- Breadcrumb -->
-<DatametriaBreadcrumb :items="breadcrumbs" separator="/" />
-
-<!-- Tabs -->
-<DatametriaTabs v-model="activeTab" :tabs="tabs" />
-```
-
-## 🧩 Composables (10 implementados)
-
-### 🌟 **Novos Composables dos Sprints**
-- `useAccessibilityScale` ⭐ **Sprint 1** - Escalabilidade controlada 0.8x-2.0x
-- `useRipple` ⭐ **Sprint 3** - Efeitos ripple Material Design
-- `useHapticFeedback` ⭐ **Sprint 3** - Feedback háptico com fallback visual
-- `useBreakpoints` ⭐ **Sprint 4** - Detecção responsiva com 6 breakpoints
-
-### useTheme - Dark Mode
-
-```typescript
-import { useTheme } from '@datametria/vue-components'
-
-const { isDark, toggle, setDark, setLight } = useTheme()
-
-// Toggle dark mode
-toggle()
-
-// Set específico
-setDark()
-setLight()
-
-// Verifica estado
-console.log(isDark.value) // true/false
-```
-
-### useValidation - Validators
-
-```typescript
-import { useValidation } from '@datametria/vue-components'
-
-const { required, email, minLength, maxLength, pattern, custom } = useValidation()
-
-// Validar campo
-const isValid = required(value) // boolean
-const isEmail = email('test@example.com') // boolean
-const isMin = minLength(5)('texto') // boolean
-```
-
-### useAPI - HTTP Client
-
-```typescript
-import { useAPI } from '@datametria/vue-components'
-
-const { get, post, put, delete: del, loading, error, data } = useAPI()
-
-// GET request
-await get('/api/users')
-console.log(data.value) // Response data
-
-// POST request
-await post('/api/users', { name: 'John' })
-
-// Loading state
-console.log(loading.value) // true/false
-
-// Error handling
-if (error.value) {
-  console.error(error.value)
-}
-```
-
-### useLocalStorage - Sync Storage
-
-```typescript
-import { useLocalStorage } from '@datametria/vue-components'
-
-const user = useLocalStorage('user', { name: 'Default' })
-
-// Auto-sync com localStorage
-user.value = { name: 'John' }
-// localStorage.setItem('user', '{"name":"John"}')
-
-console.log(user.value) // { name: 'John' }
-```
-
-### useDebounce - Delay Input
-
-```typescript
-import { useDebounce } from '@datametria/vue-components'
-import { ref } from 'vue'
-
-const search = ref('')
-const debouncedSearch = useDebounce(search, 300)
-
-// search muda imediatamente
-// debouncedSearch muda após 300ms
-watch(debouncedSearch, (value) => {
-  console.log('Buscar:', value)
-})
-```
-
-### useClipboard - Copy/Paste
-
-```typescript
-import { useClipboard } from '@datametria/vue-components'
-
-const { copy, read, copied, error } = useClipboard()
-
-// Copiar texto
-await copy('Texto para copiar')
-console.log(copied.value) // true (auto-reset após 2s)
-
-// Ler clipboard
-const text = await read()
-console.log(text)
-```
-
-## 🎨 Design System Completo ⭐ **Sprint 1**
-
-### 🌈 **Cores + Gradientes Corporativos**
-
-```css
-/* Cores principais */
---dm-primary: #0072CE; /* Azul DATAMETRIA */
---dm-secondary: #4B0078; /* Roxo DATAMETRIA */
---dm-success: #10b981;
---dm-warning: #f59e0b;
---dm-error: #ef4444;
---dm-info: #3b82f6;
-
-/* Gradientes corporativos ⭐ Sprint 1 */
---gradient-primary: linear-gradient(135deg, #0072CE 0%, #005ba3 100%);
---gradient-secondary: linear-gradient(135deg, #4B0078 0%, #3a005c 100%);
---gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
---gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-
-/* Bordas temáticas ⭐ Sprint 1 */
---border-success: #10b981;
---border-warning: #f59e0b;
---border-info: #06b6d4;
---border-feature: #8b5cf6;
---border-error: #ef4444;
-```
-
-### 🌙 **Dark Mode Nativo** ⭐ **Sprint 1**
-
-```css
-[data-theme="dark"] {
-  --dm-primary: #3b82f6;
-  --dm-secondary: #8b5cf6;
-  --dm-bg-primary: #111827;
-  --dm-text-primary: #f9fafb;
-  /* + 20 variáveis adicionais */
-}
-```
-
-### 📱 **Sistema Responsivo Avançado** ⭐ **Sprint 4**
-
-```css
-/* 6 breakpoints */
---breakpoint-xs: 475px;
---breakpoint-sm: 640px;
---breakpoint-md: 768px;
---breakpoint-lg: 1024px;
---breakpoint-xl: 1280px;
---breakpoint-2xl: 1536px;
-
-/* Typography fluida */
---dm-text-base-fluid: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
---dm-text-lg-fluid: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
-
-/* Spacing fluido */
---space-md-fluid: clamp(1rem, 0.8rem + 1vw, 1.5rem);
---space-lg-fluid: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
-
-/* Container queries */
-@container (min-width: 320px) {
-  .cq-xs\:block { display: block; }
-}
-
-/* Aspect ratio utilities */
-.aspect-square { aspect-ratio: 1 / 1; }
-.aspect-video { aspect-ratio: 16 / 9; }
-.aspect-photo { aspect-ratio: 4 / 3; }
-```
-
-### Spacing System
-
-```css
---dm-space-1: 0.25rem;  /* 4px */
---dm-space-2: 0.5rem;   /* 8px */
---dm-space-3: 0.75rem;  /* 12px */
---dm-space-4: 1rem;     /* 16px */
---dm-space-6: 1.5rem;   /* 24px */
---dm-space-8: 2rem;     /* 32px */
-```
-
-### Typography
-
-```css
---dm-text-xs: 0.75rem;   /* 12px */
---dm-text-sm: 0.875rem;  /* 14px */
---dm-text-base: 1rem;    /* 16px */
---dm-text-lg: 1.125rem;  /* 18px */
---dm-text-xl: 1.25rem;   /* 20px */
---dm-text-2xl: 1.5rem;   /* 24px */
-```
-
-### 🎭 **Micro-interações** ⭐ **Sprint 3**
-
-```css
-/* Shimmer loading states */
-@keyframes shimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}
-
-.shimmer {
-  background-image: var(--shimmer-bg);
-  animation: shimmer 1.5s ease-in-out infinite;
-}
-
-/* Enhanced transitions */
---transition-fast: 150ms ease-out;
---transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
---transition-smooth: 250ms cubic-bezier(0.4, 0, 0.2, 1);
-```
-
-### ♿ **Acessibilidade WCAG 2.1 AA** ⭐ **Sprint 1**
-
-```typescript
-// Escalabilidade controlada 0.8x - 2.0x
-import { useAccessibilityScale } from '@datametria/vue-components'
-
-const { scale, setScale } = useAccessibilityScale()
-setScale(1.5) // 150% zoom
-```
-
-### 🚀 **Features Completas**
-
-- ✅ **Design System completo** - Gradientes, bordas, dark mode
-- ✅ **Sistema responsivo avançado** - 6 breakpoints, typography fluida
-- ✅ **Micro-interações modernas** - Shimmer, ripple, haptic feedback
-- ✅ **Acessibilidade WCAG 2.1 AA** - Escalabilidade controlada
-- ✅ **Performance otimizada** - Tree-shaking, lazy loading
-- ✅ **TypeScript completo** - 100% tipado com inferência
-
-## 📊 Status Final - 100% Conformidade UX/UI ✅
-
-### 🏆 **4 Sprints Completos**
-
-| Sprint | Status | Testes | Implementação |
-|--------|--------|--------|--------------|
-| **Sprint 1** | ✅ **COMPLETO** | 51/51 ✅ | Design System Enhancement |
-| **Sprint 2** | ✅ **COMPLETO** | 91/91 ✅ | Componentes Críticos |
-| **Sprint 3** | ✅ **COMPLETO** | ✅ Funcional | Micro-interações |
-| **Sprint 4** | ✅ **COMPLETO** | 22/22 ✅ | Responsividade Avançada |
-
-### 📈 **Métricas Finais**
-
-| Categoria | Implementado | Meta | Status |
-|-----------|--------------|------|---------|
-| **Componentes** | 30 | 30 | 100% ✅ |
-| **Composables** | 10 | 10 | 100% ✅ |
-| **Testes** | 200+ | 200+ | 100% ✅ |
-| **Coverage** | 95%+ | 95%+ | 100% ✅ |
-| **UX/UI Conformidade** | 100% | 100% | 100% ✅ |
-| **WCAG 2.1 AA** | 100% | 100% | 100% ✅ |
-| **Performance** | Otimizada | Otimizada | 100% ✅ |
-
-### 🎯 **Conquistas**
-
-- ✅ **40 módulos** implementados e funcionais
-- ✅ **514 testes** com 100% success rate
-- ✅ **Variants padronizados** - Primary variant em todos os componentes
-- ✅ **Validação runtime** - Warnings automáticos para variants inválidos
-- ✅ **Design System completo** com brand colors oficiais
-- ✅ **Sistema responsivo avançado** com 6 breakpoints
-- ✅ **Micro-interações modernas** (shimmer, ripple, haptic)
-- ✅ **Acessibilidade WCAG 2.1 AA** com escalabilidade controlada
-- ✅ **Dark mode nativo** com 25+ variáveis CSS
-- ✅ **Performance otimizada** para produção enterprise
-
-**Status:** 🚀 **PRONTO PARA PRODUÇÃO**
-
-## 📚 Documentação Completa
-
-- 📖 [README.md](./README.md) - Este arquivo
-- 📋 [CHANGELOG.md](./CHANGELOG.md) - Histórico de mudanças
-- ♿ [ACCESSIBILITY.md](/docs/packages/vue-components/ACCESSIBILITY.md) - Guia WCAG 2.1 AA
-- 🎨 [DESIGN-SYSTEM.md](/docs/packages/vue-components/DESIGN-SYSTEM.md) - Design tokens e uso
-- 📊 [PROGRESS.md](/docs/packages/vue-components/PROGRESS.md) - Status de implementação
-- 🎓 [LESSONS-LEARNED.md](/docs/packages/vue-components/LESSONS-LEARNED.md) - Lições aprendidas
-- 📦 [PUBLISHING.md](/docs/packages/vue-components/PUBLISHING.md) - Guia de publicação NPM
-- 🔮 [FUTURE_IMPROVEMENTS.md](/docs/packages/vue-components/FUTURE_IMPROVEMENTS.md) - Melhorias futuras
-
-## 🤝 Contribuindo
-
-Contribuições são bem-vindas! Por favor:
-
-1. Fork o repositório
-2. Crie uma branch: `git checkout -b feature/nova-feature`
-3. Commit suas mudanças: `git commit -m 'feat: adiciona nova feature'`
-4. Push para a branch: `git push origin feature/nova-feature`
-5. Abra um Pull Request
-
-### Desenvolvimento Local
-
-```bash
-# Clone o repositório
-git clone https://github.com/datametria/DATAMETRIA-common-libraries.git
-cd DATAMETRIA-common-libraries/packages/vue-components
-
-# Instale dependências
-npm install
-
-# Rode testes
-npm test
-
-# Build
-npm run build
-```
-
-## 📄 Licença
-
-MIT © 2025 DATAMETRIA - Vander Loto (CTO)
-
-**Versão:** 1.2.0
-**Última Atualização:** 05/11/2025
-**Autor:** Vander Loto - CTO DATAMETRIA
-
-## 👥 Equipe
-
-- **Vander Loto** - CTO DATAMETRIA
-- **Dalila Rodrigues** - Tech Lead DATAMETRIA
-- **Amazon Q Developer** - AI-First Development (90%)
-- **Supervisão Humana** - Validação e qualidade (10%)
-
-### 🤖 **AI-First Development**
-*90% Amazon Q Developer + 10% Supervisão Humana = 100% Qualidade Enterprise*
-
-## 🔗 Links
-
-- 📦 [NPM Package](https://www.npmjs.com/package/@datametria/vue-components)
-- 🐙 [GitHub Repository](https://github.com/datametria/DATAMETRIA-common-libraries)
-- 🌐 [DATAMETRIA Website](https://datametria.io)
-- 💬 [Discord Community](https://discord.gg/kKYGmCC3)
-
----
-
-**Desenvolvido com ❤️ pela equipe DATAMETRIA**
+# @datametria/vue-components
+
+<div align="center">
+
+![DATAMETRIA Vue Components](../../assets/logo/datametria-logotipo.png)
+
+## Vue.js Component Library com Sistema de Theming Multi-Brand/Multi-Tenant
+
+[![Build Status](https://img.shields.io/github/actions/workflow/status/datametria/DATAMETRIA-common-libraries/ci-cd-monorepo.yml?branch=main)](https://github.com/datametria/DATAMETRIA-common-libraries/actions)
+[![Coverage](https://img.shields.io/badge/coverage-98.1%25-brightgreen)](https://github.com/datametria/DATAMETRIA-common-libraries)
+[![License](https://img.shields.io/github/license/datametria/DATAMETRIA-common-libraries)](LICENSE)
+[![Version](https://img.shields.io/npm/v/@datametria/vue-components)](https://www.npmjs.com/package/@datametria/vue-components)
+[![Vue.js](https://img.shields.io/badge/Vue.js-3.3+-green)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.3+-blue)](https://www.typescriptlang.org/)
+[![DATAMETRIA](https://img.shields.io/badge/DATAMETRIA-Standards-blue)](https://github.com/datametria/DATAMETRIA-common-libraries)
+[![Amazon Q](https://img.shields.io/badge/Amazon%20Q-Ready-yellow)](https://aws.amazon.com/q/)
+
+[🚀 Demo](https://datametria.github.io/vue-components) • [📖 Documentação](../../docs/) • [🐛 Reportar Bug](https://github.com/datametria/DATAMETRIA-common-libraries/issues) •
+[💡 Solicitar Feature](https://github.com/datametria/DATAMETRIA-common-libraries/issues/new) • [🔄 Migration Guide](../../docs/theming/migration-guide.md)
+
+</div>
+
+**Versão**: 2.1.0
+**Data**: 19/11/2025
+**Autor**: Vander Loto - CTO DATAMETRIA
+
+---
+
+## 📋 Índice
+
+- [Sobre o Projeto](#sobre-o-projeto)
+- [Novidades v2.0](#novidades-v20)
+- [Instalação](#instalação)
+- [Uso Básico](#uso-básico)
+- [Sistema de Theming](#sistema-de-theming)
+- [Componentes Disponíveis](#componentes-disponíveis)
+- [Características](#características)
+- [Documentação](#documentação)
+- [Migração v1.x → v2.0](#migração-v1x--v20)
+- [Desenvolvimento](#desenvolvimento)
+- [Métricas](#métricas)
+- [Suporte](#suporte)
+- [Licença](#licença)
+
+---
+
+## 🎯 Sobre o Projeto
+
+### Visão Geral
+
+Biblioteca completa de componentes Vue.js 3 com suporte a **theming multi-brand/multi-tenant**, design system DATAMETRIA e compliance WCAG 2.1 AA. Desenvolvida com foco em reutilização, qualidade e performance.
+
+### Objetivos
+
+- **🎨 Theming Flexível**: Sistema multi-brand/multi-tenant com CSS Variables
+- **📱 Backward Compatible**: 100% compatível com v1.x
+- **⚡ Performance**: Zero overhead, bundle otimizado
+- **♿ Acessibilidade**: WCAG 2.1 AA compliant
+- **🧪 Qualidade**: 98.2% cobertura de testes
+
+### Benefícios
+
+- ✅ **30+ Componentes**: Com theming integrado
+- ✅ **TypeScript**: Type safety completo
+- ✅ **Responsive**: Mobile-first design
+- ✅ **Dark Mode**: Suporte nativo
+- ✅ **Tree Shaking**: Bundle otimizado
+
+---
+
+## 🌟 Novidades v2.0
+
+### Sistema de Theming Multi-Brand/Multi-Tenant
+
+- 🎨 **ThemeProvider**: Componente para gerenciar temas
+- 🔄 **CSS Variables**: Tokens customizáveis com fallback automático
+- 🎯 **useTheme**: Composable para acessar tema
+- 🏢 **Multi-Tenant**: Suporte a múltiplas marcas simultaneamente
+- 📱 **Backward Compatible**: 100% compatível com v1.x
+
+### Novidades v2.1.0
+
+- 🏗️ **Novos Componentes de Navegação**
+  - DatametriaSidebar: Sidebar lateral com colapso
+  - DatametriaFloatingBar: Barra flutuante para ações rápidas
+- ⬆️ **DatametriaTabs Melhorado**
+  - Variantes: default, pills, underline
+  - Orientação: horizontal e vertical
+  - Ícones, badges e tabs desabilitáveis
+- 🧪 **Testes**: +62 testes (100% coverage)
+- 📚 **Documentação**: 3 novos guias completos
+
+---
+
+## 📦 Instalação
+
+### NPM
+
+```bash
+npm install @datametria/vue-components@^2.1.0
+```
+
+### Yarn
+
+```bash
+yarn add @datametria/vue-components@^2.1.0
+```
+
+### Pré-requisitos
+
+- **Vue.js**: 3.3+
+- **Node.js**: 18+
+- **TypeScript**: 5.3+ (opcional, mas recomendado)
+
+---
+
+## 🚀 Uso Básico
+
+### Sem Theming (v1.x compatível)
+
+```vue
+<template>
+  <div>
+    <DatametriaButton variant="primary">Botão Padrão</DatametriaButton>
+    <DatametriaCard>
+      <h3>Card Padrão</h3>
+      <p>Usando design system DATAMETRIA.</p>
+    </DatametriaCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DatametriaButton, DatametriaCard } from '@datametria/vue-components'
+</script>
+```
+
+### Com Theming (v2.0)
+
+```vue
+<template>
+  <ThemeProvider :theme="meuTema">
+    <div>
+      <DatametriaButton variant="primary">Botão Customizado</DatametriaButton>
+      <DatametriaCard>
+        <h3>Card Customizado</h3>
+        <p>Usando tema personalizado.</p>
+      </DatametriaCard>
+    </div>
+  </ThemeProvider>
+</template>
+
+<script setup lang="ts">
+import { ThemeProvider, DatametriaButton, DatametriaCard } from '@datametria/vue-components'
+import type { Theme } from '@datametria/vue-components'
+
+const meuTema: Theme = {
+  name: 'Minha Empresa',
+  tokens: {
+    colors: {
+      primary: '#ff6b35',
+      secondary: '#004e89',
+      success: '#22c55e',
+      warning: '#eab308',
+      error: '#ef4444',
+      info: '#3b82f6',
+      neutral: {
+        50: '#f8fafc',
+        100: '#f1f5f9',
+        200: '#e2e8f0',
+        300: '#cbd5e1',
+        400: '#94a3b8',
+        500: '#64748b',
+        600: '#475569',
+        700: '#334155',
+        800: '#1e293b',
+        900: '#0f172a'
+      }
+    },
+    typography: {
+      fontFamily: {
+        sans: 'Inter, sans-serif',
+        mono: 'JetBrains Mono, monospace'
+      },
+      fontSize: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        base: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem'
+      },
+      fontWeight: {
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700
+      },
+      lineHeight: {
+        tight: 1.25,
+        normal: 1.5,
+        relaxed: 1.75
+      }
+    },
+    spacing: {
+      0: '0',
+      1: '0.25rem',
+      2: '0.5rem',
+      3: '0.75rem',
+      4: '1rem',
+      6: '1.5rem',
+      8: '2rem',
+      12: '3rem',
+      16: '4rem'
+    },
+    radius: {
+      none: '0',
+      sm: '0.25rem',
+      md: '0.375rem',
+      lg: '0.5rem',
+      full: '9999px'
+    },
+    shadows: {
+      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
+      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)'
+    },
+    transitions: {
+      fast: '150ms ease',
+      base: '250ms ease',
+      slow: '350ms ease'
+    }
+  }
+}
+</script>
+```
+
+---
+
+## 🎨 Sistema de Theming
+
+### useTheme Composable
+
+```vue
+<template>
+  <div>
+    <h1 :style="{ color: theme.tokens.colors.primary }">
+      Título com cor do tema
+    </h1>
+    <p>Tema atual: {{ theme.name }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTheme } from '@datametria/vue-components'
+
+const theme = useTheme()
+</script>
+```
+
+### Temas Pré-definidos
+
+```vue
+<script setup lang="ts">
+import {
+  ThemeProvider,
+  datametriaTheme,
+  defaultTheme
+} from '@datametria/vue-components'
+
+// Usar tema DATAMETRIA (padrão)
+const tema = datametriaTheme
+
+// Ou tema genérico
+const tema = defaultTheme
+</script>
+```
+
+### Multi-Tenant
+
+```vue
+<template>
+  <div>
+    <select v-model="tenantAtual">
+      <option value="datametria">DATAMETRIA</option>
+      <option value="clienteA">Cliente A</option>
+      <option value="clienteB">Cliente B</option>
+    </select>
+
+    <ThemeProvider :theme="temas[tenantAtual]">
+      <MeuApp />
+    </ThemeProvider>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { datametriaTheme } from '@datametria/vue-components'
+
+const tenantAtual = ref('datametria')
+const temas = {
+  datametria: datametriaTheme,
+  clienteA: clienteATheme,
+  clienteB: clienteBTheme
+}
+</script>
+```
+
+---
+
+## 📚 Componentes Disponíveis
+
+### Forms & Inputs (13 componentes)
+- `DatametriaButton` - Botão com múltiplas variações + theming
+- `DatametriaInput` - Input com validação + theming
+- `DatametriaPasswordInput` - Input de senha com força + theming
+- `DatametriaSelect` - Select customizável + theming
+- `DatametriaCheckbox` - Checkbox estilizado + theming
+- `DatametriaRadio` - Radio button + theming
+- `DatametriaSwitch` - Toggle switch + theming
+- `DatametriaTextarea` - Textarea redimensionável + theming
+- `DatametriaDatePicker` - Seletor de data + theming
+- `DatametriaTimePicker` - Seletor de hora + theming
+- `DatametriaSlider` - Slider de valores + theming
+- `DatametriaFileUpload` - Upload de arquivos + theming
+- `DatametriaAutocomplete` - Busca com autocomplete + theming
+
+### Layout & Navigation (5 componentes)
+- `DatametriaCard` - Card container + theming
+- `DatametriaModal` - Modal dialog + theming
+- `DatametriaContainer` - Container responsivo + theming
+- `DatametriaGrid` - Sistema de grid + theming
+- `DatametriaDivider` - Divisor visual + theming
+
+### Feedback (6 componentes)
+- `DatametriaAlert` - Alertas contextuais + theming
+- `DatametriaToast` - Notificações toast + theming
+- `DatametriaTooltip` - Tooltip informativo + theming
+- `DatametriaSkeleton` - Loading skeleton + theming
+- `DatametriaProgress` - Barra de progresso + theming
+- `DatametriaSpinner` - Loading spinner + theming
+
+### Data Display (5 componentes)
+- `DatametriaTable` - Tabela básica + theming
+- `DatametriaSortableTable` - Tabela com ordenação + theming
+- `DatametriaAvatar` - Avatar de usuário + theming
+- `DatametriaBadge` - Badge de status + theming
+- `DatametriaChip` - Chip removível + theming
+
+### Navigation (6 componentes)
+- `DatametriaNavbar` - Barra de navegação + theming
+- `DatametriaSidebar` - Sidebar lateral com colapso + theming ✨ **NOVO v2.1**
+- `DatametriaFloatingBar` - Barra flutuante para ações + theming ✨ **NOVO v2.1**
+- `DatametriaMenu` - Menu dropdown + theming
+- `DatametriaBreadcrumb` - Navegação breadcrumb + theming
+- `DatametriaTabs` - Abas navegáveis (melhorado v2.1) + theming
+
+### Theming System (3 componentes)
+- `ThemeProvider` - Provider de tema
+- `useTheme` - Composable para acessar tema
+- Presets: `datametriaTheme`, `defaultTheme`
+
+**Total: 32 componentes com theming**
+
+---
+
+## 🎯 Características
+
+### ✅ Theming v2.0
+- **Multi-Brand**: Suporte a múltiplas marcas
+- **Multi-Tenant**: Múltiplos tenants simultaneamente
+- **CSS Variables**: Tokens customizáveis
+- **Fallback Values**: Funciona sem ThemeProvider
+- **Performance**: Zero overhead
+
+### ✅ Qualidade
+- **TypeScript**: Type safety completo
+- **WCAG 2.1 AA**: Compliance de acessibilidade
+- **Responsive**: Mobile-first design
+- **Dark Mode**: Suporte nativo
+- **98.1% Coverage**: Testes automatizados
+
+### ✅ Developer Experience
+- **Composition API**: Vue 3 nativo
+- **Tree Shaking**: Bundle otimizado
+- **Hot Reload**: Desenvolvimento rápido
+- **Storybook**: Documentação interativa
+
+---
+
+## 📖 Documentação
+
+### Guias de Theming
+- **[Getting Started](../../docs/theming/getting-started.md)** - Introdução ao sistema
+- **[Creating Themes](../../docs/theming/creating-themes.md)** - Criar temas customizados
+- **[Multi-Tenant](../../docs/theming/multi-tenant.md)** - Sistema multi-tenant
+- **[Migration Guide](../../docs/theming/migration-guide.md)** - Migração v1 → v2
+
+### Exemplos
+- **[Multi-Tenant App](../../examples/multi-tenant/)** - Aplicação demo
+- **[Storybook Setup](../../docs/tools/storybook-setup.md)** - Configuração Storybook
+
+### API Reference
+- **[Components API](../../docs/api/)** - Referência completa de componentes
+- **[Theming API](../../docs/api/theming.md)** - API do sistema de theming
+- **[Types](../../docs/api/types.md)** - Interfaces TypeScript
+
+---
+
+## 🔄 Migração v1.x → v2.0
+
+### Compatibilidade
+- ✅ **100% Backward Compatible**: Código v1.x funciona sem mudanças
+- ✅ **Opt-in Theming**: ThemeProvider é opcional
+- ✅ **Zero Breaking Changes**: Sem quebras de API
+
+### Migração Gradual
+
+```vue
+<!-- v1.x - Continua funcionando -->
+<DatametriaButton variant="primary">Botão</DatametriaButton>
+
+<!-- v2.0 - Com theming (opcional) -->
+<ThemeProvider :theme="meuTema">
+  <DatametriaButton variant="primary">Botão</DatametriaButton>
+</ThemeProvider>
+```
+
+Consulte o **[Migration Guide](../../docs/theming/migration-guide.md)** para instruções detalhadas.
+
+---
+
+## 🛠️ Desenvolvimento
+
+### Scripts
+
+```bash
+# Desenvolvimento
+npm run dev
+
+# Build
+npm run build
+
+# Testes
+npm run test
+npm run test:coverage
+
+# Linting
+npm run lint
+npm run type-check
+```
+
+### Estrutura
+
+```
+src/
+├── components/          # 32 componentes
+├── composables/         # 10 composables
+├── theme/              # Sistema de theming (novo!)
+│   ├── ThemeProvider.vue
+│   ├── useTheme.ts
+│   ├── types.ts
+│   ├── presets/
+│   └── tokens/
+├── types/              # Tipos TypeScript
+└── index.ts            # Exports principais
+```
+
+### Contribuindo
+
+1. Fork o projeto
+2. Crie uma branch para sua feature (`git checkout -b feature/AmazingFeature`)
+3. Commit suas mudanças (`git commit -m 'Add some AmazingFeature'`)
+4. Push para a branch (`git push origin feature/AmazingFeature`)
+5. Abra um Pull Request
+
+---
+
+## 📊 Métricas
+
+### Performance
+- **Bundle Size**: ~45KB (gzipped)
+- **Render Time**: < 100ms
+- **Theme Switch**: < 50ms
+- **Tree Shaking**: Suporte completo
+
+### Qualidade
+- **Componentes**: 32 com theming
+- **Cobertura**: 98.1% testes
+- **TypeScript**: 100% tipado
+- **Acessibilidade**: WCAG 2.1 AA
+
+### Compatibilidade
+- **Vue.js**: 3.3+
+- **Browsers**: Chrome 90+, Firefox 88+, Safari 14+
+- **Node.js**: 18+
+- **TypeScript**: 5.3+
+
+---
+
+## 📞 Suporte
+
+### Canais de Suporte
+
+- **📧 Email**: suporte@datametria.io
+- **💬 Discord**: [discord.gg/kKYGmCC3](https://discord.gg/kKYGmCC3)
+- **🐛 Issues**: [GitHub Issues](https://github.com/datametria/DATAMETRIA-common-libraries/issues)
+- **📖 Docs**: [Documentação Completa](../../docs/)
+
+### Recursos Úteis
+
+- **[Theming Documentation](../../docs/theming/getting-started.md)** - Documentação completa
+- **[Migration Guide](../../docs/theming/migration-guide.md)** - Guia de migração
+- **[Multi-Tenant Example](../../examples/multi-tenant/)** - Exemplo prático
+- **[Storybook Setup](../../docs/tools/storybook-setup.md)** - Configuração Storybook
+
+---
+
+## 📄 Licença
+
+Este projeto está licenciado sob a Licença MIT - veja o arquivo [LICENSE](LICENSE) para detalhes.
+
+### Resumo da Licença
+
+- ✅ **Uso Comercial**: Permitido
+- ✅ **Modificação**: Permitida
+- ✅ **Distribuição**: Permitida
+- ✅ **Uso Privado**: Permitido
+
+---
+
+## 🙏 Agradecimentos
+
+### Equipe DATAMETRIA
+
+- **Vander Loto** - CTO, Arquitetura e Implementação
+- **Marcelo Cunha** - CEO, Visão Estratégica
+- **Dalila Rodrigues** - Tech Lead, Qualidade e Supervisão
+
+### Tecnologias
+
+- **Vue.js Team** - Framework incrível
+- **TypeScript Team** - Type safety excepcional
+- **Amazon Q Developer** - 90% da implementação automatizada
+
+---
+
+<div align="center">
+
+**Desenvolvido com ❤️ pela equipe DATAMETRIA**
+
+⭐ **Se este projeto te ajudou, considere dar uma estrela!** ⭐
+
+</div>