@mlw-packages/react-components 1.3.18 → 1.4.2

package/README.md

@@ -1,53 +1,114 @@
-# @malwee/react-components
-
-Uma biblioteca de componentes React reutilizáveis para acelerar o desenvolvimento de aplicações web com design consistente, acessível e moderno.
-
-## Instalação
-
-```bash
-npm install @malwee/react-components
-# ou
-yarn add @malwee/react-components
-```
-
-## Uso Básico
-
-```tsx
-import { ButtonBase, CardBase } from '@malwee/react-components';
-
-function App() {
-  return (
-    <CardBase>
-      <ButtonBase>Meu botão</ButtonBase>
-    </CardBase>
-  );
-}
-```
-
-## Componentes Disponíveis
-
-- Botões (`ButtonBase`)
-- Cartões (`CardBase`)
-- Inputs, Selects, Combobox, Checkbox, Switch, Tabs, Table, Tooltip, Dialog, Drawer, Sidebar, Avatar, Calendar, Carousel, Progress, Skeleton, Sonner, e outros.
-
-Veja a lista completa na pasta `src/components/ui` ou exemplos em `src/pages`.
-
-## Estilos
-
-Os componentes utilizam Tailwind CSS. Certifique-se de que seu projeto está configurado para usar Tailwind. Importe o CSS global:
-
-```tsx
-import '@malwee/react-components/style/global.css';
-```
-
-## Documentação
-
-Consulte exemplos de uso e documentação dos componentes na pasta `src/pages`.
-
-## Contribuição
-
-Contribuições são bem-vindas! Abra uma issue ou envie um pull request.
-
-## Licença
-
-MIT
+
+# @mlw-packages/react-components
+
+Biblioteca de componentes React reutilizáveis, focada em acelerar o desenvolvimento de aplicações web modernas, acessíveis e com design consistente. Construída com Tailwind CSS para máxima customização, performance e escalabilidade.
+
+---
+
+## Instalação
+
+Instale via npm ou yarn:
+
+```bash
+npm install @mlw-packages/react-components
+# ou
+yarn add @mlw-packages/react-components
+```
+
+---
+
+##  Uso Básico
+
+Importe os componentes que precisa e use direto no JSX:
+
+```tsx
+import { ButtonBase, CardBase } from '@mlw-packages/react-components';
+
+export function App() {
+  return (
+    <CardBase>
+      <ButtonBase>Meu botão</ButtonBase>
+    </CardBase>
+  );
+}
+```
+
+---
+
+## Componentes Disponíveis
+
+A biblioteca oferece uma gama completa de componentes UI prontos para produção, todos estilizados com Tailwind CSS e pensados para alta acessibilidade:
+
+- **ButtonBase** — Botões com variantes e estados customizados.
+- **CardBase** — Containers card com estrutura padrão.
+- **InputBase**, **SelectBase**, **ComboboxBase** — Controles de formulário modernos.
+- **CheckboxBase**, **SwitchBase** — Inputs booleanos.
+- **TabsBase**, **TableBase**, **TooltipBase**, **DialogBase**, **DrawerBase** — Navegação e modais.
+- **SidebarBase**, **AvatarBase**, **CalendarBase**, **CarouselBase**, **ProgressBase**, **SkeletonBase** — Componentes utilitários e visuais.
+- **SonnerBase** — Sistema de notificações toast com feedback visual.
+
+> Para a lista completa, confira a pasta `src/components/ui` no código fonte.
+
+---
+
+## Estilos e Customização
+
+Todos os componentes são estilizados com **Tailwind CSS**. Para que funcionem corretamente, seu projeto deve estar configurado com Tailwind.
+
+Importe o CSS global para aplicar estilos base da biblioteca:
+
+```tsx
+import '@mlw-packages/react-components/style/global.css';
+```
+
+A arquitetura dos componentes segue as melhores práticas:
+
+- **Código limpo e DRY** para facilitar manutenção e evolução.
+- **Alta performance** com React 18 e otimizações internas.
+- **Flexibilidade** para customizar via props, classes e hooks.
+
+---
+
+## Data-testid para Testes Automatizados
+
+Todos os componentes aceitam **props opcionais** para customizar `data-testid` nos elementos internos, garantindo que seu time de QA consiga criar testes e2e robustos e confiáveis.
+
+Exemplo no `ComboboxBase`:
+
+```tsx
+<ComboboxBase
+  items={items}
+  renderSelected={renderSelected}
+  handleSelection={handleSelection}
+  checkIsSelected={checkIsSelected}
+  searchPlaceholder="Busque uma opção"
+  testIds={{
+    root: "combobox-root",
+    trigger: "combobox-trigger",
+    popover: "combobox-popover",
+    option: (value) => `combobox-option-${value}`,
+  }}
+/>
+```
+
+---
+
+## Documentação e Exemplos
+
+Explore exemplos completos e documentação técnica na pasta `src/pages` dentro do repositório, incluindo:
+
+- Uso avançado de componentes.
+- Configurações de tema e responsividade.
+- Exemplos de integração com testes e acessibilidade.
+
+---
+
+## Contribuição
+
+Contribuições são super bem-vindas!
+
+---
+
+## Licença
+
+MIT License — sinta-se livre para usar, modificar e distribuir.

