@pipelinesolucoes/menu 1.0.0-beta.0 → 1.0.0

package/LICENSE

@@ -1,78 +1,78 @@
-LICENÇA COMERCIAL – PIPELINE SOLUÇÕES
-
-Copyright (c) Pipeline Soluções
-
-Este software é de propriedade da Pipeline Soluções e é disponibilizado
-publicamente para instalação e avaliação. O uso comercial está sujeito
-a licenciamento conforme os termos abaixo.
-
-────────────────────────────────────────────────────────────
-
-1. CONCESSÃO DE LICENÇA
-
-A Pipeline Soluções concede ao Licenciado uma licença não exclusiva,
-intransferível e revogável para utilizar este software em 1 (um)
-projeto comercial, mediante aquisição de licença válida.
-
-Projeto é definido como uma única aplicação em produção, incluindo
-seus ambientes de desenvolvimento, homologação e staging.
-
-────────────────────────────────────────────────────────────
-
-2. USO PERMITIDO
-
-É permitido:
-- Instalar e avaliar o software livremente.
-- Utilizar o software em projetos comerciais mediante licença válida.
-- Modificar o código para uso interno no projeto licenciado.
-
-────────────────────────────────────────────────────────────
-
-3. USO PROIBIDO
-
-É expressamente proibido:
-- Utilizar o software em projetos comerciais sem licença válida.
-- Redistribuir, sublicenciar, vender ou alugar este software,
-  integralmente ou em partes.
-- Publicar o software como parte de outra biblioteca, framework
-  ou produto concorrente.
-- Remover ou alterar avisos de copyright ou licenciamento.
-
-────────────────────────────────────────────────────────────
-
-4. SUPORTE E ATUALIZAÇÕES
-
-A aquisição da licença pode incluir suporte básico e atualizações,
-conforme acordado no momento da compra. A Pipeline Soluções não é
-obrigada a fornecer suporte gratuito.
-
-────────────────────────────────────────────────────────────
-
-5. GARANTIAS E RESPONSABILIDADE
-
-Este software é fornecido "NO ESTADO EM QUE SE ENCONTRA",
-sem garantias de qualquer tipo, expressas ou implícitas.
-Em nenhuma hipótese a Pipeline Soluções será responsabilizada
-por danos diretos ou indiretos decorrentes do uso do software.
-
-────────────────────────────────────────────────────────────
-
-6. RESCISÃO
-
-Esta licença será automaticamente rescindida em caso de violação
-de qualquer um dos termos aqui estabelecidos. Em caso de rescisão,
-o uso do software deverá ser interrompido imediatamente.
-
-────────────────────────────────────────────────────────────
-
-7. CONTATO
-
-Para aquisição de licença comercial ou esclarecimento de dúvidas:
-
-E-mail: contato@pipelinesolucoes.com.br  
-Site: https://www.pipelinesolucoes.com.br
-
-────────────────────────────────────────────────────────────
-
-Ao utilizar este software em um projeto comercial, você declara ter
-lido, compreendido e concordado com os termos desta licença.
+LICENÇA COMERCIAL – PIPELINE SOLUÇÕES
+
+Copyright (c) Pipeline Soluções
+
+Este software é de propriedade da Pipeline Soluções e é disponibilizado
+publicamente para instalação e avaliação. O uso comercial está sujeito
+a licenciamento conforme os termos abaixo.
+
+────────────────────────────────────────────────────────────
+
+1. CONCESSÃO DE LICENÇA
+
+A Pipeline Soluções concede ao Licenciado uma licença não exclusiva,
+intransferível e revogável para utilizar este software em 1 (um)
+projeto comercial, mediante aquisição de licença válida.
+
+Projeto é definido como uma única aplicação em produção, incluindo
+seus ambientes de desenvolvimento, homologação e staging.
+
+────────────────────────────────────────────────────────────
+
+2. USO PERMITIDO
+
+É permitido:
+- Instalar e avaliar o software livremente.
+- Utilizar o software em projetos comerciais mediante licença válida.
+- Modificar o código para uso interno no projeto licenciado.
+
+────────────────────────────────────────────────────────────
+
+3. USO PROIBIDO
+
+É expressamente proibido:
+- Utilizar o software em projetos comerciais sem licença válida.
+- Redistribuir, sublicenciar, vender ou alugar este software,
+  integralmente ou em partes.
+- Publicar o software como parte de outra biblioteca, framework
+  ou produto concorrente.
+- Remover ou alterar avisos de copyright ou licenciamento.
+
+────────────────────────────────────────────────────────────
+
+4. SUPORTE E ATUALIZAÇÕES
+
+A aquisição da licença pode incluir suporte básico e atualizações,
+conforme acordado no momento da compra. A Pipeline Soluções não é
+obrigada a fornecer suporte gratuito.
+
+────────────────────────────────────────────────────────────
+
+5. GARANTIAS E RESPONSABILIDADE
+
+Este software é fornecido "NO ESTADO EM QUE SE ENCONTRA",
+sem garantias de qualquer tipo, expressas ou implícitas.
+Em nenhuma hipótese a Pipeline Soluções será responsabilizada
+por danos diretos ou indiretos decorrentes do uso do software.
+
+────────────────────────────────────────────────────────────
+
+6. RESCISÃO
+
+Esta licença será automaticamente rescindida em caso de violação
+de qualquer um dos termos aqui estabelecidos. Em caso de rescisão,
+o uso do software deverá ser interrompido imediatamente.
+
+────────────────────────────────────────────────────────────
+
+7. CONTATO
+
+Para aquisição de licença comercial ou esclarecimento de dúvidas:
+
+E-mail: contato@pipelinesolucoes.com.br  
+Site: https://www.pipelinesolucoes.com.br
+
+────────────────────────────────────────────────────────────
+
+Ao utilizar este software em um projeto comercial, você declara ter
+lido, compreendido e concordado com os termos desta licença.

