@ape.swap/bonds-sdk 1.0.61 → 1.0.62
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/uikit/Button/Button.d.ts +4 -0
- package/dist/components/uikit/Button/Button.js +91 -0
- package/dist/components/uikit/Button/IconButton.d.ts +4 -0
- package/dist/components/uikit/Button/IconButton.js +33 -0
- package/dist/components/uikit/Button/index.d.ts +2 -0
- package/dist/components/uikit/Button/index.js +2 -0
- package/dist/components/uikit/Button/styles.d.ts +3 -0
- package/dist/components/uikit/Button/styles.js +30 -0
- package/dist/components/uikit/Button/types.d.ts +46 -0
- package/dist/components/uikit/Button/types.js +37 -0
- package/dist/components/uikit/Checkbox/index.d.ts +4 -0
- package/dist/components/uikit/Checkbox/index.js +46 -0
- package/dist/components/uikit/Checkbox/types.d.ts +11 -0
- package/dist/components/uikit/Checkbox/types.js +5 -0
- package/dist/components/uikit/Dropdown/Dropdown.d.ts +4 -0
- package/dist/components/uikit/Dropdown/Dropdown.js +58 -0
- package/dist/components/uikit/Dropdown/DropdownItem.d.ts +4 -0
- package/dist/components/uikit/Dropdown/DropdownItem.js +47 -0
- package/dist/components/uikit/Dropdown/index.d.ts +3 -0
- package/dist/components/uikit/Dropdown/index.js +2 -0
- package/dist/components/uikit/Dropdown/styles.d.ts +4 -0
- package/dist/components/uikit/Dropdown/styles.js +16 -0
- package/dist/components/uikit/Dropdown/types.d.ts +58 -0
- package/dist/components/uikit/Dropdown/types.js +22 -0
- package/dist/components/uikit/Flex/index.d.ts +3 -0
- package/dist/components/uikit/Flex/index.js +29 -0
- package/dist/components/uikit/Input/Input.d.ts +4 -0
- package/dist/components/uikit/Input/Input.js +72 -0
- package/dist/components/uikit/Input/NumericInput.d.ts +10 -0
- package/dist/components/uikit/Input/NumericInput.js +35 -0
- package/dist/components/uikit/Input/StyledInput.d.ts +11 -0
- package/dist/components/uikit/Input/StyledInput.js +37 -0
- package/dist/components/uikit/Input/index.d.ts +3 -0
- package/dist/components/uikit/Input/index.js +3 -0
- package/dist/components/uikit/Link/index.d.ts +9 -0
- package/dist/components/uikit/Link/index.js +29 -0
- package/dist/components/uikit/Modal/ModalFooter.d.ts +4 -0
- package/dist/components/uikit/Modal/ModalFooter.js +32 -0
- package/dist/components/uikit/Modal/ModalHeader.d.ts +4 -0
- package/dist/components/uikit/Modal/ModalHeader.js +31 -0
- package/dist/components/uikit/Modal/index.d.ts +4 -0
- package/dist/components/uikit/Modal/index.js +55 -0
- package/dist/components/uikit/Modal/styles.d.ts +3 -0
- package/dist/components/uikit/Modal/styles.js +62 -0
- package/dist/components/uikit/Modal/types.d.ts +17 -0
- package/dist/components/uikit/Modal/types.js +1 -0
- package/dist/components/uikit/Select/Select.d.ts +4 -0
- package/dist/components/uikit/Select/Select.js +61 -0
- package/dist/components/uikit/Select/SelectItem.d.ts +4 -0
- package/dist/components/uikit/Select/SelectItem.js +40 -0
- package/dist/components/uikit/Select/index.d.ts +2 -0
- package/dist/components/uikit/Select/index.js +2 -0
- package/dist/components/uikit/Select/styles.d.ts +4 -0
- package/dist/components/uikit/Select/styles.js +50 -0
- package/dist/components/uikit/Select/types.d.ts +55 -0
- package/dist/components/uikit/Select/types.js +37 -0
- package/dist/components/uikit/Skeleton/index.d.ts +4 -0
- package/dist/components/uikit/Skeleton/index.js +31 -0
- package/dist/components/uikit/Skeleton/styles.d.ts +5 -0
- package/dist/components/uikit/Skeleton/styles.js +40 -0
- package/dist/components/uikit/Skeleton/types.d.ts +18 -0
- package/dist/components/uikit/Skeleton/types.js +10 -0
- package/dist/components/uikit/Spinner/apeSpinner.json +2764 -0
- package/dist/components/uikit/Spinner/index.d.ts +5 -0
- package/dist/components/uikit/Spinner/index.js +20 -0
- package/dist/components/uikit/SwiperDots/index.d.ts +6 -0
- package/dist/components/uikit/SwiperDots/index.js +14 -0
- package/dist/components/uikit/Tabs/Tab.d.ts +4 -0
- package/dist/components/uikit/Tabs/Tab.js +34 -0
- package/dist/components/uikit/Tabs/TabPanel.d.ts +4 -0
- package/dist/components/uikit/Tabs/TabPanel.js +29 -0
- package/dist/components/uikit/Tabs/Tabs.d.ts +4 -0
- package/dist/components/uikit/Tabs/Tabs.js +67 -0
- package/dist/components/uikit/Tabs/index.d.ts +2 -0
- package/dist/components/uikit/Tabs/index.js +2 -0
- package/dist/components/uikit/Tabs/styles.d.ts +3 -0
- package/dist/components/uikit/Tabs/styles.js +40 -0
- package/dist/components/uikit/Tabs/types.d.ts +54 -0
- package/dist/components/uikit/Tabs/types.js +22 -0
- package/dist/components/uikit/Tag/ListTag.d.ts +4 -0
- package/dist/components/uikit/Tag/ListTag.js +20 -0
- package/dist/components/uikit/Tag/Tag.d.ts +4 -0
- package/dist/components/uikit/Tag/Tag.js +42 -0
- package/dist/components/uikit/Tag/index.d.ts +3 -0
- package/dist/components/uikit/Tag/index.js +2 -0
- package/dist/components/uikit/Tag/styles.d.ts +5 -0
- package/dist/components/uikit/Tag/styles.js +44 -0
- package/dist/components/uikit/Tag/types.d.ts +48 -0
- package/dist/components/uikit/Tag/types.js +34 -0
- package/dist/components/uikit/Text/index.d.ts +4 -0
- package/dist/components/uikit/Text/index.js +35 -0
- package/dist/components/uikit/Text/types.d.ts +23 -0
- package/dist/components/uikit/Text/types.js +13 -0
- package/dist/components/uikit/Toggle/index.d.ts +4 -0
- package/dist/components/uikit/Toggle/index.js +63 -0
- package/dist/components/uikit/Toggle/styles.d.ts +3 -0
- package/dist/components/uikit/Toggle/styles.js +39 -0
- package/dist/components/uikit/Toggle/types.d.ts +31 -0
- package/dist/components/uikit/Toggle/types.js +17 -0
- package/dist/components/uikit/Tooltip/index.d.ts +4 -0
- package/dist/components/uikit/Tooltip/index.js +66 -0
- package/dist/components/uikit/Tooltip/styles.d.ts +4 -0
- package/dist/components/uikit/Tooltip/styles.js +60 -0
- package/dist/components/uikit/Tooltip/types.d.ts +17 -0
- package/dist/components/uikit/Tooltip/types.js +8 -0
- package/dist/components/uikit/TutorialModal/index.d.ts +4 -0
- package/dist/components/uikit/TutorialModal/index.js +52 -0
- package/dist/components/uikit/TutorialModal/styles.d.ts +8 -0
- package/dist/components/uikit/TutorialModal/styles.js +86 -0
- package/dist/components/uikit/TutorialModal/types.d.ts +22 -0
- package/dist/components/uikit/TutorialModal/types.js +1 -0
- package/dist/components/uikit/TutorialModal/useTutorialModal.d.ts +6 -0
- package/dist/components/uikit/TutorialModal/useTutorialModal.js +20 -0
- package/dist/components/uikit/index.d.ts +18 -0
- package/dist/components/uikit/index.js +20 -0
- package/dist/contexts/ModalContext.d.ts +14 -0
- package/dist/contexts/ModalContext.js +78 -0
- package/dist/hooks/useIsAbond.d.ts +3 -0
- package/dist/hooks/useIsAbond.js +10 -0
- package/dist/hooks/useModal.d.ts +3 -0
- package/dist/hooks/useModal.js +39 -0
- package/dist/utils/numbers.d.ts +5 -0
- package/dist/utils/numbers.js +111 -0
- package/package.json +7 -1
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
24
|
+
import React from 'react';
|
|
25
|
+
import { Button as ThemeUIButton, Spinner } from 'theme-ui';
|
|
26
|
+
import { variants, buttonFontSizes, buttonPadding, sizes, buttonLineHeight } from './types';
|
|
27
|
+
var Button = function (_a) {
|
|
28
|
+
var _b = _a.variant, variant = _b === void 0 ? variants.PRIMARY : _b, _c = _a.size, size = _c === void 0 ? sizes.MEDIUM : _c, load = _a.load, children = _a.children, startIcon = _a.startIcon, endIcon = _a.endIcon, fullWidth = _a.fullWidth, disabled = _a.disabled, props = __rest(_a, ["variant", "size", "load", "children", "startIcon", "endIcon", "fullWidth", "disabled"]);
|
|
29
|
+
var hoverStyle = {
|
|
30
|
+
'&:hover': {
|
|
31
|
+
'&:not([disabled])': {
|
|
32
|
+
borderColor: 'var(--theme-ui-colors-primaryButtonHovered)',
|
|
33
|
+
background: variant === 'primary' && 'var(--theme-ui-colors-primaryButtonHovered)',
|
|
34
|
+
opacity: 1,
|
|
35
|
+
},
|
|
36
|
+
'&:disabled': {},
|
|
37
|
+
},
|
|
38
|
+
};
|
|
39
|
+
if (variant === 'secondary') {
|
|
40
|
+
hoverStyle = {
|
|
41
|
+
'&:hover': {
|
|
42
|
+
'&:not([disabled])': hoverStyle['&:hover']['&:not([disabled])'],
|
|
43
|
+
'&:disabled': {
|
|
44
|
+
color: 'secondaryButtonDisableColor',
|
|
45
|
+
borderColor: 'secondaryButtonDisable',
|
|
46
|
+
opacity: 0.6,
|
|
47
|
+
},
|
|
48
|
+
},
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
if (variant === 'tertiary') {
|
|
52
|
+
hoverStyle = {
|
|
53
|
+
'&:hover': {
|
|
54
|
+
'&:not([disabled])': {
|
|
55
|
+
borderColor: 'primaryBtnDisable',
|
|
56
|
+
background: 'white4',
|
|
57
|
+
opacity: 1,
|
|
58
|
+
},
|
|
59
|
+
'&:disabled': {},
|
|
60
|
+
},
|
|
61
|
+
};
|
|
62
|
+
}
|
|
63
|
+
if (variant === 'success') {
|
|
64
|
+
hoverStyle = {
|
|
65
|
+
'&:hover': {
|
|
66
|
+
'&:not([disabled])': {
|
|
67
|
+
borderColor: 'hoveredSuccess',
|
|
68
|
+
background: 'hoveredSuccess',
|
|
69
|
+
opacity: 1,
|
|
70
|
+
},
|
|
71
|
+
'&:disabled': {},
|
|
72
|
+
},
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
if (variant === 'danger') {
|
|
76
|
+
hoverStyle = {
|
|
77
|
+
'&:hover': {
|
|
78
|
+
'&:not([disabled])': {
|
|
79
|
+
borderColor: 'hoveredDanger',
|
|
80
|
+
background: 'hoveredDanger',
|
|
81
|
+
opacity: 1,
|
|
82
|
+
},
|
|
83
|
+
'&:disabled': {},
|
|
84
|
+
},
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
return (_jsxs(ThemeUIButton, __assign({ variant: variant, disabled: disabled, sx: __assign(__assign({ variant: "buttons.".concat(variant), textTransform: 'uppercase', fontSize: buttonFontSizes[size], lineHeight: buttonLineHeight[size], px: buttonPadding[size].x, py: buttonPadding[size].y, display: 'flex', justifyContent: 'center', transition: 'all .3s linear', '&:active': {
|
|
88
|
+
transform: 'scale(0.9)',
|
|
89
|
+
} }, hoverStyle), { width: fullWidth ? '100%' : 'max-content' }) }, props, { children: [React.isValidElement(startIcon) && React.cloneElement(startIcon), children, " ", load && _jsx(Spinner, { size: 16, ml: "5px" }), React.isValidElement(endIcon) && React.cloneElement(endIcon)] })));
|
|
90
|
+
};
|
|
91
|
+
export default Button;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
24
|
+
import { Button } from 'theme-ui';
|
|
25
|
+
import Svg from '../Svg';
|
|
26
|
+
import { icons } from '../Svg/types';
|
|
27
|
+
import { iconButtonVariants as variants } from './types';
|
|
28
|
+
import style from './styles';
|
|
29
|
+
var IconButton = function (_a) {
|
|
30
|
+
var _b = _a.icon, icon = _b === void 0 ? icons.DISCORD : _b, _c = _a.color, color = _c === void 0 ? 'white1' : _c, _d = _a.background, background = _d === void 0 ? 'yellow' : _d, _e = _a.variant, variant = _e === void 0 ? variants.PRIMARY : _e, iconWidth = _a.iconWidth, children = _a.children, props = __rest(_a, ["icon", "color", "background", "variant", "iconWidth", "children"]);
|
|
31
|
+
return (_jsx(Button, __assign({}, props, { variant: variant, sx: __assign(__assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', variant: "buttons.".concat(variant), color: 'primaryBright', background: background }, (variant === variants.PRIMARY ? style.primary : {})), (variant === variants.TRANSPARENT ? style.transparent : {})) }, { children: children || (_jsx("span", __assign({ sx: { height: iconWidth, width: iconWidth } }, { children: _jsx(Svg, __assign({ color: color, icon: icon }, props, { width: iconWidth })) }))) })));
|
|
32
|
+
};
|
|
33
|
+
export default IconButton;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var defaultStyle = {
|
|
13
|
+
cursor: 'pointer',
|
|
14
|
+
color: 'primaryBright',
|
|
15
|
+
border: 'none',
|
|
16
|
+
transition: 'all .3s linear',
|
|
17
|
+
'&:hover': {
|
|
18
|
+
filter: 'brightness(115%)',
|
|
19
|
+
},
|
|
20
|
+
'&:active': {
|
|
21
|
+
transform: 'scale(0.9)',
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
var styles = {
|
|
25
|
+
primary: __assign({}, defaultStyle),
|
|
26
|
+
transparent: __assign(__assign({}, defaultStyle), { backgroundColor: 'transparent', backgroundRepeat: 'no-repeat', padding: '0px', border: 'none', cursor: 'pointer', svg: {
|
|
27
|
+
background: 'transparent',
|
|
28
|
+
} }),
|
|
29
|
+
};
|
|
30
|
+
export default styles;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ButtonProps as ThemeUIButtonProps } from 'theme-ui';
|
|
3
|
+
import { iconTypes } from '../Svg/types';
|
|
4
|
+
export declare enum sizes {
|
|
5
|
+
SMALL = "sm",
|
|
6
|
+
MEDIUM = "md",
|
|
7
|
+
LARGE = "lg"
|
|
8
|
+
}
|
|
9
|
+
export declare const buttonFontSizes: Record<sizes | any, string>;
|
|
10
|
+
export declare const buttonLineHeight: Record<sizes | any, string>;
|
|
11
|
+
export declare const buttonPadding: Record<sizes | any, {
|
|
12
|
+
x: number;
|
|
13
|
+
y: number;
|
|
14
|
+
}>;
|
|
15
|
+
export declare enum variants {
|
|
16
|
+
PRIMARY = "primary",
|
|
17
|
+
SECONDARY = "secondary",
|
|
18
|
+
TERTIARY = "tertiary",
|
|
19
|
+
TEXT = "text",
|
|
20
|
+
SUCCESS = "success",
|
|
21
|
+
DANGER = "danger"
|
|
22
|
+
}
|
|
23
|
+
export declare enum iconButtonVariants {
|
|
24
|
+
PRIMARY = "primary",
|
|
25
|
+
TRANSPARENT = "transparent",
|
|
26
|
+
CIRCULAR = "circular"
|
|
27
|
+
}
|
|
28
|
+
export type sizeProps = `${sizes}`;
|
|
29
|
+
export type variantProps = `${variants}`;
|
|
30
|
+
export type iconButtonVariantsProps = `${iconButtonVariants}`;
|
|
31
|
+
export interface ButtonProps extends Omit<ThemeUIButtonProps, 'sx'> {
|
|
32
|
+
variant?: variantProps;
|
|
33
|
+
size?: sizeProps;
|
|
34
|
+
startIcon?: ReactNode;
|
|
35
|
+
endIcon?: ReactNode;
|
|
36
|
+
fullWidth?: boolean;
|
|
37
|
+
load?: boolean;
|
|
38
|
+
[key: string]: any;
|
|
39
|
+
}
|
|
40
|
+
export interface IconButtonProps extends Omit<ButtonProps, 'variant'> {
|
|
41
|
+
variant?: iconButtonVariantsProps;
|
|
42
|
+
color?: string;
|
|
43
|
+
background?: string;
|
|
44
|
+
icon?: iconTypes;
|
|
45
|
+
iconWidth?: number;
|
|
46
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
var _a, _b, _c;
|
|
2
|
+
export var sizes;
|
|
3
|
+
(function (sizes) {
|
|
4
|
+
sizes["SMALL"] = "sm";
|
|
5
|
+
sizes["MEDIUM"] = "md";
|
|
6
|
+
sizes["LARGE"] = "lg";
|
|
7
|
+
})(sizes || (sizes = {}));
|
|
8
|
+
export var buttonFontSizes = (_a = {},
|
|
9
|
+
_a[sizes.SMALL] = '12px',
|
|
10
|
+
_a[sizes.MEDIUM] = '16px',
|
|
11
|
+
_a[sizes.LARGE] = '18px',
|
|
12
|
+
_a);
|
|
13
|
+
export var buttonLineHeight = (_b = {},
|
|
14
|
+
_b[sizes.SMALL] = '10px',
|
|
15
|
+
_b[sizes.MEDIUM] = '24px',
|
|
16
|
+
_b[sizes.LARGE] = '33px',
|
|
17
|
+
_b);
|
|
18
|
+
export var buttonPadding = (_c = {},
|
|
19
|
+
_c[sizes.SMALL] = { x: 5, y: 2 },
|
|
20
|
+
_c[sizes.MEDIUM] = { x: 7, y: 3 },
|
|
21
|
+
_c[sizes.LARGE] = { x: 10, y: 6 },
|
|
22
|
+
_c);
|
|
23
|
+
export var variants;
|
|
24
|
+
(function (variants) {
|
|
25
|
+
variants["PRIMARY"] = "primary";
|
|
26
|
+
variants["SECONDARY"] = "secondary";
|
|
27
|
+
variants["TERTIARY"] = "tertiary";
|
|
28
|
+
variants["TEXT"] = "text";
|
|
29
|
+
variants["SUCCESS"] = "success";
|
|
30
|
+
variants["DANGER"] = "danger";
|
|
31
|
+
})(variants || (variants = {}));
|
|
32
|
+
export var iconButtonVariants;
|
|
33
|
+
(function (iconButtonVariants) {
|
|
34
|
+
iconButtonVariants["PRIMARY"] = "primary";
|
|
35
|
+
iconButtonVariants["TRANSPARENT"] = "transparent";
|
|
36
|
+
iconButtonVariants["CIRCULAR"] = "circular";
|
|
37
|
+
})(iconButtonVariants || (iconButtonVariants = {}));
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
24
|
+
import { scales } from './types';
|
|
25
|
+
var getScale = function (_a) {
|
|
26
|
+
var scale = _a.scale;
|
|
27
|
+
switch (scale) {
|
|
28
|
+
case scales.SM:
|
|
29
|
+
return '21px';
|
|
30
|
+
case scales.MD:
|
|
31
|
+
default:
|
|
32
|
+
return '32px';
|
|
33
|
+
}
|
|
34
|
+
};
|
|
35
|
+
var Checkbox = function (_a) {
|
|
36
|
+
var _b = _a.scale, scale = _b === void 0 ? scales.SM : _b, _c = _a.display, display = _c === void 0 ? 'block' : _c, className = _a.className, background = _a.background, props = __rest(_a, ["scale", "display", "className", "background"]);
|
|
37
|
+
var scaleSize = getScale({ scale: scale });
|
|
38
|
+
var svgScale = scale === 'sm' ? 13 : 21;
|
|
39
|
+
return (_jsxs("span", __assign({ className: className, sx: {
|
|
40
|
+
display: display,
|
|
41
|
+
width: scaleSize,
|
|
42
|
+
height: scaleSize,
|
|
43
|
+
position: 'relative',
|
|
44
|
+
} }, { children: [_jsx("input", __assign({ type: "checkbox", sx: { variant: 'checkbox', background: background } }, props)), _jsx("svg", __assign({ width: svgScale || '13', height: "auto", viewBox: "0 0 13 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M11.8132 0.171594C11.522 -0.0616871 11.0766 -0.046135 10.8025 0.218251L4.25899 6.76569L1.17566 4.46397C0.93585 4.27735 0.576128 4.2618 0.319184 4.43287C-0.00627898 4.63505 -0.0747974 5.0394 0.147888 5.33489L3.35113 9.4873C3.43677 9.59617 3.55668 9.70503 3.67659 9.78279C4.27612 10.156 5.09835 10.0161 5.50946 9.47175L5.56085 9.40954L11.9159 1.01141C12.1215 0.747022 12.0701 0.389324 11.8132 0.171594Z", fill: "#FAFAFA" }) }))] })));
|
|
45
|
+
};
|
|
46
|
+
export default Checkbox;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { InputHTMLAttributes } from 'react';
|
|
2
|
+
import { ThemeUICSSObject } from 'theme-ui';
|
|
3
|
+
export declare enum scales {
|
|
4
|
+
SM = "sm",
|
|
5
|
+
MD = "md"
|
|
6
|
+
}
|
|
7
|
+
export type scaleProps = `${scales}`;
|
|
8
|
+
export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
9
|
+
scale?: scaleProps;
|
|
10
|
+
display?: ThemeUICSSObject['display'];
|
|
11
|
+
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
|
|
24
|
+
import { useState } from 'react';
|
|
25
|
+
import { Box, Flex } from 'theme-ui';
|
|
26
|
+
import { AnimatePresence, motion } from 'framer-motion';
|
|
27
|
+
import { dropdownPadding, fontSizes, sizes } from './types';
|
|
28
|
+
import Svg from '../Svg';
|
|
29
|
+
var Dropdown = function (_a) {
|
|
30
|
+
var component = _a.component, children = _a.children, _b = _a.size, size = _b === void 0 ? sizes.MEDIUM : _b, props = __rest(_a, ["component", "children", "size"]);
|
|
31
|
+
var _c = useState(false), open = _c[0], setOpen = _c[1];
|
|
32
|
+
var handleClick = function () { return setOpen(function (prev) { return !prev; }); };
|
|
33
|
+
return (_jsxs(Box, __assign({ sx: {
|
|
34
|
+
background: 'white2',
|
|
35
|
+
borderRadius: 'normal',
|
|
36
|
+
cursor: 'pointer',
|
|
37
|
+
width: '100%',
|
|
38
|
+
position: 'relative',
|
|
39
|
+
}, onClick: handleClick }, props, { children: [_jsxs(Flex, __assign({ sx: {
|
|
40
|
+
px: dropdownPadding[size].x,
|
|
41
|
+
py: dropdownPadding[size].y,
|
|
42
|
+
justifyContent: 'space-between',
|
|
43
|
+
alignItems: 'center',
|
|
44
|
+
span: {
|
|
45
|
+
fontSize: fontSizes[size],
|
|
46
|
+
},
|
|
47
|
+
} }, { children: [component, _jsx(Flex, __assign({ sx: { minWidth: '10px' } }, { children: _jsx(Svg, { icon: "caret", direction: open ? 'up' : 'down' }) }))] })), _jsx(AnimatePresence, { children: open && (_jsx(motion.div, __assign({ initial: { height: '10px' }, animate: { height: 'fit-content' }, exit: { height: '0px' }, sx: {
|
|
48
|
+
position: 'absolute',
|
|
49
|
+
background: 'white3',
|
|
50
|
+
width: 'fit-content',
|
|
51
|
+
borderBottomRightRadius: '10px',
|
|
52
|
+
borderBottomLeftRadius: '10px',
|
|
53
|
+
overflow: 'hidden',
|
|
54
|
+
marginTop: '5px',
|
|
55
|
+
top: '85%',
|
|
56
|
+
} }, { children: children }))) })] })));
|
|
57
|
+
};
|
|
58
|
+
export default Dropdown;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
24
|
+
import { Box, NavLink } from 'theme-ui';
|
|
25
|
+
import { dropdownItemPadding, sizes } from './types';
|
|
26
|
+
import { dynamicStyles } from './styles';
|
|
27
|
+
var Element = function (_a) {
|
|
28
|
+
var onClick = _a.onClick, url = _a.url, active = _a.active, size = _a.size, children = _a.children;
|
|
29
|
+
var style = dynamicStyles.dropdownItem({ active: active, size: size });
|
|
30
|
+
return url ? (_jsx(NavLink, __assign({ href: url, onClick: onClick, sx: style }, { children: children }))) : (_jsx(Box, __assign({ onClick: onClick, sx: style }, { children: children })));
|
|
31
|
+
};
|
|
32
|
+
var DropdownItem = function (_a) {
|
|
33
|
+
var onClick = _a.onClick, url = _a.url, active = _a.active, _b = _a.size, size = _b === void 0 ? sizes.MEDIUM : _b, children = _a.children, props = __rest(_a, ["onClick", "url", "active", "size", "children"]);
|
|
34
|
+
return (_jsx(Box, __assign({ as: "li" }, props, { sx: {
|
|
35
|
+
px: dropdownItemPadding[size].x,
|
|
36
|
+
py: dropdownItemPadding[size].y,
|
|
37
|
+
listStyleType: active ? 'disc' : 'none',
|
|
38
|
+
cursor: 'pointer',
|
|
39
|
+
width: '100%',
|
|
40
|
+
color: 'text',
|
|
41
|
+
borderRadius: '10px',
|
|
42
|
+
'&:hover': {
|
|
43
|
+
backgroundColor: 'white4',
|
|
44
|
+
},
|
|
45
|
+
} }, { children: _jsx(Element, __assign({ url: url, onClick: onClick, active: active, size: size }, { children: children })) })));
|
|
46
|
+
};
|
|
47
|
+
export default DropdownItem;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { fontSizes } from './types';
|
|
2
|
+
var styles = {};
|
|
3
|
+
export var dynamicStyles = {
|
|
4
|
+
dropdownItem: function (_a) {
|
|
5
|
+
var active = _a.active, size = _a.size;
|
|
6
|
+
return ({
|
|
7
|
+
display: 'inline-block',
|
|
8
|
+
marginLeft: active ? '-10px' : undefined,
|
|
9
|
+
fontSize: fontSizes[size],
|
|
10
|
+
'*': {
|
|
11
|
+
fontSize: fontSizes[size],
|
|
12
|
+
},
|
|
13
|
+
});
|
|
14
|
+
},
|
|
15
|
+
};
|
|
16
|
+
export default styles;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
export declare enum sizes {
|
|
3
|
+
SMALL = "sm",
|
|
4
|
+
MEDIUM = "md",
|
|
5
|
+
LARGE = "lg"
|
|
6
|
+
}
|
|
7
|
+
export declare const fontSizes: {
|
|
8
|
+
sm: number;
|
|
9
|
+
md: number;
|
|
10
|
+
lg: number;
|
|
11
|
+
};
|
|
12
|
+
export declare const dropdownPadding: {
|
|
13
|
+
sm: {
|
|
14
|
+
x: number;
|
|
15
|
+
y: number;
|
|
16
|
+
};
|
|
17
|
+
md: {
|
|
18
|
+
x: number;
|
|
19
|
+
y: number;
|
|
20
|
+
};
|
|
21
|
+
lg: {
|
|
22
|
+
x: number;
|
|
23
|
+
y: number;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
export declare const dropdownItemPadding: {
|
|
27
|
+
sm: {
|
|
28
|
+
x: number;
|
|
29
|
+
y: number;
|
|
30
|
+
};
|
|
31
|
+
md: {
|
|
32
|
+
x: number;
|
|
33
|
+
y: number;
|
|
34
|
+
};
|
|
35
|
+
lg: {
|
|
36
|
+
x: number;
|
|
37
|
+
y: number;
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
type sizeProps = `${sizes}`;
|
|
41
|
+
export interface DropdownProps {
|
|
42
|
+
component: React.ReactNode;
|
|
43
|
+
size?: sizeProps;
|
|
44
|
+
[key: string]: any;
|
|
45
|
+
}
|
|
46
|
+
export interface DropdownItemProps {
|
|
47
|
+
onClick?: () => void;
|
|
48
|
+
children?: ReactNode;
|
|
49
|
+
url?: string;
|
|
50
|
+
active?: boolean;
|
|
51
|
+
size?: sizeProps;
|
|
52
|
+
sx?: any;
|
|
53
|
+
}
|
|
54
|
+
export declare type Position = 'top' | 'top-right' | 'bottom';
|
|
55
|
+
export interface PositionProps {
|
|
56
|
+
position?: Position;
|
|
57
|
+
}
|
|
58
|
+
export {};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
var _a, _b, _c;
|
|
2
|
+
export var sizes;
|
|
3
|
+
(function (sizes) {
|
|
4
|
+
sizes["SMALL"] = "sm";
|
|
5
|
+
sizes["MEDIUM"] = "md";
|
|
6
|
+
sizes["LARGE"] = "lg";
|
|
7
|
+
})(sizes || (sizes = {}));
|
|
8
|
+
export var fontSizes = (_a = {},
|
|
9
|
+
_a[sizes.SMALL] = 1,
|
|
10
|
+
_a[sizes.MEDIUM] = 3,
|
|
11
|
+
_a[sizes.LARGE] = 6,
|
|
12
|
+
_a);
|
|
13
|
+
export var dropdownPadding = (_b = {},
|
|
14
|
+
_b[sizes.SMALL] = { x: 2, y: 1 },
|
|
15
|
+
_b[sizes.MEDIUM] = { x: 5, y: 4 },
|
|
16
|
+
_b[sizes.LARGE] = { x: 10, y: 8 },
|
|
17
|
+
_b);
|
|
18
|
+
export var dropdownItemPadding = (_c = {},
|
|
19
|
+
_c[sizes.SMALL] = { x: 4, y: 1 },
|
|
20
|
+
_c[sizes.MEDIUM] = { x: 9, y: 2 },
|
|
21
|
+
_c[sizes.LARGE] = { x: 14, y: 4 },
|
|
22
|
+
_c);
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
+
var t = {};
|
|
14
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
+
t[p] = s[p];
|
|
16
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
+
t[p[i]] = s[p[i]];
|
|
20
|
+
}
|
|
21
|
+
return t;
|
|
22
|
+
};
|
|
23
|
+
import { jsx as _jsx } from "theme-ui/jsx-runtime";
|
|
24
|
+
import { Flex as ThemeUIFlex } from 'theme-ui';
|
|
25
|
+
var Flex = function (_a) {
|
|
26
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
|
27
|
+
return _jsx(ThemeUIFlex, __assign({}, props, { children: children }));
|
|
28
|
+
};
|
|
29
|
+
export default Flex;
|