package/dist/index.css

@@ -564,6 +564,10 @@ body {
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
 }
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
 .my-8 {
   margin-top: 2rem;
   margin-bottom: 2rem;
@@ -839,6 +843,9 @@ body {
 .min-h-0 {
   min-height: 0px;
 }
+.min-h-\[220px\] {
+  min-height: 220px;
+}
 .min-h-\[60px\] {
   min-height: 60px;
 }
@@ -950,9 +957,6 @@ body {
 .w-\[300px\] {
   width: 300px;
 }
-.w-\[320px\] {
-  width: 320px;
-}
 .w-\[350px\] {
   width: 350px;
 }
@@ -1027,6 +1031,9 @@ body {
 .max-w-\[--skeleton-width\] {
   max-width: var(--skeleton-width);
 }
+.max-w-\[1100px\] {
+  max-width: 1100px;
+}
 .max-w-\[210px\] {
   max-width: 210px;
 }
@@ -1043,9 +1050,6 @@ body {
   max-width: -moz-max-content;
   max-width: max-content;
 }
-.max-w-md {
-  max-width: 28rem;
-}
 .max-w-sm {
   max-width: 24rem;
 }
@@ -1155,6 +1159,16 @@ body {
   -moz-user-select: none;
   user-select: none;
 }
+.select-text {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  user-select: text;
+}
+.select-all {
+  -webkit-user-select: all;
+  -moz-user-select: all;
+  user-select: all;
+}
 .list-none {
   list-style-type: none;
 }
@@ -1476,6 +1490,14 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
 }
+.border-slate-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
+}
+.border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
+}
 .border-transparent {
   border-color: transparent;
 }
@@ -1560,10 +1582,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
 }
-.bg-neutral-950 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(10 10 10 / var(--tw-bg-opacity, 1));
-}
 .bg-popover {
   background-color: hsl(var(--popover));
 }
@@ -1587,6 +1605,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
 }
+.bg-slate-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
+}
 .bg-transparent {
   background-color: transparent;
 }
@@ -1721,6 +1743,10 @@ body {
   padding-top: 2.5rem;
   padding-bottom: 2.5rem;
 }
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
 .py-16 {
   padding-top: 4rem;
   padding-bottom: 4rem;
@@ -1744,6 +1770,9 @@ body {
 .pb-0 {
   padding-bottom: 0px;
 }
+.pb-1 {
+  padding-bottom: 0.25rem;
+}
 .pb-3 {
   padding-bottom: 0.75rem;
 }
@@ -1932,6 +1961,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(21 128 61 / var(--tw-text-opacity, 1));
 }
+.text-indigo-600 {
+  --tw-text-opacity: 1;
+  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
+}
 .text-muted-foreground {
   color: hsl(var(--muted-foreground));
 }
@@ -1983,6 +2016,18 @@ body {
   --tw-text-opacity: 1;
   color: rgb(100 116 139 / var(--tw-text-opacity, 1));
 }
+.text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
+}
+.text-slate-700 {
+  --tw-text-opacity: 1;
+  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
+}
+.text-slate-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
+}
 .text-slate-900 {
   --tw-text-opacity: 1;
   color: rgb(15 23 42 / var(--tw-text-opacity, 1));
@@ -3529,6 +3574,14 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(17 24 39 / var(--tw-border-opacity, 1));
 }
+.dark\:border-slate-600:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
+}
+.dark\:border-slate-700:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
+}
 .dark\:border-transparent:is(.dark *) {
   border-color: transparent;
 }
@@ -3560,6 +3613,16 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
 }
+.dark\:bg-slate-700:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
+}
+.dark\:bg-slate-900\/30:is(.dark *) {
+  background-color: rgb(15 23 42 / 0.3);
+}
+.dark\:bg-slate-900\/40:is(.dark *) {
+  background-color: rgb(15 23 42 / 0.4);
+}
 .dark\:bg-zinc-500:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(113 113 122 / var(--tw-bg-opacity, 1));
@@ -3583,10 +3646,26 @@ body {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity, 1));
 }
+.dark\:text-indigo-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
+}
 .dark\:text-neutral-300:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(212 212 212 / var(--tw-text-opacity, 1));
 }
+.dark\:text-slate-100:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
+}
+.dark\:text-slate-200:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity, 1));
+}
+.dark\:text-slate-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+}
 .dark\:text-slate-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(148 163 184 / var(--tw-text-opacity, 1));
@@ -3651,6 +3730,9 @@ body {
   .sm\:max-w-sm {
     max-width: 24rem;
   }
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -3681,6 +3763,10 @@ body {
   .sm\:rounded-lg {
     border-radius: var(--radius);
   }
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
   .sm\:text-left {
     text-align: left;
   }
@@ -3799,9 +3885,16 @@ body {
   .lg\:basis-1\/3 {
     flex-basis: 33.333333%;
   }
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   .lg\:grid-cols-\[\.75fr_1fr\] {
     grid-template-columns: .75fr 1fr;
   }
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
 }
 .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
   -webkit-appearance: none;