@pipelinesolucoes/button 1.0.0-beta.0

package/README.md

@@ -0,0 +1,44 @@
+# Sobre
+
+  Este projeto é uma biblioteca React preparada para publicação no npm. 
+  Essa biblioteca contem componentes de botao.
+
+  - ActionButton: Botão de ação estilizado baseado no tema e com tipografia configurável via `variant`.
+  - FormButtonGroup: Agrupador de botões "Deletar", Cancelar" e "Salvar" para uso **dentro** de formulários.
+  - NavigationButton: Botão de navegação reutilizável baseado em um link (`<a>`), estilizado com Material UI.
+  - NavigationLink: Link de navegação reutilizável baseado em um link (`<a>`), estilizado com Material UI. 
+  
+  
+  Abaixo está o passo a passo para publicar ou atualizar a lib.
+
+# Pré-requisitos
+
+    1. Node.js instalado
+        - Recomenda-se uma versão LTS. Verifique com: node -v        
+
+# Como Publicar a biblioteca:
+
+  1. Instalar dependências: npm install
+
+  2. No package.json, altere o campo version de acordo com a semântica de versionamento.
+    1.0.1 – correção de bug
+    1.1.0 – nova funcionalidade compatível
+    2.0.0 – mudanças incompatíveis
+
+    - para publicar versão beta: "1.0.0-beta.x"
+
+  3. Este pacote é publicado exclusivamente via CI/CD (GitHub Actions).
+
+    - Releases são disparados apenas por tags Git (vX.Y.Z)
+    - Publicações manuais (npm publish) são desabilitadas
+    - A autenticação no npm utiliza Trusted Publishing (OIDC)
+    - Nenhum token npm é armazenado ou utilizado
+    - Tokens de publicação estão explicitamente desabilitados
+    - Autenticação em dois fatores (2FA) é obrigatória
+    - Versionamento segue Semantic Versioning (SemVer)
+
+    Esse modelo garante publicações seguras, rastreáveis e reprodutíveis. 
+
+# Comando:
+
+  1. npm view pipesol-button versions --json - verifica todas as versões publicadas no npm.  

package/dist/app/layout.d.ts

@@ -0,0 +1,6 @@
+import type { Metadata } from "next";
+import "./globals.css";
+export declare const metadata: Metadata;
+export default function RootLayout({ children, }: Readonly<{
+    children: React.ReactNode;
+}>): import("react/jsx-runtime").JSX.Element;

package/dist/app/layout.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+const geistSans = Geist({
+    variable: "--font-geist-sans",
+    subsets: ["latin"],
+});
+const geistMono = Geist_Mono({
+    variable: "--font-geist-mono",
+    subsets: ["latin"],
+});
+export const metadata = {
+    title: "Create Next App",
+    description: "Generated by create next app",
+};
+export default function RootLayout({ children, }) {
+    return (_jsx("html", { lang: "en", children: _jsx("body", { className: `${geistSans.variable} ${geistMono.variable}`, children: children }) }));
+}
+//# sourceMappingURL=layout.js.map

package/dist/app/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/app/layout.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,eAAe,CAAC;AAEvB,MAAM,SAAS,GAAG,KAAK,CAAC;IACtB,QAAQ,EAAE,mBAAmB;IAC7B,OAAO,EAAE,CAAC,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,UAAU,CAAC;IAC3B,QAAQ,EAAE,mBAAmB;IAC7B,OAAO,EAAE,CAAC,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAa;IAChC,KAAK,EAAE,iBAAiB;IACxB,WAAW,EAAE,8BAA8B;CAC5C,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,GAGR;IACA,OAAO,CACL,eAAM,IAAI,EAAC,IAAI,YACb,eAAM,SAAS,EAAE,GAAG,SAAS,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ,EAAE,YAC3D,QAAQ,GACJ,GACF,CACR,CAAC;AACJ,CAAC"}

package/dist/app/page.d.ts

@@ -0,0 +1 @@
+export default function Home(): import("react/jsx-runtime").JSX.Element;

package/dist/app/page.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Home() {
+    return (_jsx("p", { children: "teste" }));
+}
+//# sourceMappingURL=page.js.map

package/dist/app/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../../src/app/page.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,MAAM,CAAC,OAAO,UAAU,IAAI;IAC1B,OAAO,CACL,gCAAY,CACb,CAAC;AACJ,CAAC"}