package/README.md

@@ -1,166 +1,176 @@
-# @pipelinesolucoes/menu
-
-Biblioteca de **componentes de menu para React**, desenvolvida para **padronização visual**, **reutilização** e **escalabilidade** em aplicações modernas e design systems.
-
-Este pacote faz parte do ecossistema de componentes da **Pipeline Soluções**.
-
----
-
-## 📦 Componentes disponíveis
-
-A biblioteca inclui os seguintes componentes:
-
-- **TermsAndPrivacyBar**  
-  
-
-- **TermsAndPrivacyCard**  
-  Componente que renderiza um card flutuante (fixed) para consentimento de cookies, exibindo links para **Termos de Uso** e **Política de Privacidade** e dois botões:
-  **Cancelar** (define cookieConsent como "false") e **Ok** (define cookieConsent como "true").
-
----
-
-## ✨ Características
-
-- ✅ Pronto para produção
-- 🎨 Integração com Material UI
-- ♿ Foco em acessibilidade
-- 🧩 Ideal para design systems
-- 🔄 Reutilizável em múltiplos projetos
-- 📦 Publicado no npm com versionamento semântico
-- 🔐 Preparado para licenciamento por projeto
-
----
-
-## 📥 Instalação
-
-```bash
-npm install @pipelinesolucoes/menu 
-ou
-yarn add @pipelinesolucoes/menu
-
-```
-
-## 🚀 Uso básico
-
-```
-import { Actionmenu } from "@pipelinesolucoes/menu";
-
-export function Example() {
-  return (
-    <Actionmenu variant="contained" color="primary">
-      Ação
-    </Actionmenu>
-  );
-}
-```
-
-## 🧩 Uso em Design Systems
-
-Este pacote foi projetado para:
-
- - padronização de ações e navegação
- - reutilização entre projetos
- - evolução incremental de UI
- - integração com temas e tokens de design
-
-Pode ser utilizado de forma isolada ou como parte de um design system maior.
-
----
-
-## 🔐 Licença de uso comercial
-
-Este pacote é publicamente acessível no npm, porém:
-
-O uso comercial é licenciado por projeto.
-
-**O que isso significa?**
-
-O pacote pode ser instalado e avaliado livremente.
-
-Para uso em projetos comerciais, é necessária a aquisição de uma licença válida por projeto.
-
-**Definição de projeto**
-
-Projeto = 1 aplicação em produção
-(ex.: site institucional, sistema interno ou aplicação SaaS).
-Ambientes de desenvolvimento, staging e homologação estão incluídos no mesmo projeto.
-
----
-
-## 📄 O que a licença inclui
-
-✔ Uso em 1 projeto
-✔ Atualizações enquanto a licença estiver ativa
-✔ Correções de bugs
-✔ Suporte básico
-✔ Evolução contínua do pacote
-
----
-
-## ⚙️ Configuração de licença (mock)
-
-Após adquirir a licença, você receberá um Project ID e uma License Key.
-
-No projeto, configure as variáveis de ambiente:
-
-PIPESOL_PROJECT_ID=meu-projeto
-PIPESOL_menu_LICENSE_KEY=SUA-LICENSE-KEY-AQUI
-
-
-Atualmente, a validação é local e não bloqueante, servindo como preparação para automação futura.
-
----
-
-## 🔁 Versionamento
-
-Este projeto segue Semantic Versioning (SemVer):
-
-1.0.1 – Correção de bugs
-
-1.1.0 – Nova funcionalidade compatível
-
-2.0.0 – Mudança incompatível
-
-1.0.0-beta.x – Versões beta
-
-Para listar as versões publicadas:
-
-```
-npm view @pipelinesolucoes/menu versions --json
-```
-
-## 🚀 Processo de publicação
-
-Este pacote é publicado exclusivamente via CI/CD utilizando GitHub Actions.
-
-Características do processo:
-
- - Publicação apenas por tags Git (vX.Y.Z)
- - Autenticação via Trusted Publishing (OIDC)
- - Nenhum token npm armazenado
- - Tokens clássicos desabilitados
- - Autenticação em dois fatores (2FA) obrigatória
- - Publicações seguras, rastreáveis e reprodutíveis
-
- ---
-
- ## 📬 Aquisição de licença e contato
-
-Para adquirir uma licença comercial ou obter mais informações:
-
-📧 contato@pipelinesolucoes.com.br
-🌐 https://www.pipelinesolucoes.com.br
-
---- 
-
-## 📄 Licença
-
-Copyright © Pipeline Soluções
-Este software está sujeito a licença comercial por projeto.
-Consulte o arquivo LICENSE para mais informações.
-
-```
-Se você quiser, eu também posso gerar agora o **arquivo `LICENSE`** (texto curto e claro) no mesmo padrão profissional pra você copiar e colar como `LICENSE` no repo.
-```
-
-
+# @pipelinesolucoes/menu
+
+Biblioteca de **componentes de menu para React**, desenvolvida para **padronização visual**, **reutilização** e **escalabilidade** em aplicações modernas e design systems.
+
+Este pacote faz parte do ecossistema de componentes da **Pipeline Soluções**.
+
+---
+
+## 📦 Componentes disponíveis
+
+A biblioteca inclui os seguintes componentes:
+
+- **BarraFerramentas** 
+  Componente que renderiza uma barra de ferramentas (Toolbar) do Material UI com layout em grid
+  dividido em três áreas: esquerda, meio e direita. Cada área é renderizada via funções
+  `renderLeft`, `renderMiddle` e `renderRigth`.
+
+- **ItemMenu** 
+  Componente de item de menu baseado em `<a>` estilizado via Material UI `styled`.
+  Renderiza um link com aparência de **botão** ou **link**, aplicando estilos de fundo, texto, borda e hover, além de suportar comportamento de **scroll suave** para âncoras.
+
+- **MenuHamburguer** 
+  Componente de menu hamburguer responsivo que exibe um `IconButton` e, ao clicar, abre um `Menu` do Material UI contendo itens configuráveis via `listaItemMenu`. 
+
+- **MenuHorizontal**
+  Componente de menu horizontal que renderiza uma lista de itens de menu lado a lado utilizando `flexbox`.
+
+- **MenuVertical**
+  Componente de menu vertical que renderiza uma lista de itens de menu empilhados em coluna utilizando `flexbox`.
+
+- **SideNav**
+
+- **DrawerResponsive**
+  DrawerResponsive é um layout de navegação responsivo que:
+  - Em telas pequenas (xs/sm) usa o `MobileMiniDrawerLayout` (header + bottom navigation);
+  - Em telas médias ou maiores (md+) usa o `DesktopMiniDrawerLayout` (AppBar + Drawer). 
+
+---
+
+## ✨ Características
+
+- ✅ Pronto para produção
+- 🎨 Integração com Material UI
+- ♿ Foco em acessibilidade
+- 🧩 Ideal para design systems
+- 🔄 Reutilizável em múltiplos projetos
+- 📦 Publicado no npm com versionamento semântico
+- 🔐 Preparado para licenciamento por projeto
+
+---
+
+## 📥 Instalação
+
+```bash
+npm install @pipelinesolucoes/menu 
+ou
+yarn add @pipelinesolucoes/menu
+
+```
+
+## 🚀 Uso básico
+
+```
+
+```
+
+## 🧩 Uso em Design Systems
+
+Este pacote foi projetado para:
+
+ - padronização de ações e navegação
+ - reutilização entre projetos
+ - evolução incremental de UI
+ - integração com temas e tokens de design
+
+Pode ser utilizado de forma isolada ou como parte de um design system maior.
+
+---
+
+## 🔐 Licença de uso comercial
+
+Este pacote é publicamente acessível no npm, porém:
+
+O uso comercial é licenciado por projeto.
+
+**O que isso significa?**
+
+O pacote pode ser instalado e avaliado livremente.
+
+Para uso em projetos comerciais, é necessária a aquisição de uma licença válida por projeto.
+
+**Definição de projeto**
+
+Projeto = 1 aplicação em produção
+(ex.: site institucional, sistema interno ou aplicação SaaS).
+Ambientes de desenvolvimento, staging e homologação estão incluídos no mesmo projeto.
+
+---
+
+## 📄 O que a licença inclui
+
+✔ Uso em 1 projeto
+✔ Atualizações enquanto a licença estiver ativa
+✔ Correções de bugs
+✔ Suporte básico
+✔ Evolução contínua do pacote
+
+---
+
+## ⚙️ Configuração de licença (mock)
+
+Após adquirir a licença, você receberá um Project ID e uma License Key.
+
+No projeto, configure as variáveis de ambiente:
+
+PIPESOL_PROJECT_ID=meu-projeto
+PIPESOL_menu_LICENSE_KEY=SUA-LICENSE-KEY-AQUI
+
+
+Atualmente, a validação é local e não bloqueante, servindo como preparação para automação futura.
+
+---
+
+## 🔁 Versionamento
+
+Este projeto segue Semantic Versioning (SemVer):
+
+1.0.1 – Correção de bugs
+
+1.1.0 – Nova funcionalidade compatível
+
+2.0.0 – Mudança incompatível
+
+1.0.0-beta.x – Versões beta
+
+Para listar as versões publicadas:
+
+```
+npm view @pipelinesolucoes/menu versions --json
+```
+
+## 🚀 Processo de publicação
+
+Este pacote é publicado exclusivamente via CI/CD utilizando GitHub Actions.
+
+Características do processo:
+
+ - Publicação apenas por tags Git (vX.Y.Z)
+ - Autenticação via Trusted Publishing (OIDC)
+ - Nenhum token npm armazenado
+ - Tokens clássicos desabilitados
+ - Autenticação em dois fatores (2FA) obrigatória
+ - Publicações seguras, rastreáveis e reprodutíveis
+
+ ---
+
+ ## 📬 Aquisição de licença e contato
+
+Para adquirir uma licença comercial ou obter mais informações:
+
+📧 contato@pipelinesolucoes.com.br
+🌐 https://www.pipelinesolucoes.com.br
+
+--- 
+
+## 📄 Licença
+
+Copyright © Pipeline Soluções
+Este software está sujeito a licença comercial por projeto.
+Consulte o arquivo LICENSE para mais informações.
+
+```
+Se você quiser, eu também posso gerar agora o **arquivo `LICENSE`** (texto curto e claro) no mesmo padrão profissional pra você copiar e colar como `LICENSE` no repo.
+```
+
+

