pipesol-button 1.0.1-beta.8 → 1.0.2

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,78 +1,114 @@
 import React from 'react';
 /**
- * Propriedades do componente `NavigationButton`.
+ * 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.
  */
-interface DownloadButtonProps {
+export interface DownloadButtonProps {
     /**
-     * **Arquivo a ser baixado**.
-     *
-     * - Pode ser um caminho relativo dentro do projeto (ex: `/arquivos/relatorio.pdf`),
-     *   que o navegador tratará como download automático.
-     * - Pode ser uma URL absoluta/externa (ex: `https://exemplo.com/arquivo.zip`),
-     *   que será aberta em nova aba para que o usuário faça o download.
+     * URL do arquivo a ser baixado.
      */
     file: string;
-    /** Nome do arquivo salvo no computador (por exemplo, "meu-arquivo.pdf"). */
-    download: string;
-    /** Texto para acessibilidade (atributo `aria-label`). */
-    aria_label: string;
-    /** Cor de fundo padrão do botão (ex: `#1976d2` ou `transparent`). */
-    background_color?: string;
-    /** Cor de fundo quando o botão é focado/hover. Se não informado, usa a cor padrão. */
-    background_color_hover?: string;
-    /** Cor do texto padrão (ex: `#fff`). */
-    color: string;
-    /** Cor do texto no hover. Se não informado, usa a mesma cor padrão. */
-    color_hover?: string;
     /**
-     * Cor da borda (ex: `#1976d2`).
-     * @default "transparent"
+     * Nome do arquivo que será salvo no disco.
      */
-    border_color?: string;
+    fileName: string;
     /**
-     * Raio de borda (ex: `8px`, `50%`).
-     * @default "0"
+     * Cor de fundo do botão.
+     * @default "#1976d2"
      */
-    border_radius?: string;
+    background?: string;
     /**
-     * Sombra CSS (ex: `0 2px 4px rgba(0,0,0,0.2)`).
+     * 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"
      */
-    box_shadow?: string;
-    /** Largura do botão (ex: `200px`, `100%`). */
-    width: string;
+    boxShadow?: string;
     /**
-     * Margem externa.
-     * @default "0"
+     * Ícone opcional exibido à esquerda do conteúdo.
      */
-    margin?: string;
+    icon?: React.ReactNode;
     /**
-     * Padding interno.
-     * @default "8px 24px"
+     * Conteúdo textual do botão (recomendado utilizar `Typography`).
      */
-    padding?: string;
-    /** Conteúdo interno (texto ou elementos JSX). */
     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;
 }
 /**
- * Componente `DownloadButton`
+ * Botão de download customizável com suporte a ícone e conteúdo centralizado.
+ * O texto deve ser passado via `Typography` como children.
  *
- * Botão estilizado para **download de arquivos**.
- * Cria um link em formato de botão que pode:
- * - Abrir o arquivo em nova aba (para URLs externas iniciando com `http`);
- * - Acionar o download direto de um arquivo local/relativo.
+ * ### 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"
  *
- * Exemplo de uso:
+ * @example
  * ```tsx
+ * import { Typography } from '@mui/material';
+ * import { Download as DownloadIcon } from '@mui/icons-material';
+ *
  * <DownloadButton
  *   file="/docs/manual.pdf"
- *   aria_label="Baixar manual em PDF"
- *   background_color="#1976d2"
+ *   fileName="manual.pdf"
+ *   arialLabel="Baixar manual do produto"
+ *   background="#28a745"
+ *   backgroundHover="#218838"
  *   color="#fff"
- *   border_radius="8px"
- *   width="200px"
+ *   borderRadius="12px"
+ *   boxShadow="0 2px 8px rgba(0,0,0,0.15)"
+ *   width="220px"
+ *   height="44px"
+ *   icon={<DownloadIcon />}
  * >
- *   Baixar Manual
+ *   <Typography variant="button">Baixar Manual</Typography>
  * </DownloadButton>
  * ```
  */

package/dist/components/DownloadButton.js

@@ -1,68 +1,80 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
-const ButtonStyled = styled('a', {
+const StyledLink = styled('a', {
     shouldForwardProp: (prop) => ![
-        'background_color',
-        'background_color_hover',
+        'background',
+        'backgroundHover',
         'color',
-        'color_hover',
-        'padding',
-        'border_radius',
-        'border_color',
-        'color_hover',
+        'colorHover',
+        'borderRadius',
+        'boxShadow',
         'width',
-        'margin',
-        'boxshadow',
+        'height'
     ].includes(prop),
-})(({ background_color, background_color_hover, color, color_hover, padding, border_radius, border_color, width, margin, boxshadow, }) => ({
+})(({ 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',
-    textTransform: 'none',
-    textAlign: 'center',
-    boxShadow: boxshadow,
-    backgroundColor: background_color,
-    color: color,
-    border: `1px solid ${border_color}`,
-    borderRadius: border_radius,
-    padding: padding,
-    margin: margin,
+    transition: 'all 0.3s ease',
     '&:hover': {
-        backgroundColor: background_color_hover,
-        color: color_hover,
+        background: backgroundHover || '#1565c0',
+        color: colorHover || color || '#fff',
     },
 }));
 /**
- * Componente `DownloadButton`
+ * Botão de download customizável com suporte a ícone e conteúdo centralizado.
+ * O texto deve ser passado via `Typography` como children.
  *
- * Botão estilizado para **download de arquivos**.
- * Cria um link em formato de botão que pode:
- * - Abrir o arquivo em nova aba (para URLs externas iniciando com `http`);
- * - Acionar o download direto de um arquivo local/relativo.
+ * ### 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"
  *
- * Exemplo de uso:
+ * @example
  * ```tsx
+ * import { Typography } from '@mui/material';
+ * import { Download as DownloadIcon } from '@mui/icons-material';
+ *
  * <DownloadButton
  *   file="/docs/manual.pdf"
- *   aria_label="Baixar manual em PDF"
- *   background_color="#1976d2"
+ *   fileName="manual.pdf"
+ *   arialLabel="Baixar manual do produto"
+ *   background="#28a745"
+ *   backgroundHover="#218838"
  *   color="#fff"
- *   border_radius="8px"
- *   width="200px"
+ *   borderRadius="12px"
+ *   boxShadow="0 2px 8px rgba(0,0,0,0.15)"
+ *   width="220px"
+ *   height="44px"
+ *   icon={<DownloadIcon />}
  * >
- *   Baixar Manual
+ *   <Typography variant="button">Baixar Manual</Typography>
  * </DownloadButton>
  * ```
  */
-const DownloadButton = ({ file, download, 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;
-    // Se sua rota de download for algo como /api/files/[file]/download,
-    // você pode ajustar aqui:
-    const downloadHref = `${file}/download`;
-    return (_jsx(ButtonStyled, { href: downloadHref, download: download, width: width, background_color: backgroundColor, background_color_hover: backgroundColorHover, color: color, color_hover: colorHover, border_radius: border_radius, border_color: border_color, padding: padding, margin: margin, "aria-label": aria_label, boxshadow: box_shadow, children: 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;
 //# sourceMappingURL=DownloadButton.js.map

package/dist/components/DownloadButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadButton.js","sourceRoot":"","sources":["../../src/components/DownloadButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,EAAE;IAC/B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC;QACC,kBAAkB;QAClB,wBAAwB;QACxB,OAAO;QACP,aAAa;QACb,SAAS;QACT,eAAe;QACf,cAAc;QACd,aAAa;QACb,OAAO;QACP,QAAQ;QACR,WAAW;KACZ,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC7B,CAAC,CAYA,CAAC,EACC,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,EACL,WAAW,EACX,OAAO,EACP,aAAa,EACb,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,GACV,EAAE,EAAE,CAAC,CAAC;IACL,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,MAAM;IACtB,aAAa,EAAE,MAAM;IACrB,SAAS,EAAE,QAAQ;IACnB,SAAS,EAAE,SAAS;IACpB,eAAe,EAAE,gBAAgB;IACjC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,aAAa,YAAY,EAAE;IACnC,YAAY,EAAE,aAAa;IAC3B,OAAO,EAAE,OAAO;IAChB,MAAM,EAAE,MAAM;IAEd,SAAS,EAAE;QACT,eAAe,EAAE,sBAAsB;QACvC,KAAK,EAAE,WAAW;KACnB;CACF,CAAC,CACH,CAAC;AAuEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,cAAc,GAAkC,CAAC,EACrD,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,EACL,WAAW,EACX,aAAa,GAAG,GAAG,EACnB,YAAY,GAAG,aAAa,EAC5B,UAAU,GAAG,MAAM,EACnB,KAAK,EACL,MAAM,GAAG,GAAG,EACZ,OAAO,GAAG,UAAU,EACpB,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,eAAe,GAAW,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,GAAI,aAAa,CAAC;IAClE,MAAM,oBAAoB,GAAW,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,eAAe,CAAC;IAC/E,MAAM,UAAU,GAAW,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,KAAK,CAAC;IAEhD,oEAAoE;IACpE,0BAA0B;IAC1B,MAAM,YAAY,GAAG,GAAG,IAAI,WAAW,CAAC;IAExC,OAAO,CACL,KAAC,YAAY,IACX,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,eAAe,EACjC,sBAAsB,EAAE,oBAAoB,EAC5C,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,UAAU,EACvB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,gBACF,UAAU,EACtB,SAAS,EAAE,UAAU,YAEpB,QAAQ,GACI,CAChB,CAAC;AAEJ,CAAC,CAAC;AAEF,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;