package/dist/components/ActionButton.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { ButtonKind } from "../types/ButtonKind";
+import { TypographyVariant } from "@mui/material/styles";
+import { CommonStyleProps } from "../types/style/CommonStyleProps";
+export interface ActionButtonProps extends CommonStyleProps {
+    kind?: ButtonKind;
+    text: string;
+    variant?: TypographyVariant;
+    aria_label: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+/**
+ * Botão estilizado baseado no tema e com tipografia configurável via `variant`.
+ *
+ * @param {string} text Texto exibido dentro do botão.
+ * @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
+ * @param {React.ReactNode} icon Ícone opcional exibido antes do texto.
+ * @param {'none' | 'primary' | 'secondary'} [kind="none"] Token visual aplicado ao botão.
+ * @param {string} [width="auto"] Largura do botão.
+ * @param {string} [height="auto"] Altura do botão.
+ * @param {string} [padding="12px 20px"] Espaçamento interno.
+ * @param {string} [margin="0"] Margem externa.
+ * @param {boolean} [disabled=false] Estado desabilitado.
+ * @param {string} [background="transparent"] Cor de fundo.
+ * @param {string} backgroundHover Cor de fundo no hover.
+ * @param {string} colorText Cor do texto.
+ * @param {string} colorHover Cor do texto no hover.
+ * @param {string} [borderRadius="0"] Raio da borda.
+ * @param {string} [boxShadow="none"] Sombra do botão.
+ * @param {Function} onClick Evento de clique.
+ * @param {string} aria_label Texto para acessibilidade.
+ *
+ * @example
+ * ```tsx
+ * <ActionButton
+ *   text="Enviar"
+ *   variant="h6"
+ *   onClick={() => console.log("clicou")}
+ * />
+ * ```
+ */
+declare const ActionButton: React.FC<ActionButtonProps>;
+export default ActionButton;

package/dist/components/ActionButton.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Typography from "@mui/material/Typography";
+import { StyledButtonKind } from "./StyledButton";
+/**
+ * Botão estilizado baseado no tema e com tipografia configurável via `variant`.
+ *
+ * @param {string} text Texto exibido dentro do botão.
+ * @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
+ * @param {React.ReactNode} icon Ícone opcional exibido antes do texto.
+ * @param {'none' | 'primary' | 'secondary'} [kind="none"] Token visual aplicado ao botão.
+ * @param {string} [width="auto"] Largura do botão.
+ * @param {string} [height="auto"] Altura do botão.
+ * @param {string} [padding="12px 20px"] Espaçamento interno.
+ * @param {string} [margin="0"] Margem externa.
+ * @param {boolean} [disabled=false] Estado desabilitado.
+ * @param {string} [background="transparent"] Cor de fundo.
+ * @param {string} backgroundHover Cor de fundo no hover.
+ * @param {string} colorText Cor do texto.
+ * @param {string} colorHover Cor do texto no hover.
+ * @param {string} [borderRadius="0"] Raio da borda.
+ * @param {string} [boxShadow="none"] Sombra do botão.
+ * @param {Function} onClick Evento de clique.
+ * @param {string} aria_label Texto para acessibilidade.
+ *
+ * @example
+ * ```tsx
+ * <ActionButton
+ *   text="Enviar"
+ *   variant="h6"
+ *   onClick={() => console.log("clicou")}
+ * />
+ * ```
+ */
+const ActionButton = ({ kind = "none", width = "auto", height = "auto", padding = "12px 20px", margin = "0", text, icon, disabled = false, onClick, background = "transparent", backgroundHover, colorText, colorHover, borderRadius = "0", boxShadow = "none", variant = "body1", aria_label }) => {
+    return (_jsx(StyledButtonKind, { kind: kind, width: width, height: height, padding: padding, margin: margin, disabled: disabled, startIcon: icon, onClick: onClick, background: background, backgroundHover: backgroundHover, colorText: colorText, colorHover: colorHover, borderRadius: borderRadius, boxShadow: boxShadow, "aria-label": aria_label, children: _jsx(Typography, { variant: variant, children: text }) }));
+};
+ActionButton.displayName = "ActionButton";
+export default ActionButton;
+//# sourceMappingURL=ActionButton.js.map

package/dist/components/ActionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionButton.js","sourceRoot":"","sources":["../../src/components/ActionButton.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAclD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,YAAY,GAAgC,CAAC,EACjD,IAAI,GAAG,MAAM,EACb,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,OAAO,GAAG,WAAW,EACrB,MAAM,GAAG,GAAG,EACZ,IAAI,EACJ,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,UAAU,GAAG,aAAa,EAC1B,eAAe,EACf,SAAS,EACT,UAAU,EACV,YAAY,GAAG,GAAG,EAClB,SAAS,GAAG,MAAM,EAClB,OAAO,GAAG,OAAO,EACjB,UAAU,EACX,EAAE,EAAE;IACH,OAAO,CACL,KAAC,gBAAgB,IACf,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,IAAI,EACf,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,gBACR,UAAU,YAEtB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,YAAG,IAAI,GAAc,GAChC,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAC1C,eAAe,YAAY,CAAC"}

package/dist/components/CircularIconLink.d.ts

@@ -0,0 +1,43 @@
+import React, { ReactElement } from 'react';
+import { SvgIconProps } from '@mui/material';
+/**
+ * Propriedades do componente `CircularIconLink`.
+ */
+export interface CircularIconLinkProps {
+    /**
+     * Ícone do Material UI (`<SvgIcon>`) ou uma imagem (`<img>`).
+     * Aceita:
+     * ```tsx
+     * <Instagram sx={{ color: 'white' }} />
+     * // ou
+     * <img src="/logo.png" alt="logo" width={24} height={24} />
+     * ```
+     */
+    children: ReactElement<HTMLImageElement> | ReactElement<SvgIconProps>;
+    /** URL a ser aberta (opcional se onClick for usado) */
+    url?: string;
+    /** Cor de fundo do círculo */
+    background_color: string;
+    /** Texto para acessibilidade (`aria-label`) */
+    aria_label: string;
+    /** Padding interno do círculo. @default "4px" */
+    padding?: string;
+    /** Estilo da borda. @default "2px solid transparent" */
+    border?: string;
+    /** Define se o link será aberto em nova aba. @default true */
+    openInNewTab?: boolean;
+    /** Evento de clique customizado. Se definido, sobrescreve o comportamento padrão */
+    onClick?: () => void;
+}
+/**
+ * **CircularIconLink**
+ *
+ * Componente que exibe um **ícone ou imagem dentro de um círculo clicável**,
+ * permitindo criar links visuais para redes sociais, sites ou qualquer URL externa.
+ *
+ * - Aceita ícones do Material UI (`<SvgIcon>`) ou imagens (`<img>`).
+ * - O círculo possui cor de fundo, padding e borda personalizáveis.
+ * - Ao clicar, executa o `onClick` se definido, caso contrário abre a `url` em nova aba ou na mesma aba.
+ */
+declare const CircularIconLink: React.FC<CircularIconLinkProps>;
+export default CircularIconLink;

package/dist/components/CircularIconLink.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, IconButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+const StyledBox = styled(Box, {
+    shouldForwardProp: (prop) => !['background_color', 'padding', 'border'].includes(prop),
+})(({ background_color, padding, border }) => ({
+    backgroundColor: background_color,
+    padding: padding,
+    borderRadius: '50%',
+    display: 'inline-block',
+    border: border,
+}));
+/**
+ * **CircularIconLink**
+ *
+ * Componente que exibe um **ícone ou imagem dentro de um círculo clicável**,
+ * permitindo criar links visuais para redes sociais, sites ou qualquer URL externa.
+ *
+ * - Aceita ícones do Material UI (`<SvgIcon>`) ou imagens (`<img>`).
+ * - O círculo possui cor de fundo, padding e borda personalizáveis.
+ * - Ao clicar, executa o `onClick` se definido, caso contrário abre a `url` em nova aba ou na mesma aba.
+ */
+const CircularIconLink = ({ url, background_color = 'transparent', aria_label, padding = '4px', border = 'none', children, openInNewTab = true, onClick, }) => {
+    const handleClick = () => {
+        if (url) {
+            const target = openInNewTab ? '_blank' : '_self';
+            const features = openInNewTab ? 'noopener noreferrer' : '';
+            window.open(url, target, features);
+        }
+    };
+    return (_jsx(StyledBox, { background_color: background_color, padding: padding, border: border, children: _jsx(IconButton, { "aria-label": aria_label, onClick: onClick || handleClick, children: children }) }));
+};
+export default CircularIconLink;
+//# sourceMappingURL=CircularIconLink.js.map

package/dist/components/CircularIconLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularIconLink.js","sourceRoot":"","sources":["../../src/components/CircularIconLink.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,GAAG,EAAE,UAAU,EAAgB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,EAAE;IAC5B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC,CAAC,kBAAkB,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,IAAc,CAAC;CACtE,CAAC,CAIC,CAAC,EAAE,gBAAgB,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7C,eAAe,EAAE,gBAAgB;IACjC,OAAO,EAAE,OAAO;IAChB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,cAAc;IACvB,MAAM,EAAE,MAAM;CACf,CAAC,CAAC,CAAC;AAuCJ;;;;;;;;;GASG;AACH,MAAM,gBAAgB,GAAoC,CAAC,EACzD,GAAG,EACH,gBAAgB,GAAG,aAAa,EAChC,UAAU,EACV,OAAO,GAAG,KAAK,EACf,MAAM,GAAG,MAAM,EACf,QAAQ,EACR,YAAY,GAAG,IAAI,EACnB,OAAO,GACR,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,GAAG,EAAE,CAAC;YACR,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC;YACjD,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IAAC,gBAAgB,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,YAC7E,KAAC,UAAU,kBAAa,UAAU,EAAE,OAAO,EAAE,OAAO,IAAI,WAAW,YAChE,QAAQ,GACE,GACH,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/DownloadButton.d.ts

@@ -0,0 +1,116 @@
+import React from 'react';
+/**
+ * Interface de propriedades para o componente `DownloadButton`.
+ *
+ * Use este botão para disponibilizar o download de um arquivo mantendo
+ * controle total sobre cores, raio de borda, sombra, dimensões e ícone.
+ *
+ * As propriedades marcadas com `@default` indicam o valor que será utilizado
+ * quando a prop não for fornecida ao componente.
+ */
+export interface DownloadButtonProps {
+    /**
+     * URL do arquivo a ser baixado.
+     */
+    file: string;
+    /**
+     * Nome do arquivo que será salvo no disco.
+     */
+    fileName: string;
+    /**
+     * Cor de fundo do botão.
+     * @default "#1976d2"
+     */
+    background?: string;
+    /**
+     * Cor de fundo exibida no estado hover.
+     * @default "#1565c0"
+     */
+    backgroundHover?: string;
+    /**
+     * Cor do texto do botão.
+     * @default "#fff"
+     */
+    color?: string;
+    /**
+     * Cor do texto exibida no estado hover.
+     * Se não informada, herda a mesma cor definida em `color`.
+     */
+    colorHover?: string;
+    /**
+     * Raio da borda do botão (qualquer valor CSS válido).
+     * @default "8px"
+     */
+    borderRadius?: string;
+    /**
+     * Sombra do botão (valor CSS de box-shadow).
+     * @default "none"
+     */
+    boxShadow?: string;
+    /**
+     * Ícone opcional exibido à esquerda do conteúdo.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Conteúdo textual do botão (recomendado utilizar `Typography`).
+     */
+    children: React.ReactNode;
+    /**
+     * Texto de acessibilidade que descreve a função do botão
+     * para leitores de tela (atributo `aria-label`).
+     */
+    arialLabel: string;
+    /**
+     * Largura do botão (valor CSS).
+     * @default "auto"
+     */
+    width?: string;
+    /**
+     * Altura do botão (valor CSS).
+     * @default "fit-content"
+     */
+    height?: string;
+}
+/**
+ * Botão de download customizável com suporte a ícone e conteúdo centralizado.
+ * O texto deve ser passado via `Typography` como children.
+ *
+ * ### Parâmetros
+ * @param {string} file URL do arquivo a ser baixado.
+ * @param {string} fileName Nome do arquivo que será salvo.
+ * @param {string} [background="#1976d2"] Cor de fundo padrão do botão. **@default** "#1976d2"
+ * @param {string} [backgroundHover="#1565c0"] Cor de fundo no hover. **@default** "#1565c0"
+ * @param {string} [color="#fff"] Cor do texto padrão. **@default** "#fff"
+ * @param {string} [colorHover] Cor do texto no hover (herda `color` quando ausente).
+ * @param {string} [borderRadius="8px"] Raio da borda do botão. **@default** "8px"
+ * @param {string} [boxShadow="none"] Sombra do botão. **@default** "none"
+ * @param {string} arialLabel Texto de acessibilidade (atributo `aria-label`).
+ * @param {React.ReactNode} [icon] Ícone opcional exibido à esquerda do conteúdo.
+ * @param {React.ReactNode} children Conteúdo do botão (ex.: `Typography`).
+ * @param {string} [width="auto"] Largura do botão (valor CSS). **@default** "auto"
+ * @param {string} [height="fit-content"] Altura do botão (valor CSS). **@default** "fit-content"
+ *
+ * @example
+ * ```tsx
+ * import { Typography } from '@mui/material';
+ * import { Download as DownloadIcon } from '@mui/icons-material';
+ *
+ * <DownloadButton
+ *   file="/docs/manual.pdf"
+ *   fileName="manual.pdf"
+ *   arialLabel="Baixar manual do produto"
+ *   background="#28a745"
+ *   backgroundHover="#218838"
+ *   color="#fff"
+ *   borderRadius="12px"
+ *   boxShadow="0 2px 8px rgba(0,0,0,0.15)"
+ *   width="220px"
+ *   height="44px"
+ *   icon={<DownloadIcon />}
+ * >
+ *   <Typography variant="button">Baixar Manual</Typography>
+ * </DownloadButton>
+ * ```
+ */
+declare const DownloadButton: React.FC<DownloadButtonProps>;
+export default DownloadButton;

package/dist/components/DownloadButton.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+const StyledLink = styled('a', {
+    shouldForwardProp: (prop) => ![
+        'background',
+        'backgroundHover',
+        'color',
+        'colorHover',
+        'borderRadius',
+        'boxShadow',
+        'width',
+        'height'
+    ].includes(prop),
+})(({ background, backgroundHover, color, colorHover, borderRadius, boxShadow, width, height }) => ({
+    width: width,
+    height: height,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '8px',
+    background: background || '#1976d2',
+    color: color || '#fff',
+    borderRadius: borderRadius || '8px',
+    boxShadow: boxShadow || 'none',
+    padding: '8px 16px',
+    cursor: 'pointer',
+    textDecoration: 'none',
+    transition: 'all 0.3s ease',
+    '&:hover': {
+        background: backgroundHover || '#1565c0',
+        color: colorHover || color || '#fff',
+    },
+}));
+/**
+ * Botão de download customizável com suporte a ícone e conteúdo centralizado.
+ * O texto deve ser passado via `Typography` como children.
+ *
+ * ### Parâmetros
+ * @param {string} file URL do arquivo a ser baixado.
+ * @param {string} fileName Nome do arquivo que será salvo.
+ * @param {string} [background="#1976d2"] Cor de fundo padrão do botão. **@default** "#1976d2"
+ * @param {string} [backgroundHover="#1565c0"] Cor de fundo no hover. **@default** "#1565c0"
+ * @param {string} [color="#fff"] Cor do texto padrão. **@default** "#fff"
+ * @param {string} [colorHover] Cor do texto no hover (herda `color` quando ausente).
+ * @param {string} [borderRadius="8px"] Raio da borda do botão. **@default** "8px"
+ * @param {string} [boxShadow="none"] Sombra do botão. **@default** "none"
+ * @param {string} arialLabel Texto de acessibilidade (atributo `aria-label`).
+ * @param {React.ReactNode} [icon] Ícone opcional exibido à esquerda do conteúdo.
+ * @param {React.ReactNode} children Conteúdo do botão (ex.: `Typography`).
+ * @param {string} [width="auto"] Largura do botão (valor CSS). **@default** "auto"
+ * @param {string} [height="fit-content"] Altura do botão (valor CSS). **@default** "fit-content"
+ *
+ * @example
+ * ```tsx
+ * import { Typography } from '@mui/material';
+ * import { Download as DownloadIcon } from '@mui/icons-material';
+ *
+ * <DownloadButton
+ *   file="/docs/manual.pdf"
+ *   fileName="manual.pdf"
+ *   arialLabel="Baixar manual do produto"
+ *   background="#28a745"
+ *   backgroundHover="#218838"
+ *   color="#fff"
+ *   borderRadius="12px"
+ *   boxShadow="0 2px 8px rgba(0,0,0,0.15)"
+ *   width="220px"
+ *   height="44px"
+ *   icon={<DownloadIcon />}
+ * >
+ *   <Typography variant="button">Baixar Manual</Typography>
+ * </DownloadButton>
+ * ```
+ */
+const DownloadButton = ({ width = 'auto', height = 'fit-content', file, fileName, background, backgroundHover, color, colorHover, borderRadius, boxShadow, arialLabel, icon, children, }) => {
+    return (_jsxs(StyledLink, { href: file, download: fileName, background: background, backgroundHover: backgroundHover, color: color, colorHover: colorHover, borderRadius: borderRadius, boxShadow: boxShadow, "aria-label": arialLabel, width: width, height: height, children: [icon && _jsx("span", { children: icon }), children] }));
+};
+DownloadButton.displayName = 'DownloadButton';
+export default DownloadButton;
+//# sourceMappingURL=DownloadButton.js.map

package/dist/components/DownloadButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DownloadButton.js","sourceRoot":"","sources":["../../src/components/DownloadButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAuF9C,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,EAAE;IAC7B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC;QACC,YAAY;QACZ,iBAAiB;QACjB,OAAO;QACP,YAAY;QACZ,cAAc;QACd,WAAW;QACX,OAAO;QACP,QAAQ;KACT,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC7B,CAAC,CASC,CAAC,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAClG,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,MAAM;IACd,OAAO,EAAE,aAAa;IACtB,UAAU,EAAE,QAAQ;IACpB,cAAc,EAAE,QAAQ;IACxB,GAAG,EAAE,KAAK;IACV,UAAU,EAAE,UAAU,IAAI,SAAS;IACnC,KAAK,EAAE,KAAK,IAAI,MAAM;IACtB,YAAY,EAAE,YAAY,IAAI,KAAK;IACnC,SAAS,EAAE,SAAS,IAAI,MAAM;IAC9B,OAAO,EAAE,UAAU;IACnB,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,MAAM;IACtB,UAAU,EAAE,eAAe;IAC3B,SAAS,EAAE;QACT,UAAU,EAAE,eAAe,IAAI,SAAS;QACxC,KAAK,EAAE,UAAU,IAAI,KAAK,IAAI,MAAM;KACrC;CACF,CAAC,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,cAAc,GAAkC,CAAC,EACrD,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,aAAa,EACtB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,KAAK,EACL,UAAU,EACV,YAAY,EACZ,SAAS,EACT,UAAU,EACV,IAAI,EACJ,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,MAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,gBACR,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,aAEb,IAAI,IAAI,yBAAO,IAAI,GAAQ,EAC3B,QAAQ,IACE,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C,eAAe,cAAc,CAAC"}

package/dist/components/FormButtonGroup.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { TypographyVariant } from '@mui/material/styles';
+export interface FormButtonGroupProps {
+    showDeleteButton?: boolean;
+    variant?: TypographyVariant;
+    onCancel?: () => void;
+    onDelete?: () => void;
+}
+/**
+ * Agrupador de botões "Deletar", Cancelar" e "Salvar" para uso **dentro** de formulários.
+ *
+ * O botão **"Salvar"** possui `type="submit"` e dispara o `onSubmit` do `<form>`.
+ *
+ * @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
+ * @param {boolean} [showDeleteButton="false"] Exibir botao Deletar.
+ * @param {() => void} [onCancel]
+ * Função disparada ao clicar em **"Cancelar"**.
+ * Ideal para fechar modal, navegar de volta, limpar estado ou desfazer alterações.
+ *
+ * @default onCancel = () => {}
+ *
+ * @param {() => void} [onDelete]
+ * Função disparada ao clicar em **"Deletar"**.
+ *
+ * @default onDelete = () => {}
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import Box from '@mui/material/Box';
+ * import TextField from '@mui/material/TextField';
+ * import { FormButtonGroup } from './FormButtonGroup';
+ *
+ * const MyForm: React.FC = () => {
+ *   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+ *     event.preventDefault();
+ *     // sua lógica de envio...
+ *     console.log('Form submetido');
+ *   };
+ *
+ *   return (
+ *     <Box component="form" onSubmit={handleSubmit} noValidate>
+ *       <TextField label="Nome" fullWidth margin="normal" />
+ *       <FormButtonGroup
+ *         exibirBotaoDelete = {true}
+ *         onCancel={() => console.log('cancelado')}
+ *         onDelete={() => console.log('deletado')}
+ *       />
+ *     </Box>
+ *   );
+ * };
+ * ```
+ */
+declare const FormButtonGroup: React.FC<FormButtonGroupProps>;
+export default FormButtonGroup;

package/dist/components/FormButtonGroup.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import { StyledButtonKind } from './StyledButton';
+import { Typography } from '@mui/material';
+const ActionsContainerWithDelete = styled('div', {
+    shouldForwardProp: (prop) => !['onCancel'].includes(prop),
+})(() => ({
+    display: 'grid',
+    gridTemplateColumns: '1fr auto auto',
+    gap: '16px',
+    justifyItems: 'flex-start',
+    width: '100%',
+}));
+const ActionsContainer = styled('div', {
+    shouldForwardProp: (prop) => !['onCancel'].includes(prop),
+})(() => ({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '16px',
+    justifyContent: 'flex-end',
+    width: '100%',
+}));
+/**
+ * Agrupador de botões "Deletar", Cancelar" e "Salvar" para uso **dentro** de formulários.
+ *
+ * O botão **"Salvar"** possui `type="submit"` e dispara o `onSubmit` do `<form>`.
+ *
+ * @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
+ * @param {boolean} [showDeleteButton="false"] Exibir botao Deletar.
+ * @param {() => void} [onCancel]
+ * Função disparada ao clicar em **"Cancelar"**.
+ * Ideal para fechar modal, navegar de volta, limpar estado ou desfazer alterações.
+ *
+ * @default onCancel = () => {}
+ *
+ * @param {() => void} [onDelete]
+ * Função disparada ao clicar em **"Deletar"**.
+ *
+ * @default onDelete = () => {}
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import Box from '@mui/material/Box';
+ * import TextField from '@mui/material/TextField';
+ * import { FormButtonGroup } from './FormButtonGroup';
+ *
+ * const MyForm: React.FC = () => {
+ *   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+ *     event.preventDefault();
+ *     // sua lógica de envio...
+ *     console.log('Form submetido');
+ *   };
+ *
+ *   return (
+ *     <Box component="form" onSubmit={handleSubmit} noValidate>
+ *       <TextField label="Nome" fullWidth margin="normal" />
+ *       <FormButtonGroup
+ *         exibirBotaoDelete = {true}
+ *         onCancel={() => console.log('cancelado')}
+ *         onDelete={() => console.log('deletado')}
+ *       />
+ *     </Box>
+ *   );
+ * };
+ * ```
+ */
+const FormButtonGroup = ({ showDeleteButton = false, variant = "body1", onCancel = () => { }, onDelete = () => { }, }) => {
+    if (showDeleteButton) {
+        return (_jsxs(ActionsContainerWithDelete, { onCancel: onCancel, children: [_jsx(StyledButtonKind, { kind: "delete", type: "button", onClick: onDelete, "aria-label": "botao Deletar", sx: { width: 'auto' }, children: _jsx(Typography, { variant: variant, children: "Deletar" }) }), _jsx(StyledButtonKind, { kind: "secondary", type: "button", onClick: onCancel, "aria-label": "botao Cancelar", sx: { width: 'auto' }, children: _jsx(Typography, { variant: variant, children: "Cancelar" }) }), _jsx(StyledButtonKind, { kind: "primary", type: "submit", "aria-label": "botao Salvar", sx: { width: 'auto' }, children: _jsx(Typography, { variant: variant, children: "Salvar" }) })] }));
+    }
+    else {
+        return (_jsxs(ActionsContainer, { onCancel: onCancel, children: [_jsx(StyledButtonKind, { kind: "secondary", type: "button", "aria-label": "botao Cancelar", onClick: onCancel, sx: { width: 'auto' }, children: _jsx(Typography, { variant: variant, children: "Cancelar" }) }), _jsx(StyledButtonKind, { kind: "primary", type: "submit", "aria-label": "botao Salvar", sx: { width: 'auto' }, children: _jsx(Typography, { variant: variant, children: "Salvar" }) })] }));
+    }
+};
+FormButtonGroup.displayName = 'FormButtonGroup';
+export default FormButtonGroup;
+//# sourceMappingURL=FormButtonGroup.js.map

package/dist/components/FormButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormButtonGroup.js","sourceRoot":"","sources":["../../src/components/FormButtonGroup.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAqB,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAS3C,MAAM,0BAA0B,GAAG,MAAM,CAAC,KAAK,EAAE;IAC/C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAE,CAAC,UAAU,CAAc,CAAC,QAAQ,CAAC,IAAc,CAAC;CAClF,CAAC,CAAyC,GAAG,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM;IACf,mBAAmB,EAAE,eAAe;IACpC,GAAG,EAAE,MAAM;IACX,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,MAAM;CACd,CAAC,CAAC,CAAC;AAEJ,MAAM,gBAAgB,GAAG,MAAM,CAAC,KAAK,EAAE;IACrC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAE,CAAC,UAAU,CAAc,CAAC,QAAQ,CAAC,IAAc,CAAC;CAClF,CAAC,CAAyC,GAAG,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,KAAK;IACpB,GAAG,EAAE,MAAM;IACX,cAAc,EAAE,UAAU;IAC1B,KAAK,EAAE,MAAM;CACd,CAAC,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,eAAe,GAAmC,CAAC,EACvD,gBAAgB,GAAG,KAAK,EACxB,OAAO,GAAG,OAAO,EACjB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,EACnB,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,GACpB,EAAE,EAAE;IAEH,IAAI,gBAAgB,EAAC,CAAC;QAEpB,OAAO,CACL,MAAC,0BAA0B,IAAC,QAAQ,EAAE,QAAQ,aAE5C,KAAC,gBAAgB,IACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,gBACN,eAAe,EAC1B,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAErB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,wBAAsB,GACjC,EAEnB,KAAC,gBAAgB,IACf,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,gBACN,gBAAgB,EAC3B,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAErB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,yBAAuB,GAClC,EAEnB,KAAC,gBAAgB,IACf,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,gBACF,cAAc,EACzB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAErB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,uBAAqB,GAChC,IAEQ,CAC9B,CAAC;IACJ,CAAC;SAEG,CAAC;QAEH,OAAO,CACL,MAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,aAClC,KAAC,gBAAgB,IACf,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,QAAQ,gBACF,gBAAgB,EAC3B,OAAO,EAAE,QAAQ,EACjB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAErB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,yBAAuB,GAClC,EAEnB,KAAC,gBAAgB,IACf,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,gBACF,cAAc,EACzB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,YAErB,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,uBAAqB,GAChC,IACF,CACpB,CAAC;IACJ,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAChD,eAAe,eAAe,CAAC"}

package/dist/components/NavigationButton.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { TypographyVariant } from '@mui/material/styles';
+import { ButtonKind } from '../types/ButtonKind';
+import { CommonStyleProps } from "../types/style/CommonStyleProps";
+interface NavigationButtonProps extends CommonStyleProps {
+    kind?: ButtonKind;
+    variant?: TypographyVariant;
+    text: string;
+    aria_label: string;
+    url: string;
+}
+/**
+ * Botão de navegação reutilizável baseado em um link (`<a>`), estilizado com Material UI.
+ *
+ * Regras de navegação:
+ * - Se `url` contiver `http`, o link é tratado como externo e abre em nova aba.
+ * - Caso contrário, é tratado como link interno ou âncora.
+ *
+ * @param {ButtonKind} [kind="none"] Tipo de botão baseado nos tokens do tema.
+ * @param {string} url URL ou âncora de destino.
+ * @param {string} aria_label Texto para acessibilidade.
+ * @param {string} [background] Cor de fundo do botão.
+ * @param {string} [backgroundHover] Cor de fundo no hover.
+ * @param {string} [colorText] Cor do texto.
+ * @param {string} [colorHover] Cor do texto no hover.
+ * @param {string} [border="none"] Borda do botão.
+ * @param {string} [borderRadius="0"] Raio da borda.
+ * @param {string} [boxShadow="none"] Sombra do botão.
+ * @param {string} width Largura do botão.
+ * @param {string} [margin="0"] Margem externa.
+ * @param {string} [padding="8px 24px"] Espaçamento interno.
+ * @param {string} [text] Texto do botão.
+ * @param {TypographyVariant} [variant="body1"] Variante da tipografia usada no texto.
+ *
+ * @example
+ * ```tsx
+ * <NavigationButton
+ *   kind="primary"
+ *   url="#contato"
+ *   aria_label="Ir para contato"
+ *   width="fit-content"
+ * >
+ *   Fale conosco
+ * </NavigationButton>
+ * ```
+ */
+declare const NavigationButton: React.FC<NavigationButtonProps>;
+export default NavigationButton;