package/dist/components/BarraFerramentas.d.ts

@@ -1,13 +1,42 @@
 import * as React from 'react';
-import { ItemMenuConfig } from '@/types/ItemMenuConfig';
-interface BarraFerramentasProps {
-    listaItemMenu: ItemMenuConfig[];
-    background_color?: string;
-    color: string;
-    color_hover: string;
-    text_decoration: 'none' | 'underline';
-    renderLogo: () => React.ReactElement;
-    renderSocialMedia: () => React.ReactElement;
+import { ColorProps } from '../types/style/ColorProps';
+import { LayoutProps } from '../types/style/LayoutProps';
+interface BarraFerramentasProps extends ColorProps, LayoutProps {
+    background?: string;
+    maxWidth?: string;
+    renderLeft: () => React.ReactElement;
+    renderMiddle: () => React.ReactElement;
+    renderRigth: () => React.ReactElement;
 }
+/**
+ * Componente que renderiza uma barra de ferramentas (Toolbar) do Material UI com layout em grid
+ * dividido em três áreas: esquerda, meio e direita. Cada área é renderizada via funções
+ * `renderLeft`, `renderMiddle` e `renderRigth`.
+ *
+ * @param {() => React.ReactElement} renderLeft Função que retorna o conteúdo a ser renderizado na área esquerda. Obrigatório.
+ * @param {() => React.ReactElement} renderMiddle Função que retorna o conteúdo a ser renderizado na área central. Obrigatório.
+ * @param {() => React.ReactElement} renderRigth Função que retorna o conteúdo a ser renderizado na área direita. Obrigatório.
+ * @param {string} [maxWidth='1200px'] Largura máxima do container interno (Toolbar). Controla o `max-width` do conteúdo.
+ * @param {string} [background='transparent'] Cor de fundo do container externo da barra.
+ *
+ * @example
+ * ```tsx
+ * import * as React from 'react';
+ * import { BarraFerramentas } from '@/components/BarraFerramentas';
+ * import { Typography, Button } from '@mui/material';
+ *
+ * const Example = () => {
+ *   return (
+ *     <BarraFerramentas
+ *       background="#ffffff"
+ *       maxWidth="1280px"
+ *       renderLeft={() => <Typography variant="h6">Logo</Typography>}
+ *       renderMiddle={() => <Typography variant="body1">Título</Typography>}
+ *       renderRigth={() => <Button variant="contained">Ação</Button>}
+ *     />
+ *   );
+ * };
+ * ```
+ */
 declare const BarraFerramentas: React.FC<BarraFerramentasProps>;
 export default BarraFerramentas;

package/dist/components/BarraFerramentas.js

@@ -1,31 +1,67 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Bar, ContainerRedeSocialHorizontal, CustomToolbar, SpanBody1 } from './BarraFerramentasStyled';
-import { styled } from '@mui/material';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { styled, Toolbar } from '@mui/material';
 const DivStyled = styled('div')({
-    display: 'flex',
-    flex: '1',
-});
-const ContainerMenuHorizontal = styled('div')({
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
+    display: 'grid',
+    gridTemplateColumns: 'auto 1fr auto',
     alignItems: 'center',
-    flexGrow: 1,
-    gap: '16px',
+    width: '100%',
+    heigth: '100%',
 });
