@pedidopago/ui 1.3.3 → 1.3.4
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/Alert/index.d.ts.map +1 -1
- package/dist/components/Alert/index.js +2 -3
- package/dist/components/Alert/styles.d.ts +1 -1
- package/dist/components/Alert/styles.d.ts.map +1 -1
- package/dist/components/Alert/styles.js +1 -3
- package/dist/components/Alert/types.d.ts +1 -1
- package/dist/components/Alert/types.d.ts.map +1 -1
- package/dist/components/Button/Button.test.js +1 -1
- package/dist/components/Button/index.d.ts +3 -4
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +14 -18
- package/dist/components/Button/styles.d.ts +3 -3
- package/dist/components/Button/styles.d.ts.map +1 -1
- package/dist/components/Button/styles.js +42 -43
- package/dist/components/Button/types.d.ts +10 -13
- package/dist/components/Button/types.d.ts.map +1 -1
- package/dist/components/Input/styles.d.ts.map +1 -1
- package/dist/components/Input/styles.js +2 -2
- package/dist/components/Modal/ModalExample.d.ts +4 -0
- package/dist/components/Modal/ModalExample.d.ts.map +1 -0
- package/dist/components/Modal/ModalExample.js +66 -0
- package/dist/components/Modal/index.d.ts +1 -1
- package/dist/components/Modal/index.d.ts.map +1 -1
- package/dist/components/Modal/index.js +11 -13
- package/dist/components/Modal/modal.test.js +11 -9
- package/dist/components/Pagination/index.d.ts.map +1 -1
- package/dist/components/Pagination/index.js +23 -10
- package/dist/components/Pagination/styles.js +3 -2
- package/dist/components/ReactPortal/index.d.ts +8 -0
- package/dist/components/ReactPortal/index.d.ts.map +1 -0
- package/dist/components/ReactPortal/index.js +58 -0
- package/dist/components/ReactPortal/reactPortal.test.d.ts +2 -0
- package/dist/components/ReactPortal/reactPortal.test.d.ts.map +1 -0
- package/dist/components/ReactPortal/reactPortal.test.js +26 -0
- package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.d.ts +2 -0
- package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.d.ts.map +1 -0
- package/dist/components/ReactPortal/utils/createWrapperAndApprendToBody.js +13 -0
- package/dist/components/Select/components/OptionsSelect/index.d.ts +4 -0
- package/dist/components/Select/components/OptionsSelect/index.d.ts.map +1 -0
- package/dist/components/Select/components/OptionsSelect/index.js +91 -0
- package/dist/components/Select/components/OptionsSelect/styles.d.ts +265 -0
- package/dist/components/Select/components/OptionsSelect/styles.d.ts.map +1 -0
- package/dist/components/Select/components/OptionsSelect/styles.js +32 -0
- package/dist/components/Select/components/OptionsSelect/types.d.ts +16 -0
- package/dist/components/Select/components/OptionsSelect/types.d.ts.map +1 -0
- package/dist/components/Select/components/OptionsSelect/types.js +1 -0
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +66 -37
- package/dist/components/Select/select.test.js +14 -0
- package/dist/components/Select/styles.d.ts +5 -7
- package/dist/components/Select/styles.d.ts.map +1 -1
- package/dist/components/Select/styles.js +26 -16
- package/dist/components/Select/types.d.ts +7 -2
- package/dist/components/Select/types.d.ts.map +1 -1
- package/dist/components/Table/styles.d.ts.map +1 -1
- package/dist/components/Table/styles.js +8 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +9 -0
- package/package.json +2 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAa3B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAa3B,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAoCzB,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -28,7 +28,7 @@ var Alert = function Alert(_ref) {
|
|
|
28
28
|
variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
|
|
29
29
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.StyledAlertContainer, {
|
|
30
30
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledAlertWrapper, {
|
|
31
|
-
haveContent: !!content,
|
|
31
|
+
haveContent: !!content && !!title,
|
|
32
32
|
variant: variant,
|
|
33
33
|
type: type,
|
|
34
34
|
maxWidth: maxWidth,
|
|
@@ -41,8 +41,7 @@ var Alert = function Alert(_ref) {
|
|
|
41
41
|
size: variant === 'outlined' ? '1.375rem' : '2rem'
|
|
42
42
|
})
|
|
43
43
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.StyledColumn, {
|
|
44
|
-
|
|
45
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
|
|
44
|
+
children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
|
|
46
45
|
fontSize: "xs",
|
|
47
46
|
fontWeight: "bold",
|
|
48
47
|
children: title
|
|
@@ -17,7 +17,7 @@ export declare const StyledIconBox: import("@emotion/styled").StyledComponent<{
|
|
|
17
17
|
export declare const StyledColumn: import("@emotion/styled").StyledComponent<{
|
|
18
18
|
theme?: import("@emotion/react").Theme | undefined;
|
|
19
19
|
as?: import("react").ElementType<any> | undefined;
|
|
20
|
-
}
|
|
20
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
21
21
|
export declare const StyledCloseIcon: import("@emotion/styled").StyledComponent<{
|
|
22
22
|
theme?: import("@emotion/react").Theme | undefined;
|
|
23
23
|
as?: import("react").ElementType<any> | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,oBAAoB;;;yGAEhC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,oBAAoB;;;yGAEhC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;wHAsB7B,CAAC;AAEH,eAAO,MAAM,aAAa;;;;iBAA4C,OAAO;yGA0B3E,CAAC;AAEH,eAAO,MAAM,YAAY;;;yGASxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAS3B,CAAC"}
|
|
@@ -22,10 +22,8 @@ var StyledAlertContainer = _styled.default.div(_templateObject || (_templateObje
|
|
|
22
22
|
exports.StyledAlertContainer = StyledAlertContainer;
|
|
23
23
|
|
|
24
24
|
var StyledAlertWrapper = _styled.default.div(function (props) {
|
|
25
|
-
var buttonPrimaryColor = props.type !== 'default' && props.type ? props.theme.colors[props.type].default : props.theme.colors.neutral.neutral3;
|
|
26
|
-
var buttonSecondaryColor = props.type !== 'default' && props.type ? props.theme.colorMode === 'dark' ? props.theme.colors[props.type].dark : props.theme.colors[props.type].blurred : props.theme.colors.neutral.neutral1;
|
|
27
25
|
var secondaryColor = props.type !== 'default' && props.type ? props.theme.colorMode === 'dark' ? props.theme.colors[props.type].dark : props.theme.colors[props.type].blurred : props.theme.colorMode === 'dark' ? props.theme.colors.neutral.neutral6 : props.theme.colors.neutral.neutral1;
|
|
28
|
-
return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: ", ";\n padding: 1rem;\n gap: 1rem;\n border-radius: 8px;\n width: 100%;\n background-color: ", ";\n border: ", ";\n color: ", ";\n max-width: ", ";\n
|
|
26
|
+
return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: ", ";\n padding: 1rem;\n gap: 1rem;\n border-radius: 8px;\n width: 100%;\n background-color: ", ";\n border: ", ";\n color: ", ";\n max-width: ", ";\n "])), props.haveContent ? 'flex-start' : 'center', props.variant === 'outlined' ? 'transparent' : secondaryColor, props.variant === 'outlined' ? "2px solid ".concat(secondaryColor, ";") : '', props.variant === 'outlined' ? props.theme.colors.neutral.neutral4 : '', props.maxWidth ? "".concat(props.maxWidth, "px") : '');
|
|
29
27
|
});
|
|
30
28
|
|
|
31
29
|
exports.StyledAlertWrapper = StyledAlertWrapper;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,oBAAY,UAAU,GAAG;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC;IAChF;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,oBAAY,UAAU,GAAG;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7C;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC;IAChF;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC7C,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,CAAC;IAChF,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC"}
|
|
@@ -102,7 +102,7 @@ describe('Button', function () {
|
|
|
102
102
|
children: "Click Me"
|
|
103
103
|
}));
|
|
104
104
|
expect(_react.screen.getByRole('button')).toBeDisabled();
|
|
105
|
-
expect(_react.screen.getByRole('button')).toHaveStyle('cursor:
|
|
105
|
+
expect(_react.screen.getByRole('button')).not.toHaveStyle('cursor: pointer');
|
|
106
106
|
});
|
|
107
107
|
it('should render a ghost variant button', function () {
|
|
108
108
|
(0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
export default Button;
|
|
1
|
+
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
+
import { ButtonProps } from './types';
|
|
3
|
+
export default function Button({ children, leftIcon, rightIcon, isLoading, variant, bgColor, size, fullWidth, textColor, type, iconColor, ...props }: ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
|
|
5
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAM7C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAiB,EACjB,OAAY,EACZ,IAAW,EACX,SAAS,EACT,SAAc,EACd,IAAe,EACf,SAAc,EACd,GAAG,KAAK,EACT,EAAE,WAAW,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,eAoEvD"}
|
|
@@ -3,18 +3,18 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default =
|
|
7
|
-
|
|
8
|
-
var _Icon = _interopRequireDefault(require("../Icon"));
|
|
6
|
+
exports.default = Button;
|
|
9
7
|
|
|
10
8
|
var _index = require("../../shared/theme/index");
|
|
11
9
|
|
|
12
10
|
var _getColorValue = require("../../utils/getColorValue");
|
|
13
11
|
|
|
14
|
-
var
|
|
12
|
+
var _Icon = _interopRequireDefault(require("../Icon"));
|
|
15
13
|
|
|
16
14
|
var _Skeleton = _interopRequireDefault(require("../Skeleton"));
|
|
17
15
|
|
|
16
|
+
var _styles = require("./styles");
|
|
17
|
+
|
|
18
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
19
19
|
|
|
20
20
|
var _excluded = ["children", "leftIcon", "rightIcon", "isLoading", "variant", "bgColor", "size", "fullWidth", "textColor", "type", "iconColor"];
|
|
@@ -31,7 +31,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
|
|
|
31
31
|
|
|
32
32
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
33
33
|
|
|
34
|
-
|
|
34
|
+
function Button(_ref) {
|
|
35
35
|
var children = _ref.children,
|
|
36
36
|
leftIcon = _ref.leftIcon,
|
|
37
37
|
rightIcon = _ref.rightIcon,
|
|
@@ -94,15 +94,14 @@ var Button = function Button(_ref) {
|
|
|
94
94
|
});
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
}
|
|
97
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ButtonContainer, _objectSpread(_objectSpread({
|
|
98
|
+
bgColor: parsedBgColor,
|
|
99
|
+
textColor: parsedTextColor,
|
|
100
|
+
fullWidth: fullWidth,
|
|
101
|
+
isLoading: isLoading,
|
|
102
|
+
variant: variant,
|
|
103
|
+
size: size,
|
|
104
|
+
type: type
|
|
106
105
|
}, props), {}, {
|
|
107
106
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.IconContainer, {
|
|
108
107
|
children: [leftIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.IconWrapper, {
|
|
@@ -122,7 +121,4 @@ var Button = function Button(_ref) {
|
|
|
122
121
|
})]
|
|
123
122
|
})
|
|
124
123
|
}));
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
var _default = Button;
|
|
128
|
-
exports.default = _default;
|
|
124
|
+
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
3
|
-
export declare const
|
|
2
|
+
import { ButtonProps } from './types';
|
|
3
|
+
export declare const ButtonContainer: import("@emotion/styled").StyledComponent<{
|
|
4
4
|
theme?: import("@emotion/react").Theme | undefined;
|
|
5
5
|
as?: import("react").ElementType<any> | undefined;
|
|
6
|
-
} &
|
|
6
|
+
} & ButtonProps, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
|
|
7
7
|
export declare const IconContainer: import("@emotion/styled").StyledComponent<{
|
|
8
8
|
theme?: import("@emotion/react").Theme | undefined;
|
|
9
9
|
as?: import("react").ElementType<any> | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAGtC,eAAO,MAAM,eAAe;;;mIAmI3B,CAAC;AAEF,eAAO,MAAM,aAAa;;;yGAKzB,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAIvB,CAAC"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.IconWrapper = exports.IconContainer = exports.
|
|
6
|
+
exports.IconWrapper = exports.IconContainer = exports.ButtonContainer = void 0;
|
|
7
7
|
|
|
8
8
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
9
9
|
|
|
@@ -19,104 +19,103 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
|
|
|
19
19
|
|
|
20
20
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var ButtonContainer = _styled.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-family: inherit;\n font-weight: ", ";\n font-size: ", ";\n border-radius: 8px;\n border: 0px;\n cursor: pointer;\n padding-inline: 24px;\n --button-brightness: brightness(0.85);\n\n transition: all 0.15s ease-in-out;\n\n color: ", ";\n\n background-color: ", ";\n\n height: ", ";\n\n width: ", ";\n\n &:disabled {\n filter: opacity(0.5);\n cursor: default;\n }\n\n ", "\n\n @media screen and (min-width: ", ") {\n width: ", ";\n }\n\n @media screen and (min-width: ", ") {\n width: ", ";\n }\n\n @media screen and (min-width: ", ") {\n width: ", ";\n }\n\n @media screen and (min-width: ", ") {\n width: ", ";\n }\n"])), function (_ref) {
|
|
23
23
|
var theme = _ref.theme;
|
|
24
24
|
return theme.fontWeight[600];
|
|
25
25
|
}, function (_ref2) {
|
|
26
26
|
var theme = _ref2.theme;
|
|
27
27
|
return theme.fontSizes.xs;
|
|
28
28
|
}, function (_ref3) {
|
|
29
|
-
var
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
return (_button$textColor = button.textColor) !== null && _button$textColor !== void 0 ? _button$textColor : baseColor;
|
|
29
|
+
var theme = _ref3.theme,
|
|
30
|
+
textColor = _ref3.textColor,
|
|
31
|
+
bgColor = _ref3.bgColor;
|
|
32
|
+
var baseColor = (0, _invertColor.invertColor)(textColor || bgColor || theme.colors.primary.default, true);
|
|
33
|
+
return textColor !== null && textColor !== void 0 ? textColor : baseColor;
|
|
35
34
|
}, function (_ref4) {
|
|
36
|
-
var
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
theme = _ref4.theme;
|
|
40
|
-
return (_button$bgColor = button.bgColor) !== null && _button$bgColor !== void 0 ? _button$bgColor : theme.colors.primary.default;
|
|
35
|
+
var theme = _ref4.theme,
|
|
36
|
+
bgColor = _ref4.bgColor;
|
|
37
|
+
return bgColor !== null && bgColor !== void 0 ? bgColor : theme.colors.primary.default;
|
|
41
38
|
}, function (_ref5) {
|
|
42
|
-
var
|
|
43
|
-
|
|
44
|
-
if (
|
|
39
|
+
var theme = _ref5.theme,
|
|
40
|
+
size = _ref5.size;
|
|
41
|
+
if (size) return theme.buttonSize[size];
|
|
45
42
|
return theme.buttonSize.md;
|
|
46
43
|
}, function (_ref6) {
|
|
47
|
-
var
|
|
44
|
+
var fullWidth = _ref6.fullWidth;
|
|
48
45
|
|
|
49
|
-
if (
|
|
50
|
-
if (_typeof(
|
|
51
|
-
return
|
|
46
|
+
if (fullWidth) {
|
|
47
|
+
if (_typeof(fullWidth) === 'object' && fullWidth !== undefined) {
|
|
48
|
+
return fullWidth.base && '100%';
|
|
52
49
|
}
|
|
53
50
|
|
|
54
51
|
return '100%';
|
|
55
52
|
}
|
|
56
53
|
}, function (_ref7) {
|
|
57
|
-
var
|
|
58
|
-
|
|
54
|
+
var theme = _ref7.theme,
|
|
55
|
+
variant = _ref7.variant,
|
|
56
|
+
textColor = _ref7.textColor,
|
|
57
|
+
bgColor = _ref7.bgColor;
|
|
59
58
|
|
|
60
|
-
switch (
|
|
59
|
+
switch (variant) {
|
|
61
60
|
case 'solid':
|
|
62
61
|
return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &:is(&:hover, &:focus):not(:disabled) {\n box-shadow: inset 0 0 40px 40px rgba(0, 0, 0, 0.2);\n }\n "])));
|
|
63
62
|
|
|
64
63
|
case 'outline':
|
|
65
|
-
return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: transparent;\n color: ", ";\n border: 3px ", " solid;\n box-shadow: none;\n &:is(&:hover, &:focus):not(:disabled) {\n filter: var(--button-brightness);\n }\n "])),
|
|
64
|
+
return (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: transparent;\n color: ", ";\n border: 3px ", " solid;\n box-shadow: none;\n &:is(&:hover, &:focus):not(:disabled) {\n filter: var(--button-brightness);\n }\n "])), textColor || bgColor || theme.colors.primary.default, bgColor || textColor || theme.colors.primary.default);
|
|
66
65
|
|
|
67
66
|
case 'ghost':
|
|
68
|
-
return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding-inline: 0;\n background-color: transparent;\n color: ", ";\n &:is(&:hover, &:focus):not(:disabled) {\n filter: var(--button-brightness);\n }\n "])),
|
|
67
|
+
return (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding-inline: 0;\n background-color: transparent;\n color: ", ";\n &:is(&:hover, &:focus):not(:disabled) {\n filter: var(--button-brightness);\n }\n "])), bgColor || textColor || theme.colors.primary.default);
|
|
69
68
|
|
|
70
69
|
case 'link':
|
|
71
|
-
return (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding-inline: 0;\n text-decoration: underline;\n background-color: transparent;\n color: ", ";\n &:is(&:hover, &:focus):not(:disabled) {\n filter: var(--button-brightness);\n }\n "])),
|
|
70
|
+
return (0, _react.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding-inline: 0;\n text-decoration: underline;\n background-color: transparent;\n color: ", ";\n &:is(&:hover, &:focus):not(:disabled) {\n filter: var(--button-brightness);\n }\n "])), bgColor || textColor || theme.colors.primary.default);
|
|
72
71
|
}
|
|
73
72
|
}, function (_ref8) {
|
|
74
73
|
var theme = _ref8.theme;
|
|
75
74
|
return theme.breakpoints.sm;
|
|
76
75
|
}, function (_ref9) {
|
|
77
|
-
var
|
|
76
|
+
var fullWidth = _ref9.fullWidth;
|
|
78
77
|
|
|
79
|
-
if (_typeof(
|
|
80
|
-
var widthWasNotSet =
|
|
78
|
+
if (_typeof(fullWidth) === 'object') {
|
|
79
|
+
var widthWasNotSet = fullWidth.sm === undefined;
|
|
81
80
|
if (widthWasNotSet) return;
|
|
82
|
-
return
|
|
81
|
+
return fullWidth.sm ? '100%' : 'fit-content';
|
|
83
82
|
}
|
|
84
83
|
}, function (_ref10) {
|
|
85
84
|
var theme = _ref10.theme;
|
|
86
85
|
return theme.breakpoints.md;
|
|
87
86
|
}, function (_ref11) {
|
|
88
|
-
var
|
|
87
|
+
var fullWidth = _ref11.fullWidth;
|
|
89
88
|
|
|
90
|
-
if (_typeof(
|
|
91
|
-
var widthWasNotSet =
|
|
89
|
+
if (_typeof(fullWidth) === 'object') {
|
|
90
|
+
var widthWasNotSet = fullWidth.md === undefined;
|
|
92
91
|
if (widthWasNotSet) return;
|
|
93
|
-
return
|
|
92
|
+
return fullWidth.md ? '100%' : 'fit-content';
|
|
94
93
|
}
|
|
95
94
|
}, function (_ref12) {
|
|
96
95
|
var theme = _ref12.theme;
|
|
97
96
|
return theme.breakpoints.lg;
|
|
98
97
|
}, function (_ref13) {
|
|
99
|
-
var
|
|
98
|
+
var fullWidth = _ref13.fullWidth;
|
|
100
99
|
|
|
101
|
-
if (_typeof(
|
|
102
|
-
var widthWasNotSet =
|
|
100
|
+
if (_typeof(fullWidth) === 'object') {
|
|
101
|
+
var widthWasNotSet = fullWidth.lg === undefined;
|
|
103
102
|
if (widthWasNotSet) return;
|
|
104
|
-
return
|
|
103
|
+
return fullWidth.lg ? '100%' : 'fit-content';
|
|
105
104
|
}
|
|
106
105
|
}, function (_ref14) {
|
|
107
106
|
var theme = _ref14.theme;
|
|
108
107
|
return theme.breakpoints.xl;
|
|
109
108
|
}, function (_ref15) {
|
|
110
|
-
var
|
|
109
|
+
var fullWidth = _ref15.fullWidth;
|
|
111
110
|
|
|
112
|
-
if (_typeof(
|
|
113
|
-
var widthWasNotSet =
|
|
111
|
+
if (_typeof(fullWidth) === 'object') {
|
|
112
|
+
var widthWasNotSet = fullWidth.xl === undefined;
|
|
114
113
|
if (widthWasNotSet) return;
|
|
115
|
-
return
|
|
114
|
+
return fullWidth.xl ? '100%' : 'fit-content';
|
|
116
115
|
}
|
|
117
116
|
});
|
|
118
117
|
|
|
119
|
-
exports.
|
|
118
|
+
exports.ButtonContainer = ButtonContainer;
|
|
120
119
|
|
|
121
120
|
var IconContainer = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 0.45em;\n"])));
|
|
122
121
|
|
|
@@ -11,14 +11,14 @@ declare type responsivePattern<T = any> = {
|
|
|
11
11
|
xxl?: T;
|
|
12
12
|
};
|
|
13
13
|
declare type sizeOptions = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
14
|
-
export interface
|
|
14
|
+
export interface ButtonProps {
|
|
15
15
|
/**
|
|
16
16
|
* The button's properties change making it not clickable and changing it's color.
|
|
17
17
|
*
|
|
18
18
|
* @default 'solid'
|
|
19
19
|
* @example 'solid' | 'outline' | 'ghost' | 'link'
|
|
20
20
|
* @type buttonVariant
|
|
21
|
-
* @memberof
|
|
21
|
+
* @memberof ButtonProps
|
|
22
22
|
*/
|
|
23
23
|
disabled?: boolean;
|
|
24
24
|
/**
|
|
@@ -27,7 +27,7 @@ export interface IButtonProps {
|
|
|
27
27
|
*
|
|
28
28
|
* @default ''
|
|
29
29
|
* @type IconName
|
|
30
|
-
* @memberof
|
|
30
|
+
* @memberof ButtonProps
|
|
31
31
|
*/
|
|
32
32
|
leftIcon?: IconName;
|
|
33
33
|
/**
|
|
@@ -37,7 +37,7 @@ export interface IButtonProps {
|
|
|
37
37
|
*
|
|
38
38
|
* @default ''
|
|
39
39
|
* @type IconName
|
|
40
|
-
* @memberof
|
|
40
|
+
* @memberof ButtonProps
|
|
41
41
|
*/
|
|
42
42
|
rightIcon?: IconName;
|
|
43
43
|
/**
|
|
@@ -45,7 +45,7 @@ export interface IButtonProps {
|
|
|
45
45
|
*
|
|
46
46
|
* @default false
|
|
47
47
|
* @type boolean
|
|
48
|
-
* @memberof
|
|
48
|
+
* @memberof ButtonProps
|
|
49
49
|
* @example true
|
|
50
50
|
*/
|
|
51
51
|
isLoading?: boolean;
|
|
@@ -54,7 +54,7 @@ export interface IButtonProps {
|
|
|
54
54
|
*
|
|
55
55
|
* @default 'md'
|
|
56
56
|
* @type sizeOptions
|
|
57
|
-
* @memberof
|
|
57
|
+
* @memberof ButtonProps
|
|
58
58
|
* @example 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
|
59
59
|
*/
|
|
60
60
|
size?: sizeOptions;
|
|
@@ -64,7 +64,7 @@ export interface IButtonProps {
|
|
|
64
64
|
* @default 'solid'
|
|
65
65
|
* @example 'solid' | 'outline' | 'ghost' | 'link'
|
|
66
66
|
* @type buttonVariant
|
|
67
|
-
* @memberof
|
|
67
|
+
* @memberof ButtonProps
|
|
68
68
|
*/
|
|
69
69
|
variant?: buttonVariant;
|
|
70
70
|
/**
|
|
@@ -73,7 +73,7 @@ export interface IButtonProps {
|
|
|
73
73
|
* @default 'primary'
|
|
74
74
|
* @example 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'
|
|
75
75
|
* @type buttonColor
|
|
76
|
-
* @memberof
|
|
76
|
+
* @memberof ButtonProps
|
|
77
77
|
*/
|
|
78
78
|
bgColor?: buttonColor;
|
|
79
79
|
iconColor?: GlobalColorsProps | string;
|
|
@@ -85,7 +85,7 @@ export interface IButtonProps {
|
|
|
85
85
|
* @example { base: true, sm: false', md: false }
|
|
86
86
|
* @example { base: 'md', md: 'xl' }
|
|
87
87
|
* @type boolean | responsivePattern<boolean>
|
|
88
|
-
* @memberof
|
|
88
|
+
* @memberof ButtonProps
|
|
89
89
|
*/
|
|
90
90
|
fullWidth?: boolean | responsivePattern<boolean>;
|
|
91
91
|
/**
|
|
@@ -94,12 +94,9 @@ export interface IButtonProps {
|
|
|
94
94
|
* @default 'white'
|
|
95
95
|
* @example 'white' | 'black'
|
|
96
96
|
* @type string
|
|
97
|
-
* @memberof
|
|
97
|
+
* @memberof ButtonProps
|
|
98
98
|
*/
|
|
99
99
|
textColor?: buttonColor;
|
|
100
100
|
}
|
|
101
|
-
export declare type StyledMapping = {
|
|
102
|
-
button: IButtonProps;
|
|
103
|
-
};
|
|
104
101
|
export {};
|
|
105
102
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,aAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5D,aAAK,WAAW,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AACrD,aAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI;IAChC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,GAAG,CAAC,EAAE,CAAC,CAAC;CACT,CAAC;AACF,aAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,aAAK,aAAa,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAC5D,aAAK,WAAW,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AACrD,aAAK,iBAAiB,CAAC,CAAC,GAAG,GAAG,IAAI;IAChC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,GAAG,CAAC,EAAE,CAAC,CAAC;CACT,CAAC;AACF,aAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC;IAErB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IAEnB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,SAAS,CAAC,EAAE,iBAAiB,GAAG,MAAM,CAAC;IAEvC;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAEjD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;CACzB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,eAAO,MAAM,iBAAiB;;;;;;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/styles.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAGlD,eAAO,MAAM,iBAAiB;;;;;;yGAuI7B,CAAC;AAEF,eAAO,MAAM,WAAW;;;yGAQvB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAKxB,CAAC;AAEF,eAAO,MAAM,eAAe;;;yGAK3B,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;yGAarB,CAAC;AAEF,eAAO,MAAM,KAAK;;;+HA+BjB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;kHAgBtB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;2HAyCpB,CAAC;AAEF,eAAO,MAAM,MAAM;;;+GAQlB,CAAC;AAEF,eAAO,MAAM,UAAU;;;2GAItB,CAAC;AAEF,eAAO,MAAM,UAAU;;;wHAUtB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;yGAyCxB,CAAC;AAEF,eAAO,MAAM,YAAY;;;2GAOxB,CAAC"}
|
|
@@ -19,7 +19,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
|
|
|
19
19
|
|
|
20
20
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
21
21
|
|
|
22
|
-
var InputGroupElement = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n
|
|
22
|
+
var InputGroupElement = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n border-radius: ", ";\n font-weight: ", ";\n transition: all 0.2s ease-in-out;\n\n &:hover fieldset {\n border-color: ", ";\n }\n\n &:hover > div > div:first-of-type {\n border-color: ", ";\n &:hover label {\n color: ", ";\n }\n }\n\n &:focus-within > div > div:first-of-type {\n background: ", ";\n border-color: ", ";\n }\n\n &:focus-within > div > div:first-of-type span {\n color: ", ";\n }\n\n &:focus-within {\n border-radius: 2px solid ", ";\n }\n &:focus-within label {\n color: ", ";\n }\n\n &:focus-within > div {\n box-shadow: 0 0 0 2px\n ", ";\n }\n\n &:focus-within label {\n transform: translate(19px, -11px) scale(0.8);\n\n background-color: ", ";\n height: 16px;\n }\n\n &:focus-within fieldset {\n border-width: 2px;\n border-color: ", ";\n }\n\n ", "\n\n & label {\n transform: ", ";\n\n background-color: ", ";\n\n height: ", ";\n }\n"])), function (props) {
|
|
23
23
|
return props.theme.borderRadius.default;
|
|
24
24
|
}, function (props) {
|
|
25
25
|
return props.theme.fontWeight[400];
|
|
@@ -111,7 +111,7 @@ var InputGroupElement = _styled.default.div(_templateObject || (_templateObject
|
|
|
111
111
|
|
|
112
112
|
exports.InputGroupElement = InputGroupElement;
|
|
113
113
|
|
|
114
|
-
var InputColumn = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n align-items: center;\n border-radius: ", ";\n
|
|
114
|
+
var InputColumn = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n align-items: center;\n border-radius: ", ";\n width: 100%;\n min-height: 56px;\n"])), function (props) {
|
|
115
115
|
return props.theme.borderRadius.default;
|
|
116
116
|
});
|
|
117
117
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalExample.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalExample.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,eAoB7C"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.ModalExample = ModalExample;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _ = require(".");
|
|
11
|
+
|
|
12
|
+
var _Button = _interopRequireDefault(require("../Button"));
|
|
13
|
+
|
|
14
|
+
var _Flex = _interopRequireDefault(require("../Flex"));
|
|
15
|
+
|
|
16
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
21
|
+
|
|
22
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
23
|
+
|
|
24
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
25
|
+
|
|
26
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
27
|
+
|
|
28
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
29
|
+
|
|
30
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
31
|
+
|
|
32
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
33
|
+
|
|
34
|
+
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
35
|
+
|
|
36
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
37
|
+
|
|
38
|
+
function ModalExample(props) {
|
|
39
|
+
var _useState = (0, _react.useState)(false),
|
|
40
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
41
|
+
modalOpen = _useState2[0],
|
|
42
|
+
setModalOpen = _useState2[1];
|
|
43
|
+
|
|
44
|
+
function handleModal() {
|
|
45
|
+
setModalOpen(!modalOpen);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
49
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
|
|
50
|
+
onClick: handleModal,
|
|
51
|
+
children: "Abrir modal"
|
|
52
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Modal, _objectSpread(_objectSpread({}, props), {}, {
|
|
53
|
+
maxWidth: props.maxWidth || '350px',
|
|
54
|
+
open: props.open || modalOpen,
|
|
55
|
+
onClose: handleModal,
|
|
56
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Flex.default, {
|
|
57
|
+
justifyContent: "center",
|
|
58
|
+
alignItems: "center",
|
|
59
|
+
style: {
|
|
60
|
+
height: '350px'
|
|
61
|
+
},
|
|
62
|
+
children: "Eu sou um modal :)"
|
|
63
|
+
})
|
|
64
|
+
}))]
|
|
65
|
+
});
|
|
66
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { ModalProps } from './types';
|
|
3
|
-
export declare
|
|
3
|
+
export declare const Modal: ({ open, left, top, anchorX, anchorY, offsetX, offsetY, hideScrollBar, hideOverlay, disableScrollOnOpen, maxWidth, maxHeight, onClose, ...rest }: ModalProps) => JSX.Element;
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,eAAO,MAAM,KAAK,oJAef,UAAU,gBA+EZ,CAAC"}
|