pipesol-button 1.0.11 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/FormButtonGroup.js +17 -4
- package/dist/components/FormButtonGroup.js.map +1 -1
- package/dist/components/NavigationButton.d.ts +32 -42
- package/dist/components/NavigationButton.js +21 -42
- package/dist/components/NavigationButton.js.map +1 -1
- package/dist/components/StyledButton.d.ts +4 -12
- package/dist/components/StyledButton.js +2 -15
- package/dist/components/StyledButton.js.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/CommonForwardProps.d.ts +1 -0
- package/dist/types/CommonForwardProps.js +14 -0
- package/dist/types/CommonForwardProps.js.map +1 -0
- package/dist/types/style/BorderProps.d.ts +5 -0
- package/dist/types/style/BorderProps.js +2 -0
- package/dist/types/style/BorderProps.js.map +1 -0
- package/dist/types/style/ColorProps.d.ts +6 -0
- package/dist/types/style/ColorProps.js +2 -0
- package/dist/types/style/ColorProps.js.map +1 -0
- package/dist/types/style/CommonStyleProps.d.ts +5 -0
- package/dist/types/style/CommonStyleProps.js +2 -0
- package/dist/types/style/CommonStyleProps.js.map +1 -0
- package/dist/types/style/LayoutProps.d.ts +6 -0
- package/dist/types/style/LayoutProps.js +2 -0
- package/dist/types/style/LayoutProps.js.map +1 -0
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as _jsx,
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { styled } from '@mui/material/styles';
|
|
3
3
|
import { StyledButtonKind } from './StyledButton';
|
|
4
|
-
const
|
|
4
|
+
const ActionsContainerWithDelete = styled('div', {
|
|
5
5
|
shouldForwardProp: (prop) => !['onCancel'].includes(prop),
|
|
6
6
|
})(() => ({
|
|
7
7
|
display: 'grid',
|
|
@@ -10,6 +10,15 @@ const ActionsContainer = styled('div', {
|
|
|
10
10
|
justifyItems: 'flex-start',
|
|
11
11
|
width: '100%',
|
|
12
12
|
}));
|
|
13
|
+
const ActionsContainer = styled('div', {
|
|
14
|
+
shouldForwardProp: (prop) => !['onCancel'].includes(prop),
|
|
15
|
+
})(() => ({
|
|
16
|
+
display: 'flex',
|
|
17
|
+
flexDirection: 'row',
|
|
18
|
+
gap: '16px',
|
|
19
|
+
justifyItems: 'flex-end',
|
|
20
|
+
width: '100%',
|
|
21
|
+
}));
|
|
13
22
|
/**
|
|
14
23
|
* Agrupador de botões "Cancelar" e "Salvar" para uso **dentro** de formulários.
|
|
15
24
|
*
|
|
@@ -55,8 +64,12 @@ const ActionsContainer = styled('div', {
|
|
|
55
64
|
* ```
|
|
56
65
|
*/
|
|
57
66
|
const FormButtonGroup = ({ showDeleteButton = false, onCancel = () => { }, onDelete = () => { }, }) => {
|
|
58
|
-
|
|
59
|
-
|
|
67
|
+
if (showDeleteButton) {
|
|
68
|
+
return (_jsxs(ActionsContainerWithDelete, { onCancel: onCancel, children: [_jsx(StyledButtonKind, { kind: "delete", type: "button", onClick: onDelete, sx: { width: 'auto' }, children: "Deletar" }), _jsx(StyledButtonKind, { kind: "secondary", type: "button", onClick: onCancel, sx: { width: 'auto' }, children: "Cancelar" }), _jsx(StyledButtonKind, { kind: "primary", type: "submit", sx: { width: 'auto' }, children: "Salvar" })] }));
|
|
69
|
+
}
|
|
70
|
+
else {
|
|
71
|
+
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" })] }));
|
|
72
|
+
}
|
|
60
73
|
};
|
|
61
74
|
FormButtonGroup.displayName = 'FormButtonGroup';
|
|
62
75
|
export default FormButtonGroup;
|
|
@@ -1 +1 @@
|
|
|
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;AAQlD,MAAM,
|
|
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;AAQlD,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,YAAY,EAAE,UAAU;IACxB,KAAK,EAAE,MAAM;CACd,CAAC,CAAC,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,eAAe,GAAmC,CAAC,EACvD,gBAAgB,GAAG,KAAK,EACxB,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,aAC5C,KAAC,gBAAgB,IACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,EACjB,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,wBAGJ,EAGnB,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,IACQ,CAC9B,CAAC;IACJ,CAAC;SAEG,CAAC;QAEH,OAAO,CACP,MAAC,gBAAgB,IAAC,QAAQ,EAAE,QAAQ,aAElC,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,CAEpB,CAAC;IAGF,CAAC;AAIH,CAAC,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC;AAChD,eAAe,eAAe,CAAC"}
|
|
@@ -1,64 +1,54 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ButtonKind } from '@/types/ButtonKind';
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* Botão de navegação reutilizável baseado em um link (`<a>`), estilizado com Material UI.
|
|
5
|
+
*
|
|
6
|
+
* Regras de navegação:
|
|
7
|
+
* - Se `url` contiver `http`, o link é tratado como externo e abre em nova aba.
|
|
8
|
+
* - Caso contrário, é tratado como link interno ou âncora.
|
|
9
|
+
*
|
|
10
|
+
* @param {ButtonKind} [kind="none"] Tipo de botão baseado nos tokens do tema.
|
|
11
|
+
* @param {string} url URL ou âncora de destino.
|
|
12
|
+
* @param {string} aria_label Texto para acessibilidade.
|
|
13
|
+
* @param {string} [backgroundColor] Cor de fundo do botão.
|
|
14
|
+
* @param {string} [backgroundColorHover] Cor de fundo no hover.
|
|
15
|
+
* @param {string} [color] Cor do texto.
|
|
16
|
+
* @param {string} [colorHover] Cor do texto no hover.
|
|
17
|
+
* @param {string} [border="none"] Borda do botão.
|
|
18
|
+
* @param {string} [borderRadius="0"] Raio da borda.
|
|
19
|
+
* @param {string} [boxShadow="none"] Sombra do botão.
|
|
20
|
+
* @param {string} width Largura do botão.
|
|
21
|
+
* @param {string} [margin="0"] Margem externa.
|
|
22
|
+
* @param {string} [padding="8px 24px"] Espaçamento interno.
|
|
23
|
+
* @param {React.ReactNode} children Conteúdo interno do botão.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```tsx
|
|
27
|
+
* <NavigationButton
|
|
28
|
+
* kind="primary"
|
|
29
|
+
* url="#contato"
|
|
30
|
+
* aria_label="Ir para contato"
|
|
31
|
+
* width="fit-content"
|
|
32
|
+
* >
|
|
33
|
+
* Fale conosco
|
|
34
|
+
* </NavigationButton>
|
|
35
|
+
* ```
|
|
5
36
|
*/
|
|
6
37
|
interface NavigationButtonProps {
|
|
7
|
-
/**
|
|
8
|
-
* Seleciona o conjunto de tokens do tema.
|
|
9
|
-
* @default "none"
|
|
10
|
-
*/
|
|
11
38
|
kind?: ButtonKind;
|
|
12
|
-
/**
|
|
13
|
-
* URL ou âncora para onde o botão deve navegar.
|
|
14
|
-
* - Se começar com `http`, abre em nova aba.
|
|
15
|
-
* - Caso contrário, é tratado como link interno/âncora.
|
|
16
|
-
*/
|
|
17
39
|
url: string;
|
|
18
|
-
/** Texto para acessibilidade (atributo `aria-label`). */
|
|
19
40
|
aria_label: string;
|
|
20
|
-
/** Cor de fundo padrão do botão (ex: `#1976d2` ou `transparent`). */
|
|
21
41
|
backgroundColor?: string;
|
|
22
|
-
/** Cor de fundo quando o botão é focado/hover. Se não informado, usa a cor padrão. */
|
|
23
42
|
backgroundColorHover?: string;
|
|
24
|
-
/** Cor do texto padrão (ex: `#fff`). */
|
|
25
43
|
color?: string;
|
|
26
|
-
/** Cor do texto no hover. Se não informado, usa a mesma cor padrão. */
|
|
27
44
|
colorHover?: string;
|
|
28
|
-
/**
|
|
29
|
-
* Borda do Botao (1px solid #fff)
|
|
30
|
-
* @default "none"
|
|
31
|
-
*/
|
|
32
45
|
border?: string;
|
|
33
|
-
/**
|
|
34
|
-
* Raio de borda (ex: `8px`, `50%`).
|
|
35
|
-
* @default "0"
|
|
36
|
-
*/
|
|
37
46
|
borderRadius?: string;
|
|
38
|
-
/**
|
|
39
|
-
* Sombra CSS (ex: `0 2px 4px rgba(0,0,0,0.2)`).
|
|
40
|
-
* @default "none"
|
|
41
|
-
*/
|
|
42
47
|
boxShadow?: string;
|
|
43
|
-
/** Largura do botão (ex: `200px`, `100%`). */
|
|
44
48
|
width: string;
|
|
45
|
-
/**
|
|
46
|
-
* Margem externa.
|
|
47
|
-
* @default "0"
|
|
48
|
-
*/
|
|
49
49
|
margin?: string;
|
|
50
|
-
/**
|
|
51
|
-
* Padding interno.
|
|
52
|
-
* @default "8px 24px"
|
|
53
|
-
*/
|
|
54
50
|
padding?: string;
|
|
55
|
-
/** Conteúdo interno (texto ou elementos JSX). */
|
|
56
51
|
children: React.ReactNode;
|
|
57
52
|
}
|
|
58
|
-
/**
|
|
59
|
-
* Botão de navegação reutilizável.
|
|
60
|
-
* Cria um link estilizado que pode ser usado para redirecionar
|
|
61
|
-
* para páginas externas ou seções internas.
|
|
62
|
-
*/
|
|
63
53
|
declare const NavigationButton: React.FC<NavigationButtonProps>;
|
|
64
54
|
export default NavigationButton;
|
|
@@ -1,65 +1,44 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { styled } from '@mui/material/styles';
|
|
4
|
+
import { COMMON_STYLE_FORWARD_PROPS } from '@/types/CommonForwardProps';
|
|
4
5
|
const ButtonStyled = styled('a', {
|
|
5
|
-
shouldForwardProp: (prop) => ![
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
'backgroundColorHover',
|
|
9
|
-
'colorText',
|
|
10
|
-
'colorHover',
|
|
11
|
-
'padding',
|
|
12
|
-
'borderRadius',
|
|
13
|
-
'border',
|
|
14
|
-
'width',
|
|
15
|
-
'margin',
|
|
16
|
-
'boxShadow',
|
|
17
|
-
].includes(prop),
|
|
18
|
-
})(({ theme, kind, backgroundColor, backgroundColorHover, colorText, colorHover, padding, borderRadius, border, width, margin, boxShadow, }) => {
|
|
19
|
-
const tokens = kind === "primary"
|
|
6
|
+
shouldForwardProp: (prop) => !['kind', ...COMMON_STYLE_FORWARD_PROPS].includes(prop),
|
|
7
|
+
})(({ theme, kind, background, backgroundHover, colorText, colorHover, padding, borderRadius, border, width, margin, boxShadow, }) => {
|
|
8
|
+
const tokens = kind === 'primary'
|
|
20
9
|
? theme.palette.custom.primaryButton
|
|
21
|
-
: kind ===
|
|
10
|
+
: kind === 'secondary'
|
|
22
11
|
? theme.palette.custom.secondaryButton
|
|
23
|
-
: kind ===
|
|
12
|
+
: kind === 'delete'
|
|
24
13
|
? theme.palette.custom.deleteButton
|
|
25
14
|
: undefined;
|
|
26
15
|
return {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
padding:
|
|
30
|
-
margin: margin !== null && margin !== void 0 ? margin : "0",
|
|
31
|
-
// Visual
|
|
16
|
+
width: width !== null && width !== void 0 ? width : 'auto',
|
|
17
|
+
margin: margin !== null && margin !== void 0 ? margin : '0',
|
|
18
|
+
padding: tokens ? tokens.padding : padding,
|
|
32
19
|
borderRadius: tokens ? tokens.borderRadius : borderRadius,
|
|
33
20
|
boxShadow: tokens ? tokens.boxShadow : boxShadow,
|
|
34
|
-
border
|
|
21
|
+
border,
|
|
35
22
|
textDecoration: 'none',
|
|
36
23
|
textTransform: 'none',
|
|
37
24
|
cursor: 'pointer',
|
|
38
25
|
textAlign: 'center',
|
|
39
|
-
|
|
40
|
-
background: tokens ? tokens.background : backgroundColor,
|
|
26
|
+
background: tokens ? tokens.background : background,
|
|
41
27
|
color: tokens ? tokens.color : colorText,
|
|
42
|
-
|
|
43
|
-
background: tokens
|
|
44
|
-
|
|
28
|
+
'&:hover': {
|
|
29
|
+
background: tokens
|
|
30
|
+
? tokens.backgroundHover
|
|
31
|
+
: backgroundHover !== null && backgroundHover !== void 0 ? backgroundHover : background,
|
|
32
|
+
color: tokens ? tokens.colorHover : colorHover !== null && colorHover !== void 0 ? colorHover : colorText,
|
|
45
33
|
},
|
|
46
34
|
};
|
|
47
35
|
});
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
* para páginas externas ou seções internas.
|
|
52
|
-
*/
|
|
53
|
-
const NavigationButton = ({ url, kind = "none", aria_label, backgroundColor, backgroundColorHover, color, colorHover, borderRadius = '0', border = 'none', boxShadow = 'none', width, margin = '0', padding = '8px 24px', children, }) => {
|
|
54
|
-
const marginButton = margin;
|
|
55
|
-
if (url.indexOf('http') !== -1) {
|
|
56
|
-
// Link externo: abre em nova aba
|
|
57
|
-
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 }));
|
|
58
|
-
}
|
|
59
|
-
else {
|
|
60
|
-
// Link interno ou âncora
|
|
61
|
-
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 }));
|
|
36
|
+
const NavigationButton = ({ url, kind = 'none', aria_label, backgroundColor, backgroundColorHover, color, colorHover, borderRadius = '0', border = 'none', boxShadow = 'none', width, margin = '0', padding = '8px 24px', children, }) => {
|
|
37
|
+
if (url.includes('http')) {
|
|
38
|
+
return (_jsx(ButtonStyled, { kind: kind, href: url, width: width, background: backgroundColor, backgroundHover: backgroundColorHover, color: color, colorHover: colorHover, borderRadius: borderRadius, border: border, padding: padding, margin: margin, "aria-label": aria_label, target: "_blank", rel: "noopener noreferrer", boxShadow: boxShadow, children: children }));
|
|
62
39
|
}
|
|
40
|
+
return (_jsx(ButtonStyled, { kind: kind, href: url, width: width, background: backgroundColor, backgroundHover: backgroundColorHover, color: color, colorHover: colorHover, borderRadius: borderRadius, border: border, padding: padding, margin: margin, "aria-label": aria_label, boxShadow: boxShadow, children: children }));
|
|
63
41
|
};
|
|
42
|
+
NavigationButton.displayName = 'NavigationButton';
|
|
64
43
|
export default NavigationButton;
|
|
65
44
|
//# sourceMappingURL=NavigationButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationButton.js","sourceRoot":"","sources":["../../src/components/NavigationButton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"NavigationButton.js","sourceRoot":"","sources":["../../src/components/NavigationButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,14 +1,6 @@
|
|
|
1
1
|
import { ButtonKind } from "@/types/ButtonKind";
|
|
2
|
-
|
|
2
|
+
import { CommonStyleProps } from "@/types/style/CommonStyleProps";
|
|
3
|
+
export interface ButtonStyleProps extends CommonStyleProps {
|
|
3
4
|
kind: ButtonKind;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
padding?: string;
|
|
7
|
-
margin?: string;
|
|
8
|
-
boxShadow?: string;
|
|
9
|
-
background?: string;
|
|
10
|
-
backgroundHover?: string;
|
|
11
|
-
colorText?: string;
|
|
12
|
-
colorHover?: string;
|
|
13
|
-
borderRadius?: string;
|
|
14
|
-
}, {}, {}>;
|
|
5
|
+
}
|
|
6
|
+
export declare const StyledButtonKind: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "children" | "sx" | "className" | "tabIndex" | "classes" | "href" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "loading" | "loadingIndicator" | "size" | "disableElevation" | "endIcon" | "fullWidth" | "loadingPosition" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & ButtonStyleProps, {}, {}>;
|
|
@@ -1,20 +1,7 @@
|
|
|
1
|
+
import { COMMON_STYLE_FORWARD_PROPS } from "@/types/CommonForwardProps";
|
|
1
2
|
import { Button, styled } from "@mui/material";
|
|
2
3
|
export const StyledButtonKind = styled(Button, {
|
|
3
|
-
shouldForwardProp: (prop) => ![
|
|
4
|
-
"kind",
|
|
5
|
-
"width",
|
|
6
|
-
"height",
|
|
7
|
-
"padding",
|
|
8
|
-
"margin",
|
|
9
|
-
"background",
|
|
10
|
-
"backgroundHover",
|
|
11
|
-
"colorText",
|
|
12
|
-
"colorHover",
|
|
13
|
-
"borderRadius",
|
|
14
|
-
"boxShadow",
|
|
15
|
-
"text",
|
|
16
|
-
"icon",
|
|
17
|
-
].includes(prop),
|
|
4
|
+
shouldForwardProp: (prop) => !["kind", ...COMMON_STYLE_FORWARD_PROPS].includes(prop),
|
|
18
5
|
})(({ theme, kind = "primary", width, height, padding, margin, background, backgroundHover, colorText, colorHover, borderRadius, boxShadow }) => {
|
|
19
6
|
const tokens = kind === "primary"
|
|
20
7
|
? theme.palette.custom.primaryButton
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StyledButton.js","sourceRoot":"","sources":["../../src/components/StyledButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"StyledButton.js","sourceRoot":"","sources":["../../src/components/StyledButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AAExE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAM/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE;IAC7C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,GAAG,0BAA0B,CAAE,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC/F,CAAC,CAEA,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE;IAE5I,MAAM,MAAM,GACV,IAAI,KAAK,SAAS;QAChB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,aAAa;QACpC,CAAC,CAAC,IAAI,KAAK,WAAW;YACpB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe;YACtC,CAAC,CAAC,IAAI,KAAK,QAAQ;gBACjB,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY;gBACnC,CAAC,CAAC,SAAS,CAAC;IAEpB,OAAO;QACL,YAAY;QACZ,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO;QAE1C,SAAS;QACT,aAAa,EAAE,MAAM;QACrB,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY;QACzD,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QAEhD,QAAQ;QACR,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU;QACnD,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;QAExC,SAAS,EAAE;YACT,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,CAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,UAAU,CAAC;YAC9E,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,SAAS,CAAC;YAC7D,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;SACjD;QAED,kBAAkB;QAClB,gBAAgB,EAAE;YAChB,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;YACnC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ;YAClC,SAAS,EAAE,MAAM;SAClB;KACF,CAAC;AACN,CAAC,CAAC,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -8,4 +8,6 @@ export { default as WhatsAppIcon } from './components/WhatsAppIcon';
|
|
|
8
8
|
export { default as ActionButton } from "./components/ActionButton";
|
|
9
9
|
export { default as FormButtonGroup } from "./components/FormButtonGroup";
|
|
10
10
|
export type { ButtonKind } from "./types/ButtonKind";
|
|
11
|
+
export type { CommonStyleProps } from "./types/style/CommonStyleProps";
|
|
12
|
+
export { COMMON_STYLE_FORWARD_PROPS } from './types/CommonForwardProps';
|
|
11
13
|
export * from './components/StyledButton';
|
package/dist/index.js
CHANGED
|
@@ -7,5 +7,6 @@ export { default as WhatsAppButton } from './components/WhatsAppButton';
|
|
|
7
7
|
export { default as WhatsAppIcon } from './components/WhatsAppIcon';
|
|
8
8
|
export { default as ActionButton } from "./components/ActionButton";
|
|
9
9
|
export { default as FormButtonGroup } from "./components/FormButtonGroup";
|
|
10
|
+
export { COMMON_STYLE_FORWARD_PROPS } from './types/CommonForwardProps';
|
|
10
11
|
export * from './components/StyledButton';
|
|
11
12
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAC,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAC,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAC,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,cAAc,EAAC,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAC,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAI1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,4BAA4B,CAAC;AACxE,cAAc,2BAA2B,CAAC"}
|