-const BarraFerramentas = ({ listaItemMenu, renderLogo, renderSocialMedia, background_color, color, color_hover, text_decoration }) => {
-    const background_color_bar = background_color || 'transparent';
-    const [buttons, setButtons] = React.useState(null);
-    React.useEffect(() => {
-        const borderColor = (text_decoration === 'none') ? 'transparent' : color;
-        if (listaItemMenu) {
-            const constructedButtons = listaItemMenu.map((item) => (item.component));
-            setButtons(constructedButtons);
-        }
-    }, [listaItemMenu, color, color_hover, text_decoration]);
-    return (_jsx(Bar, { background_color: background_color_bar, id: "barraferramentas", children: _jsxs(CustomToolbar, { disableGutters: true, children: [renderLogo(), _jsxs(DivStyled, { children: [_jsx(ContainerMenuHorizontal, { children: _jsx("nav", { children: buttons ? buttons : _jsx(SpanBody1, { text_color: color, children: "carregando..." }) }) }), _jsx(ContainerRedeSocialHorizontal, { children: renderSocialMedia() })] })] }) }));
+const CustomToolbar = styled(Toolbar, {
+    shouldForwardProp: (prop) => !['maxWidth', 'padding'].includes(prop),
+})(({ maxWidth = '1200px', padding = '0' }) => ({
+    margin: '0',
+    padding: padding,
+    width: '100%',
+    maxWidth: maxWidth,
+}));
+const Bar = styled('div', {
+    shouldForwardProp: (prop) => !['background_color'].includes(prop),
+})(({ background_color }) => ({
+    display: 'flex',
+    flexDirection: 'column', // Layout flex vertical
+    alignItems: 'center', // Centraliza horizontalmente
+    justifyContent: 'center', // Centraliza verticalmente
+    backgroundColor: background_color, // Define a cor de fundo
+    width: '100%', // Largura total
+    boxSizing: 'border-box',
+    position: 'relative',
+}));
+/**
+ * Componente que renderiza uma barra de ferramentas (Toolbar) do Material UI com layout em grid
+ * dividido em três áreas: esquerda, meio e direita. Cada área é renderizada via funções
+ * `renderLeft`, `renderMiddle` e `renderRigth`.
+ *
+ * @param {() => React.ReactElement} renderLeft Função que retorna o conteúdo a ser renderizado na área esquerda. Obrigatório.
+ * @param {() => React.ReactElement} renderMiddle Função que retorna o conteúdo a ser renderizado na área central. Obrigatório.
+ * @param {() => React.ReactElement} renderRigth Função que retorna o conteúdo a ser renderizado na área direita. Obrigatório.
+ * @param {string} [maxWidth='1200px'] Largura máxima do container interno (Toolbar). Controla o `max-width` do conteúdo.
+ * @param {string} [background='transparent'] Cor de fundo do container externo da barra.
+ *
+ * @example
+ * ```tsx
+ * import * as React from 'react';
+ * import { BarraFerramentas } from '@/components/BarraFerramentas';
+ * import { Typography, Button } from '@mui/material';
+ *
+ * const Example = () => {
+ *   return (
+ *     <BarraFerramentas
+ *       background="#ffffff"
+ *       maxWidth="1280px"
+ *       renderLeft={() => <Typography variant="h6">Logo</Typography>}
+ *       renderMiddle={() => <Typography variant="body1">Título</Typography>}
+ *       renderRigth={() => <Button variant="contained">Ação</Button>}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+const BarraFerramentas = ({ renderLeft, renderMiddle, renderRigth, maxWidth = '1200px', background = "transparent", }) => {
+    return (_jsx(Bar, { background_color: background, id: "barraferramentas", children: _jsx(CustomToolbar, { disableGutters: true, maxWidth: maxWidth, children: _jsxs(DivStyled, { children: [renderLeft(), renderMiddle(), renderRigth()] }) }) }));
 };
+BarraFerramentas.displayName = "BarraFerramentas"; // para DevTools
+BarraFerramentas.typeName = "BarraFerramentas"; // para seu código
 export default BarraFerramentas;
 //# sourceMappingURL=BarraFerramentas.js.map