pipesol-button 1.0.1-beta.9 → 1.0.9

package/README.md

@@ -1,31 +1,38 @@
-# Sobre
-
-  Este projeto é uma biblioteca React preparada para publicação no npm. 
-  Essa biblioteca contem componentes de barra de notificacao.
-  Abaixo está o passo a passo para publicar ou atualizar a lib.
-
-# Pré-requisitos
-
-    1. Conta no NPM
-        - Crie uma conta em: https://www.npmjs.com/signup
-
-    2. Node.js instalado
-        - Recomenda-se uma versão LTS. Verifique com: node -v
-        - Login no NPM pelo terminal: npm login
-          npm: pipeline-solucoes
-          senha:pipesollinecoes
-          key: pipeline@12345#
-
-# 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. Comando para versao beta: npm run release-beta
-     Comando para versao oficial: npm run release
+# Sobre
+
+  Este projeto é uma biblioteca React preparada para publicação no npm. 
+  Essa biblioteca contem componentes de botao.
+  
+  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/components/ActionButton.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import { ButtonKind } from "@/types/ButtonKind";
+import { TypographyVariant } from "@mui/material/styles";
+export interface ActionButtonProps {
+    kind?: ButtonKind;
+    width?: string;
+    height?: string;
+    padding?: string;
+    margin?: string;
+    text?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    boxShadow?: string;
+    background?: string;
+    backgroundHover?: string;
+    color?: string;
+    colorHover?: string;
+    borderRadius?: string;
+    variant?: TypographyVariant;
+    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} color 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.
+ *
+ * @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,38 @@
+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} color 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.
+ *
+ * @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, color, colorHover, borderRadius = "0", boxShadow = "none", variant = "body1", }) => {
+    return (_jsx(StyledButtonKind, { kind: kind, width: width, height: height, padding: padding, margin: margin, disabled: disabled, startIcon: icon, onClick: onClick, background: background, backgroundHover: backgroundHover, colorText: color, colorHover: colorHover, borderRadius: borderRadius, boxShadow: boxShadow, 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;AAsBlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;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,GAAG,EAAE,EACT,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,UAAU,GAAG,aAAa,EAC1B,eAAe,EACf,KAAK,EACL,UAAU,EACV,YAAY,GAAG,GAAG,EAClB,SAAS,GAAG,MAAM,EAClB,OAAO,GAAG,OAAO,GAClB,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,KAAK,EAChB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,YAEpB,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/DownloadButton.d.ts

@@ -1,37 +1,116 @@
 import React from 'react';
 /**
- * Props para o componente DownloadButton
+ * 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 */
+    /**
+     * URL do arquivo a ser baixado.
+     */
     file: string;
-    /** Nome do arquivo que será salvo */
+    /**
+     * Nome do arquivo que será salvo no disco.
+     */
     fileName: string;
-    /** Cor de fundo padrão */
+    /**
+     * Cor de fundo do botão.
+     * @default "#1976d2"
+     */
     background?: string;
-    /** Cor de fundo no hover */
+    /**
+     * Cor de fundo exibida no estado hover.
+     * @default "#1565c0"
+     */
     backgroundHover?: string;
-    /** Cor do texto padrão */
+    /**
+     * Cor do texto do botão.
+     * @default "#fff"
+     */
     color?: string;
-    /** Cor do texto no hover */
+    /**
+     * Cor do texto exibida no estado hover.
+     * Se não informada, herda a mesma cor definida em `color`.
+     */
     colorHover?: string;
-    /** Raio da borda */
+    /**
+     * Raio da borda do botão (qualquer valor CSS válido).
+     * @default "8px"
+     */
     borderRadius?: string;
-    /** Sombra do botão */
+    /**
+     * Sombra do botão (valor CSS de box-shadow).
+     * @default "none"
+     */
     boxShadow?: string;
-    /** Ícone opcional exibido à esquerda do texto */
+    /**
+     * Ícone opcional exibido à esquerda do conteúdo.
+     */
     icon?: React.ReactNode;
-    /** Texto do botão passado como children (deve ser um Typography) */
+    /**
+     * 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 texto centralizado.
+ * Botão de download customizável com suporte a ícone e conteúdo centralizado.
  * O texto deve ser passado via `Typography` como children.
  *
- * @default background="#1976d2"
- * @default color="#fff"
- * @default borderRadius="8px"
- * @default boxShadow="none"
+ * ### 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

@@ -8,8 +8,12 @@ const StyledLink = styled('a', {
         'colorHover',
         'borderRadius',
         'boxShadow',
+        'width',
+        'height'
     ].includes(prop),
-})(({ background, backgroundHover, color, colorHover, borderRadius, boxShadow }) => ({
+})(({ background, backgroundHover, color, colorHover, borderRadius, boxShadow, width, height }) => ({
+    width: width,
+    height: height,
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -28,16 +32,48 @@ const StyledLink = styled('a', {
     },
 }));
 /**
- * Botão de download customizável com suporte a ícone e texto centralizado.
+ * Botão de download customizável com suporte a ícone e conteúdo centralizado.
  * O texto deve ser passado via `Typography` como children.
  *
- * @default background="#1976d2"
- * @default color="#fff"
- * @default borderRadius="8px"
- * @default boxShadow="none"
+ * ### 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 = ({ file, fileName, background, backgroundHover, color, colorHover, borderRadius, boxShadow, icon, children, }) => {
-    return (_jsxs(StyledLink, { href: file, download: fileName, background: background, backgroundHover: backgroundHover, color: color, colorHover: colorHover, borderRadius: borderRadius, boxShadow: boxShadow, children: [icon && _jsx("span", { children: icon }), children] }));
+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;

package/dist/components/DownloadButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadButton.js","sourceRoot":"","sources":["../../src/components/DownloadButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AA4B9C,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;KACZ,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC7B,CAAC,CAOC,CAAC,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;IACnF,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;;;;;;;;GAQG;AACH,MAAM,cAAc,GAAkC,CAAC,EACrD,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,KAAK,EACL,UAAU,EACV,YAAY,EACZ,SAAS,EACT,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,aAEnB,IAAI,IAAI,yBAAO,IAAI,GAAQ,EAC3B,QAAQ,IACE,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C,eAAe,cAAc,CAAC"}
+{"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,42 @@
+import React from 'react';
+export interface FormButtonGroupProps {
+    onCancel?: () => void;
+}
+/**
+ * Agrupador de botões "Cancelar" e "Salvar" para uso **dentro** de formulários.
+ *
+ * O botão **"Salvar"** possui `type="submit"` e dispara o `onSubmit` do `<form>`.
+ *
+ * @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 = () => {}
+ *
+ * @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
+ *         onCancel={() => console.log('cancelado')}
+ *       />
+ *     </Box>
+ *   );
+ * };
+ * ```
+ */
+declare const FormButtonGroup: React.FC<FormButtonGroupProps>;
+export default FormButtonGroup;

package/dist/components/FormButtonGroup.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import { StyledButtonKind } from './StyledButton';
+const ActionsContainer = styled('div', {
+    shouldForwardProp: (prop) => !['onCancel'].includes(prop),
+})(() => ({
+    display: 'flex',
+    gap: '8px',
+    justifyContent: 'flex-end',
+    width: '100%',
+}));
+/**
+ * Agrupador de botões "Cancelar" e "Salvar" para uso **dentro** de formulários.
+ *
+ * O botão **"Salvar"** possui `type="submit"` e dispara o `onSubmit` do `<form>`.
+ *
+ * @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 = () => {}
+ *
+ * @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
+ *         onCancel={() => console.log('cancelado')}
+ *       />
+ *     </Box>
+ *   );
+ * };
+ * ```
+ */
+const FormButtonGroup = ({ onCancel = () => { }, }) => {
+    return (_jsxs(ActionsContainer, { onCancel: onCancel, children: [_jsx(StyledButtonKind, { kind: "secondary", type: "button", onClick: onCancel, sx: { width: 'auto' }, children: "Cancelar" }), _jsx(StyledButtonKind, { kind: "primary", type: "submit", sx: { width: 'auto' }, 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,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAMlD,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,GAAG,EAAE,KAAK;IACV,cAAc,EAAE,UAAU;IAC1B,KAAK,EAAE,MAAM;CACd,CAAC,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,eAAe,GAAmC,CAAC,EACvD,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,GACpB,EAAE,EAAE;IACH,OAAO,CACL,MAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,aAClC,KAAC,gBAAgB,IACf,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,EACjB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,yBAGJ,EAEnB,KAAC,gBAAgB,IACf,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,uBAGJ,IACF,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAChD,eAAe,eAAe,CAAC"}

package/dist/components/NavigationButton.d.ts

@@ -1,8 +1,14 @@
 import React from 'react';
+import { ButtonKind } from '@/types/ButtonKind';
 /**
  * Propriedades do componente `NavigationButton`.
  */
 interface NavigationButtonProps {
+    /**
+     * Seleciona o conjunto de tokens do tema.
+     * @default "none"
+     */
+    kind?: ButtonKind;
     /**
      * URL ou âncora para onde o botão deve navegar.
      * - Se começar com `http`, abre em nova aba.
@@ -12,28 +18,28 @@ interface NavigationButtonProps {
     /** Texto para acessibilidade (atributo `aria-label`). */
     aria_label: string;
     /** Cor de fundo padrão do botão (ex: `#1976d2` ou `transparent`). */
-    background_color?: string;
+    backgroundColor?: string;
     /** Cor de fundo quando o botão é focado/hover. Se não informado, usa a cor padrão. */
-    background_color_hover?: string;
+    backgroundColorHover?: string;
     /** Cor do texto padrão (ex: `#fff`). */
-    color: string;
+    color?: string;
     /** Cor do texto no hover. Se não informado, usa a mesma cor padrão. */
-    color_hover?: string;
+    colorHover?: string;
     /**
-     * Cor da borda (ex: `#1976d2`).
-     * @default "transparent"
+     * Borda do Botao (1px solid #fff)
+     * @default "none"
      */
-    border_color?: string;
+    border?: string;
     /**
      * Raio de borda (ex: `8px`, `50%`).
      * @default "0"
      */
-    border_radius?: string;
+    borderRadius?: string;
     /**
      * Sombra CSS (ex: `0 2px 4px rgba(0,0,0,0.2)`).
      * @default "none"
      */
-    box_shadow?: string;
+    boxShadow?: string;
     /** Largura do botão (ex: `200px`, `100%`). */
     width: string;
     /**

package/dist/components/NavigationButton.js

@@ -3,54 +3,58 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 const ButtonStyled = styled('a', {
     shouldForwardProp: (prop) => ![
-        'background_color',
-        'background_color_hover',
-        'color',
-        'color_hover',
+        'kind',
+        'backgroundColor',
+        'backgroundColorHover',
+        'colorText',
+        'colorHover',
         'padding',
-        'border_radius',
-        'border_color',
-        'color_hover',
+        'borderRadius',
+        'border',
         'width',
         'margin',
-        'boxshadow',
+        'boxShadow',
     ].includes(prop),
-})(({ background_color, background_color_hover, color, color_hover, padding, border_radius, border_color, width, margin, boxshadow, }) => ({
-    width: width,
-    cursor: 'pointer',
-    textDecoration: 'none',
-    textTransform: 'none',
-    textAlign: 'center',
-    boxShadow: boxshadow,
-    backgroundColor: background_color,
-    color: color,
-    border: `1px solid ${border_color}`,
-    borderRadius: border_radius,
-    padding: padding,
-    margin: margin,
-    '&:hover': {
-        backgroundColor: background_color_hover,
-        color: color_hover,
-    },
-}));
+})(({ theme, kind, backgroundColor, backgroundColorHover, colorText, colorHover, padding, borderRadius, border, width, margin, boxShadow, }) => {
+    const tokens = kind === "primary"
+        ? theme.palette.custom.primaryButton
+        : (kind === "secondary" ? theme.palette.custom.secondaryButton : undefined);
+    return {
+        // Dimensões
+        width: width !== null && width !== void 0 ? width : "auto",
+        padding: padding !== null && padding !== void 0 ? padding : "12px 20px",
+        margin: margin !== null && margin !== void 0 ? margin : "0",
+        // Visual
+        borderRadius: tokens ? tokens.borderRadius : borderRadius,
+        boxShadow: tokens ? tokens.boxShadow : boxShadow,
+        border: border,
+        textDecoration: 'none',
+        textTransform: 'none',
+        cursor: 'pointer',
+        textAlign: 'center',
+        // Cores
+        background: tokens ? tokens.background : backgroundColor,
+        color: tokens ? tokens.color : colorText,
+        "&:hover": {
+            background: tokens ? tokens.backgroundHover : (backgroundColorHover !== null && backgroundColorHover !== void 0 ? backgroundColorHover : backgroundColor),
+            color: tokens ? tokens.colorHover : (colorHover !== null && colorHover !== void 0 ? colorHover : colorText),
+        },
+    };
+});
 /**
  * Botão de navegação reutilizável.
  * Cria um link estilizado que pode ser usado para redirecionar
  * para páginas externas ou seções internas.
  */
-const NavigationButton = ({ url, aria_label, background_color, background_color_hover, color, color_hover, border_radius = '0', border_color = 'transparent', box_shadow = 'none', width, margin = '0', padding = '8px 24px', children, }) => {
-    const backgroundColor = background_color !== null && background_color !== void 0 ? background_color : 'transparent';
-    const backgroundColorHover = background_color_hover !== null && background_color_hover !== void 0 ? background_color_hover : backgroundColor;
-    const colorHover = color_hover !== null && color_hover !== void 0 ? color_hover : color;
-    const borderRadius = border_radius;
+const NavigationButton = ({ url, kind = "none", aria_label, backgroundColor, backgroundColorHover, color, colorHover, borderRadius = '0', border = 'none', boxShadow = 'none', width, margin = '0', padding = '8px 24px', children, }) => {
     const marginButton = margin;
     if (url.indexOf('http') !== -1) {
         // Link externo: abre em nova aba
-        return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, border_radius: borderRadius, border_color: border_color, padding: padding, margin: marginButton, "aria-label": aria_label, target: "_blank", boxshadow: box_shadow, rel: "noopener noreferrer", children: children }));
+        return (_jsx(ButtonStyled, { kind: kind, href: url, width: width, backgroundColor: backgroundColor, backgroundColorHover: backgroundColorHover, color: color, colorHover: colorHover, borderRadius: borderRadius, border: border, padding: padding, margin: marginButton, "aria-label": aria_label, target: "_blank", boxShadow: boxShadow, rel: "noopener noreferrer", children: children }));
     }
     else {
         // Link interno ou âncora
-        return (_jsx(ButtonStyled, { href: url, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, border_radius: borderRadius, border_color: border_color, padding: padding, margin: marginButton, "aria-label": aria_label, boxshadow: box_shadow, children: children }));
+        return (_jsx(ButtonStyled, { kind: kind, href: url, width: width, backgroundColor: backgroundColor, backgroundColorHover: backgroundColorHover, color: color, colorHover: colorHover, borderRadius: borderRadius, border: border, padding: padding, margin: marginButton, "aria-label": aria_label, boxShadow: boxShadow, children: children }));
     }
 };
 export default NavigationButton;