eai-frontend-components 2.0.23 → 2.0.24

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 EAI Team
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2025 EAI Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,299 +1,299 @@
-# 🎨 EAI Design System Components
-
-Biblioteca de componentes UI reutilizáveis baseada em shadcn/ui e Radix UI para projetos EAI.
-
-[![NPM Version](https://img.shields.io/npm/v/eai-frontend-components.svg)](https://www.npmjs.com/package/eai-frontend-components)
-[![NPM Downloads](https://img.shields.io/npm/dm/eai-frontend-components.svg)](https://www.npmjs.com/package/eai-frontend-components)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/eai-frontend-components.svg)](https://bundlephobia.com/package/eai-frontend-components)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
-[![License](https://img.shields.io/npm/l/eai-frontend-components.svg)](./LICENSE)
-[![Bitbucket Pipelines](https://img.shields.io/bitbucket/pipelines/genei_ryodan/erp_frontend_eai_ds.svg)](https://bitbucket.org/genei_ryodan/erp_frontend_eai_ds/addon/pipelines/home)
-
-## 📦 Instalação
-
-```bash
-# NPM
-npm install eai-frontend-components
-
-# Yarn
-yarn add eai-frontend-components
-
-# PNPM
-pnpm add eai-frontend-components
-```
-
-## 🌟 Por que usar eai-frontend-components?
-
-- ⚡ **Performático**: Tree-shaking otimizado, apenas importe o que usar
-- 🎨 **Personalizável**: Baseado em Tailwind CSS com tokens de design
-- ♿ **Acessível**: Construído com Radix UI primitives (WCAG 2.1)
-- 🔧 **TypeScript**: Totalmente tipado para melhor DX
-- 🌙 **Dark Mode**: Suporte nativo a múltiplos temas
-- 📱 **Responsivo**: Mobile-first e totalmente adaptativo
-- 🚀 **Moderno**: React 18+, ESM, e as melhores práticas
-
-## 🚀 Release Automático
-
-Este projeto usa **Semantic Release** para publicação automática no NPM:
-
-- `feat:` → Nova funcionalidade (versão minor)
-- `fix:` → Correção de bug (versão patch)  
-- `feat!:` → Breaking change (versão major)
-
-**Exemplo:**
-```bash
-git commit -m "feat: adicionar componente DatePicker"
-git push origin master
-# → Versão 2.0.4 vira 2.1.0 automaticamente! 🎉
-```
-
-## 📚 Documentação Adicional
-
-- 📖 **[Guia de Publicação](./PUBLISHING.md)** - Como funciona o release automático
-- 📝 **[Conventional Commits](./CONVENTIONAL_COMMITS.md)** - Padrão de commits obrigatório
-
-## 🚀 Características
-
-- ⚡ **Performance**: Componentes otimizados com Tree-shaking
-- 🎨 **Customizável**: Sistema de design tokens com Tailwind CSS
-- ♿ **Acessível**: Construído com Radix UI primitives
-- 🔧 **TypeScript**: Totalmente tipado
-- 📦 **Modular**: Importe apenas o que você precisa
-- 🌙 **Dark Mode**: Suporte nativo a temas
-
-## 📦 Instalação
-
-```bash
-npm install eai-frontend-components
-# ou
-yarn add eai-frontend-components
-```
-
-## 🛠️ Configuração
-
-### 1. Adicione os estilos CSS
-
-Importe os estilos globais no seu projeto:
-
-```tsx
-// src/main.tsx ou src/App.tsx
-import 'eai-frontend-components/dist/styles.css';
-```
-
-### 2. Configure o Tailwind CSS
-
-Adicione o conteúdo da biblioteca no seu `tailwind.config.js`:
-
-```js
-module.exports = {
-  content: [
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./node_modules/eai-frontend-components/dist/**/*.{js,ts,jsx,tsx}",
-  ],
-  // ... resto da configuração
-}
-```
-
-### 3. Configure as variáveis CSS
-
-Adicione as variáveis de tema no seu CSS:
-
-```css
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  /* ... outras variáveis */
-}
-```
-
-## 🎯 Uso Básico
-
-```tsx
-import { Button, Card, Input } from 'eai-frontend-components';
-
-function App() {
-  return (
-    <Card className="p-6">
-      <Input placeholder="Digite algo..." />
-      <Button onClick={() => alert('Clicou!')}>
-        Clique aqui
-      </Button>
-    </Card>
-  );
-}
-```
-
-## 📚 Componentes Disponíveis
-
-### Layouts
-- `Card` - Cartões com header, content e footer
-- `Sheet` - Painel lateral deslizante
-- `Dialog` - Modais e dialogs
-- `Accordion` - Conteúdo expansível
-
-### Formulários
-- `Button` - Botões com múltiplas variantes
-- `Input` - Campos de texto
-- `Select` - Seletor dropdown
-- `Checkbox` - Caixas de seleção
-- `RadioGroup` - Grupos de radio buttons
-- `Textarea` - Área de texto
-- `Switch` - Interruptores
-- `Slider` - Controles deslizantes
-
-### Navegação
-- `Tabs` - Abas navegáveis
-- `Breadcrumb` - Navegação hierárquica
-- `Pagination` - Paginação de dados
-- `Command` - Paleta de comandos
-
-### Feedback
-- `Alert` - Alertas e notificações
-- `Toast` - Notificações temporárias
-- `Progress` - Barras de progresso
-- `Badge` - Etiquetas e tags
-- `Skeleton` - Loading states
-
-### Exibição de Dados
-- `Table` - Tabelas estruturadas
-- `Avatar` - Imagens de perfil
-- `Calendar` - Seletor de datas
-- `Tooltip` - Dicas contextuais
-
-## 🎨 Customização
-
-### Variantes de Componentes
-
-```tsx
-<Button variant="default">Padrão</Button>
-<Button variant="outline">Contorno</Button>
-<Button variant="ghost">Fantasma</Button>
-<Button variant="destructive">Destrutivo</Button>
-```
-
-### Tamanhos
-
-```tsx
-<Button size="sm">Pequeno</Button>
-<Button size="default">Padrão</Button>
-<Button size="lg">Grande</Button>
-```
-
-### Classes Customizadas
-
-```tsx
-<Button className="bg-purple-600 hover:bg-purple-700">
-  Customizado
-</Button>
-```
-
-## 🌙 Dark Mode
-
-Configure o dark mode adicionando a classe `dark` ao elemento raiz:
-
-```tsx
-// Exemplo com context
-const [theme, setTheme] = useState('light');
-
-return (
-  <div className={theme === 'dark' ? 'dark' : ''}>
-    <App />
-  </div>
-);
-```
-
-## 📖 Storybook
-
-Execute o Storybook para visualizar todos os componentes:
-
-```bash
-yarn dev
-```
-
-## 🔧 Desenvolvimento
-
-```bash
-# Instale as dependências
-yarn install
-
-# Desenvolvimento com watch
-yarn build:watch
-
-# Build de produção
-yarn build
-
-# Lint
-yarn lint
-```
-
-## 📝 Exemplos
-
-### Formulário Completo
-
-```tsx
-import { 
-  Card, 
-  CardContent, 
-  CardHeader, 
-  CardTitle,
-  Button,
-  Input,
-  Label,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue
-} from 'eai-frontend-components';
-
-function ContactForm() {
-  return (
-    <Card className="w-96">
-      <CardHeader>
-        <CardTitle>Contato</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div>
-          <Label htmlFor="name">Nome</Label>
-          <Input id="name" placeholder="Seu nome" />
-        </div>
-        
-        <div>
-          <Label htmlFor="type">Tipo</Label>
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Selecione..." />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="comercial">Comercial</SelectItem>
-              <SelectItem value="suporte">Suporte</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        
-        <Button className="w-full">Enviar</Button>
-      </CardContent>
-    </Card>
-  );
-}
-```
-
-## 🤝 Contribuição
-
-1. Faça o fork do projeto
-2. Crie uma branch para sua feature (`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
-
-## 📄 Licença
-
-MIT © EAI Team
-
-## 🔗 Links
-
-- [Documentação Radix UI](https://www.radix-ui.com/)
-- [Tailwind CSS](https://tailwindcss.com/)
+# 🎨 EAI Design System Components
+
+Biblioteca de componentes UI reutilizáveis baseada em shadcn/ui e Radix UI para projetos EAI.
+
+[![NPM Version](https://img.shields.io/npm/v/eai-frontend-components.svg)](https://www.npmjs.com/package/eai-frontend-components)
+[![NPM Downloads](https://img.shields.io/npm/dm/eai-frontend-components.svg)](https://www.npmjs.com/package/eai-frontend-components)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/eai-frontend-components.svg)](https://bundlephobia.com/package/eai-frontend-components)
+[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+[![License](https://img.shields.io/npm/l/eai-frontend-components.svg)](./LICENSE)
+[![Bitbucket Pipelines](https://img.shields.io/bitbucket/pipelines/genei_ryodan/erp_frontend_eai_ds.svg)](https://bitbucket.org/genei_ryodan/erp_frontend_eai_ds/addon/pipelines/home)
+
+## 📦 Instalação
+
+```bash
+# NPM
+npm install eai-frontend-components
+
+# Yarn
+yarn add eai-frontend-components
+
+# PNPM
+pnpm add eai-frontend-components
+```
+
+## 🌟 Por que usar eai-frontend-components?
+
+- ⚡ **Performático**: Tree-shaking otimizado, apenas importe o que usar
+- 🎨 **Personalizável**: Baseado em Tailwind CSS com tokens de design
+- ♿ **Acessível**: Construído com Radix UI primitives (WCAG 2.1)
+- 🔧 **TypeScript**: Totalmente tipado para melhor DX
+- 🌙 **Dark Mode**: Suporte nativo a múltiplos temas
+- 📱 **Responsivo**: Mobile-first e totalmente adaptativo
+- 🚀 **Moderno**: React 18+, ESM, e as melhores práticas
+
+## 🚀 Release Automático
+
+Este projeto usa **Semantic Release** para publicação automática no NPM:
+
+- `feat:` → Nova funcionalidade (versão minor)
+- `fix:` → Correção de bug (versão patch)  
+- `feat!:` → Breaking change (versão major)
+
+**Exemplo:**
+```bash
+git commit -m "feat: adicionar componente DatePicker"
+git push origin master
+# → Versão 2.0.4 vira 2.1.0 automaticamente! 🎉
+```
+
+## 📚 Documentação Adicional
+
+- 📖 **[Guia de Publicação](./PUBLISHING.md)** - Como funciona o release automático
+- 📝 **[Conventional Commits](./CONVENTIONAL_COMMITS.md)** - Padrão de commits obrigatório
+
+## 🚀 Características
+
+- ⚡ **Performance**: Componentes otimizados com Tree-shaking
+- 🎨 **Customizável**: Sistema de design tokens com Tailwind CSS
+- ♿ **Acessível**: Construído com Radix UI primitives
+- 🔧 **TypeScript**: Totalmente tipado
+- 📦 **Modular**: Importe apenas o que você precisa
+- 🌙 **Dark Mode**: Suporte nativo a temas
+
+## 📦 Instalação
+
+```bash
+npm install eai-frontend-components
+# ou
+yarn add eai-frontend-components
+```
+
+## 🛠️ Configuração
+
+### 1. Adicione os estilos CSS
+
+Importe os estilos globais no seu projeto:
+
+```tsx
+// src/main.tsx ou src/App.tsx
+import 'eai-frontend-components/dist/styles.css';
+```
+
+### 2. Configure o Tailwind CSS
+
+Adicione o conteúdo da biblioteca no seu `tailwind.config.js`:
+
+```js
+module.exports = {
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/eai-frontend-components/dist/**/*.{js,ts,jsx,tsx}",
+  ],
+  // ... resto da configuração
+}
+```
+
+### 3. Configure as variáveis CSS
+
+Adicione as variáveis de tema no seu CSS:
+
+```css
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 222.2 47.4% 11.2%;
+  --primary-foreground: 210 40% 98%;
+  /* ... outras variáveis */
+}
+```
+
+## 🎯 Uso Básico
+
+```tsx
+import { Button, Card, Input } from 'eai-frontend-components';
+
+function App() {
+  return (
+    <Card className="p-6">
+      <Input placeholder="Digite algo..." />
+      <Button onClick={() => alert('Clicou!')}>
+        Clique aqui
+      </Button>
+    </Card>
+  );
+}
+```
+
+## 📚 Componentes Disponíveis
+
+### Layouts
+- `Card` - Cartões com header, content e footer
+- `Sheet` - Painel lateral deslizante
+- `Dialog` - Modais e dialogs
+- `Accordion` - Conteúdo expansível
+
+### Formulários
+- `Button` - Botões com múltiplas variantes
+- `Input` - Campos de texto
+- `Select` - Seletor dropdown
+- `Checkbox` - Caixas de seleção
+- `RadioGroup` - Grupos de radio buttons
+- `Textarea` - Área de texto
+- `Switch` - Interruptores
+- `Slider` - Controles deslizantes
+
+### Navegação
+- `Tabs` - Abas navegáveis
+- `Breadcrumb` - Navegação hierárquica
+- `Pagination` - Paginação de dados
+- `Command` - Paleta de comandos
+
+### Feedback
+- `Alert` - Alertas e notificações
+- `Toast` - Notificações temporárias
+- `Progress` - Barras de progresso
+- `Badge` - Etiquetas e tags
+- `Skeleton` - Loading states
+
+### Exibição de Dados
+- `Table` - Tabelas estruturadas
+- `Avatar` - Imagens de perfil
+- `Calendar` - Seletor de datas
+- `Tooltip` - Dicas contextuais
+
+## 🎨 Customização
+
+### Variantes de Componentes
+
+```tsx
+<Button variant="default">Padrão</Button>
+<Button variant="outline">Contorno</Button>
+<Button variant="ghost">Fantasma</Button>
+<Button variant="destructive">Destrutivo</Button>
+```
+
+### Tamanhos
+
+```tsx
+<Button size="sm">Pequeno</Button>
+<Button size="default">Padrão</Button>
+<Button size="lg">Grande</Button>
+```
+
+### Classes Customizadas
+
+```tsx
+<Button className="bg-purple-600 hover:bg-purple-700">
+  Customizado
+</Button>
+```
+
+## 🌙 Dark Mode
+
+Configure o dark mode adicionando a classe `dark` ao elemento raiz:
+
+```tsx
+// Exemplo com context
+const [theme, setTheme] = useState('light');
+
+return (
+  <div className={theme === 'dark' ? 'dark' : ''}>
+    <App />
+  </div>
+);
+```
+
+## 📖 Storybook
+
+Execute o Storybook para visualizar todos os componentes:
+
+```bash
+yarn dev
+```
+
+## 🔧 Desenvolvimento
+
+```bash
+# Instale as dependências
+yarn install
+
+# Desenvolvimento com watch
+yarn build:watch
+
+# Build de produção
+yarn build
+
+# Lint
+yarn lint
+```
+
+## 📝 Exemplos
+
+### Formulário Completo
+
+```tsx
+import { 
+  Card, 
+  CardContent, 
+  CardHeader, 
+  CardTitle,
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from 'eai-frontend-components';
+
+function ContactForm() {
+  return (
+    <Card className="w-96">
+      <CardHeader>
+        <CardTitle>Contato</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div>
+          <Label htmlFor="name">Nome</Label>
+          <Input id="name" placeholder="Seu nome" />
+        </div>
+        
+        <div>
+          <Label htmlFor="type">Tipo</Label>
+          <Select>
+            <SelectTrigger>
+              <SelectValue placeholder="Selecione..." />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="comercial">Comercial</SelectItem>
+              <SelectItem value="suporte">Suporte</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        
+        <Button className="w-full">Enviar</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## 🤝 Contribuição
+
+1. Faça o fork do projeto
+2. Crie uma branch para sua feature (`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
+
+## 📄 Licença
+
+MIT © EAI Team
+
+## 🔗 Links
+
+- [Documentação Radix UI](https://www.radix-ui.com/)
+- [Tailwind CSS](https://tailwindcss.com/)
 - [shadcn/ui](https://ui.shadcn.com/)