@modul/mbui 0.0.12-beta-pv-53036-f7dccc0b → 0.0.12
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/Collapsible/AccountCollapsible.js +2 -2
- package/dist/Collapsible/AccountCollapsible.js.map +1 -1
- package/dist/Icon/icons/AddList.js.map +1 -1
- package/dist/Info/Info.js +1 -1
- package/dist/Info/Info.js.map +1 -1
- package/dist/Input/Input.js +1 -1
- package/dist/Input/Input.js.map +1 -1
- package/dist/Page/Page.js +4 -2
- package/dist/Page/Page.js.map +1 -1
- package/package.json +2 -2
- package/src/@/config/index.ts +2 -4
- package/src/Collapsible/AccountCollapsible.tsx +2 -2
- package/src/Icon/icons/AddList.tsx +1 -0
- package/src/Info/Info.tsx +1 -1
- package/src/Input/Input.tsx +1 -1
- package/src/Page/Page.tsx +22 -11
- package/src/assets/css/global.css +149 -162
- package/src/Collapsible/Collapse1 copy.tsx +0 -88
- package/src/Select/SelectAccountCard.tsx +0 -163
- package/src/Select/index.ts +0 -1
|
@@ -14,8 +14,8 @@ exports.AccountCollapsibleTrigger = AccountCollapsibleTrigger;
|
|
|
14
14
|
const AccountCollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
|
|
15
15
|
exports.AccountCollapsibleContent = AccountCollapsibleContent;
|
|
16
16
|
const AccountCollapsibleHeader = ({ label }) => {
|
|
17
|
-
return (react_1.default.createElement(AccountCollapsibleTrigger, { className: "flex justify-between items-center
|
|
18
|
-
react_1.default.createElement("div", { className: "font-medium text-[12px] leading-[1.
|
|
17
|
+
return (react_1.default.createElement(AccountCollapsibleTrigger, { className: "flex justify-between items-center w-full text-light align-center group" },
|
|
18
|
+
react_1.default.createElement("div", { className: "font-medium text-[12px] leading-[1.33]" }, label),
|
|
19
19
|
react_1.default.createElement(Icon_1.DropdownSmallOld, { className: 'group-[[data-state=open]]:rotate-180 transition-transform' })));
|
|
20
20
|
};
|
|
21
21
|
exports.AccountCollapsibleHeader = AccountCollapsibleHeader;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccountCollapsible.js","sourceRoot":"","sources":["../../src/Collapsible/AccountCollapsible.tsx"],"names":[],"mappings":";;;;AAAA,+DAA4C;AAC5C,+FAAmE;AACnE,yCAAiD;AACjD,0CAAmC;AACnC,qDAA2C;AAE3C,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,IAAI,CAAA;AAmDnD,gDAAkB;AAjDnB,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,kBAAkB,CAAA;AAmDxE,8DAAyB;AAjD1B,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,kBAAkB,CAAA;AAkDxE,8DAAyB;AAtC1B,MAAM,wBAAwB,GAAsC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjF,OAAO,CACN,8BAAC,yBAAyB,IAAC,SAAS,EAAC,
|
|
1
|
+
{"version":3,"file":"AccountCollapsible.js","sourceRoot":"","sources":["../../src/Collapsible/AccountCollapsible.tsx"],"names":[],"mappings":";;;;AAAA,+DAA4C;AAC5C,+FAAmE;AACnE,yCAAiD;AACjD,0CAAmC;AACnC,qDAA2C;AAE3C,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,IAAI,CAAA;AAmDnD,gDAAkB;AAjDnB,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,kBAAkB,CAAA;AAmDxE,8DAAyB;AAjD1B,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,kBAAkB,CAAA;AAkDxE,8DAAyB;AAtC1B,MAAM,wBAAwB,GAAsC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjF,OAAO,CACN,8BAAC,yBAAyB,IAAC,SAAS,EAAC,wEAAwE;QAC5G,uCAAK,SAAS,EAAC,wCAAwC,IAAE,KAAK,CAAO;QACrE,8BAAC,uBAAgB,IAAC,SAAS,EAAC,2DAA2D,GAAE,CAC9D,CAC5B,CAAA;AACF,CAAC,CAAA;AA6BA,4DAAwB;AA5BzB,MAAM,6BAA6B,GAA2C,CAAC,EAC9E,QAAQ,EACR,OAAO,GAAG,IAAI,EACd,SAAS,EACT,GAAG,KAAK,EACR,EAAE,EAAE;IACJ,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IACnC,OAAO,CACN,8BAAC,IAAI,IACJ,SAAS,EAAE,IAAA,UAAE,EACZ,wRAAwR,EACxR,SAAS,CACT,KACG,KAAK,IAER,QAAQ,CACH,CACP,CAAA;AACF,CAAC,CAAA;AAaA,sEAA6B;AAX9B,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAA;AACrD,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAA;AACnE,wBAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAA;AACjE,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAA;AACnE,6BAA6B,CAAC,WAAW,GAAG,+BAA+B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddList.js","sourceRoot":"","sources":["../../../src/Icon/icons/AddList.tsx"],"names":[],"mappings":";;;AAAA,0DAA8B;AAE9B,wCAAoC;AACpC,MAAM,UAAU,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACtD,oBAAC,iBAAO,IACP,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,KACf,KAAK;IAET,8BACC,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,8hBAA8hB,GAC/hB,CACO,CACV,CAAA;
|
|
1
|
+
{"version":3,"file":"AddList.js","sourceRoot":"","sources":["../../../src/Icon/icons/AddList.tsx"],"names":[],"mappings":";;;AAAA,0DAA8B;AAE9B,wCAAoC;AACpC,MAAM,UAAU,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACtD,oBAAC,iBAAO,IACP,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,KACf,KAAK;IAET,8BACC,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,8hBAA8hB,GAC/hB,CACO,CACV,CAAA;AAED,kBAAe,UAAU,CAAA"}
|
package/dist/Info/Info.js
CHANGED
|
@@ -6,7 +6,7 @@ const React = (0, tslib_1.__importStar)(require("react"));
|
|
|
6
6
|
const class_variance_authority_1 = require("class-variance-authority");
|
|
7
7
|
const utils_1 = require("../@/lib/utils");
|
|
8
8
|
// import { cn } from "@/lib/utils" порешать с алиасами
|
|
9
|
-
const infoVariants = (0, class_variance_authority_1.cva)('px-[16px] py-[12px] rounded-
|
|
9
|
+
const infoVariants = (0, class_variance_authority_1.cva)('px-[16px] py-[12px] rounded-1 text-[14px]', {
|
|
10
10
|
variants: {
|
|
11
11
|
variant: {
|
|
12
12
|
light: 'bg-[--cl-graphite-7]',
|
package/dist/Info/Info.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Info.js","sourceRoot":"","sources":["../../src/Info/Info.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,uEAAiE;AAEjE,0CAAmC;AACnC,uDAAuD;AAEvD,MAAM,YAAY,GAAG,IAAA,8BAAG,EAAC,
|
|
1
|
+
{"version":3,"file":"Info.js","sourceRoot":"","sources":["../../src/Info/Info.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,uEAAiE;AAEjE,0CAAmC;AACnC,uDAAuD;AAEvD,MAAM,YAAY,GAAG,IAAA,8BAAG,EAAC,2CAA2C,EAAE;IACrE,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,KAAK,EAAE,sBAAsB;YAC7B,OAAO,EAAE,kBAAkB;YAC3B,OAAO,EAAE,kBAAkB;YAC3B,QAAQ,EAAE,wBAAwB;SAClC;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,OAAO;KAChB;CACD,CAAC,CAAA;AAMF,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAyB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzG,OAAO,CACN,6BACC,SAAS,EAAE,IAAA,UAAE,EAAC,YAAY,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,KAC/C,KAAK,IAER,QAAQ,CACJ,CACN,CAAA;AACF,CAAC,CAAC,CAAA;AAIO,oBAAI;AAFb,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA"}
|
package/dist/Input/Input.js
CHANGED
|
@@ -10,7 +10,7 @@ const InputLabel = React.forwardRef(({ className, children, ...props }) => {
|
|
|
10
10
|
exports.InputLabel = InputLabel;
|
|
11
11
|
InputLabel.displayName = 'InputLabel';
|
|
12
12
|
const InputField = React.forwardRef(({ className, type, ...props }, ref) => {
|
|
13
|
-
return (React.createElement("input", { type: type, className: (0, utils_1.cn)('border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-
|
|
13
|
+
return (React.createElement("input", { type: type, className: (0, utils_1.cn)('border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-1 focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed', className), ref: ref, ...props }));
|
|
14
14
|
});
|
|
15
15
|
exports.InputField = InputField;
|
|
16
16
|
InputField.displayName = 'InputField';
|
package/dist/Input/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,0CAAmC;AAEnC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrC,OAAO,CACN,+BACC,SAAS,EAAE,IAAA,UAAE,EAAC,0GAA0G,EAAE,SAAS,CAAC,KAChI,KAAK,IAER,QAAQ,CACF,CACR,CAAA;AACF,CAAC,CACD,CAAA;AAoBoB,gCAAU;AAlB/B,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAgE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzI,OAAO,CACN,+BACC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,UAAE,EACZ,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,0CAAmC;AAEnC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrC,OAAO,CACN,+BACC,SAAS,EAAE,IAAA,UAAE,EAAC,0GAA0G,EAAE,SAAS,CAAC,KAChI,KAAK,IAER,QAAQ,CACF,CACR,CAAA;AACF,CAAC,CACD,CAAA;AAoBoB,gCAAU;AAlB/B,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAgE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzI,OAAO,CACN,+BACC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,UAAE,EACZ,qUAAqU,EACrU,SAAS,CACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAA;AACF,CAAC,CAAC,CAAA;AAIO,gCAAU;AAFnB,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA"}
|
package/dist/Page/Page.js
CHANGED
|
@@ -8,13 +8,15 @@ const Navbar = ({ children, className }) => {
|
|
|
8
8
|
return react_1.default.createElement("div", { className: (0, utils_1.cn)('flex items-center h-[44px] px-[20px]', className) }, children);
|
|
9
9
|
};
|
|
10
10
|
const Content = ({ children, className }) => {
|
|
11
|
-
return react_1.default.createElement("div", { className: (0, utils_1.cn)('px-[20px]', className) }, children);
|
|
11
|
+
return react_1.default.createElement("div", { className: (0, utils_1.cn)('px-[20px] py-[16px]', className) }, children);
|
|
12
12
|
};
|
|
13
13
|
const Page = ({ children, className }) => {
|
|
14
|
-
return react_1.default.createElement("div", { className: (0, utils_1.cn)('sm:container grid grid-cols-[minmax(0,_1fr)] grid-rows-[min-content_1fr_min-content] bg-page h-screen', className) }, children);
|
|
14
|
+
return (react_1.default.createElement("div", { className: (0, utils_1.cn)('sm:container grid grid-cols-[minmax(0,_1fr)] grid-rows-[min-content_1fr_min-content] bg-page h-screen', className) }, children));
|
|
15
15
|
};
|
|
16
16
|
exports.Page = Page;
|
|
17
17
|
Page.displayName = 'Page';
|
|
18
18
|
Page.Navbar = Navbar;
|
|
19
|
+
Page.Navbar.displayName = 'Page.Navbar';
|
|
19
20
|
Page.Content = Content;
|
|
21
|
+
Page.Content.displayName = "Page.Content";
|
|
20
22
|
//# sourceMappingURL=Page.js.map
|
package/dist/Page/Page.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../src/Page/Page.tsx"],"names":[],"mappings":";;;;AAAA,+DAAiC;AACjC,0CAAmC;
|
|
1
|
+
{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../src/Page/Page.tsx"],"names":[],"mappings":";;;;AAAA,+DAAiC;AACjC,0CAAmC;AAWnC,MAAM,MAAM,GAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IACtD,OAAO,uCAAK,SAAS,EAAE,IAAA,UAAE,EAAC,sCAAsC,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CAAA;AAC/F,CAAC,CAAA;AAED,MAAM,OAAO,GAAe,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IACvD,OAAO,uCAAK,SAAS,EAAE,IAAA,UAAE,EAAC,qBAAqB,EAAE,SAAS,CAAC,IAAG,QAAQ,CAAO,CAAA;AAC9E,CAAC,CAAA;AAED,MAAM,IAAI,GAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAU,EAAE,EAAE;IACvD,OAAO,CACN,uCACC,SAAS,EAAE,IAAA,UAAE,EACZ,uGAAuG,EACvG,SAAS,CACT,IAEA,QAAQ,CACJ,CACN,CAAA;AACF,CAAC,CAAA;AAUQ,oBAAI;AARb,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;AACpB,IAAI,CAAC,MAAM,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;AACtB,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,cAAc,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@modul/mbui",
|
|
3
|
-
"version": "0.0.12
|
|
3
|
+
"version": "0.0.12",
|
|
4
4
|
"packageManager": "yarn@3.5.1",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -39,7 +39,6 @@
|
|
|
39
39
|
"lodash": "4.17.5",
|
|
40
40
|
"react-datepicker": "4.16.0",
|
|
41
41
|
"react-imask": "7.1.3",
|
|
42
|
-
"react-select": "5.8.0",
|
|
43
42
|
"tailwind-merge": "^2.3.0",
|
|
44
43
|
"tailwindcss": "^3.4.4",
|
|
45
44
|
"tailwindcss-animate": "^1.0.7",
|
|
@@ -60,6 +59,7 @@
|
|
|
60
59
|
"@storybook/react": "^8.2.8",
|
|
61
60
|
"@storybook/react-webpack5": "^8.2.8",
|
|
62
61
|
"@storybook/test": "^8.2.8",
|
|
62
|
+
"@svgr/cli": "8.1.0",
|
|
63
63
|
"@tailwindcss/forms": "^0.5.7",
|
|
64
64
|
"@types/node": "18.11.9",
|
|
65
65
|
"@types/react": "^18.2.6",
|
package/src/@/config/index.ts
CHANGED
|
@@ -26,7 +26,7 @@ export default {
|
|
|
26
26
|
DEFAULT: 'var(--secondary)',
|
|
27
27
|
},
|
|
28
28
|
warning: {
|
|
29
|
-
DEFAULT: 'var(--
|
|
29
|
+
DEFAULT: 'var(--warning)',
|
|
30
30
|
light: 'var(--warning-light)'
|
|
31
31
|
},
|
|
32
32
|
critical: {
|
|
@@ -43,7 +43,6 @@ export default {
|
|
|
43
43
|
},
|
|
44
44
|
backgroundColor: {
|
|
45
45
|
page: 'var(--page-bg)',
|
|
46
|
-
light: 'var(--bg-light)',
|
|
47
46
|
...button.backgroundColor,
|
|
48
47
|
...label.backgroundColor
|
|
49
48
|
},
|
|
@@ -58,8 +57,7 @@ export default {
|
|
|
58
57
|
...button.borderColor
|
|
59
58
|
},
|
|
60
59
|
borderRadius: {
|
|
61
|
-
'
|
|
62
|
-
'md': 'var(--border-radius-md)',
|
|
60
|
+
'1': 'var(--border-radius-1)',
|
|
63
61
|
},
|
|
64
62
|
keyframes: {
|
|
65
63
|
'accordion-down': {
|
|
@@ -22,8 +22,8 @@ export type AccountCollapsibleContentItemProps = {
|
|
|
22
22
|
|
|
23
23
|
const AccountCollapsibleHeader: FC<AccountCollapsibleHeaderProps> = ({ label }) => {
|
|
24
24
|
return (
|
|
25
|
-
<AccountCollapsibleTrigger className="flex justify-between items-center
|
|
26
|
-
<div className="font-medium text-[12px] leading-[1.
|
|
25
|
+
<AccountCollapsibleTrigger className="flex justify-between items-center w-full text-light align-center group">
|
|
26
|
+
<div className="font-medium text-[12px] leading-[1.33]">{label}</div>
|
|
27
27
|
<DropdownSmallOld className='group-[[data-state=open]]:rotate-180 transition-transform'/>
|
|
28
28
|
</AccountCollapsibleTrigger>
|
|
29
29
|
)
|
package/src/Info/Info.tsx
CHANGED
|
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
|
|
|
4
4
|
import { cn } from '../@/lib/utils'
|
|
5
5
|
// import { cn } from "@/lib/utils" порешать с алиасами
|
|
6
6
|
|
|
7
|
-
const infoVariants = cva('px-[16px] py-[12px] rounded-
|
|
7
|
+
const infoVariants = cva('px-[16px] py-[12px] rounded-1 text-[14px]', {
|
|
8
8
|
variants: {
|
|
9
9
|
variant: {
|
|
10
10
|
light: 'bg-[--cl-graphite-7]',
|
package/src/Input/Input.tsx
CHANGED
|
@@ -21,7 +21,7 @@ const InputField = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<
|
|
|
21
21
|
<input
|
|
22
22
|
type={type}
|
|
23
23
|
className={cn(
|
|
24
|
-
'border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-
|
|
24
|
+
'border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-1 focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed',
|
|
25
25
|
className
|
|
26
26
|
)}
|
|
27
27
|
ref={ref}
|
package/src/Page/Page.tsx
CHANGED
|
@@ -5,27 +5,38 @@ type IProps = {
|
|
|
5
5
|
children?: React.ReactNode
|
|
6
6
|
className?: string
|
|
7
7
|
}
|
|
8
|
-
|
|
9
|
-
const Navbar: FC = ({ children, className }: IProps) => {
|
|
10
|
-
return <div className={cn('flex items-center h-[44px] px-[20px]', className)}>{children}</div>
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
const Content: FC = ({ children, className }: IProps) => {
|
|
14
|
-
return <div className={cn('px-[20px]', className)}>{children}</div>
|
|
15
|
-
}
|
|
16
|
-
|
|
17
8
|
interface IPage extends FC<IProps> {
|
|
18
9
|
displayName: string
|
|
19
10
|
Navbar: FC<IProps>
|
|
20
11
|
Content: FC<IProps>
|
|
21
12
|
}
|
|
13
|
+
const Navbar: FC<IProps> = ({ children, className }) => {
|
|
14
|
+
return <div className={cn('flex items-center h-[44px] px-[20px]', className)}>{children}</div>
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const Content: FC<IProps> = ({ children, className }) => {
|
|
18
|
+
return <div className={cn('px-[20px] py-[16px]', className)}>{children}</div>
|
|
19
|
+
}
|
|
22
20
|
|
|
23
21
|
const Page: IPage = ({ children, className }: IProps) => {
|
|
24
|
-
return
|
|
22
|
+
return (
|
|
23
|
+
<div
|
|
24
|
+
className={cn(
|
|
25
|
+
'sm:container grid grid-cols-[minmax(0,_1fr)] grid-rows-[min-content_1fr_min-content] bg-page h-screen',
|
|
26
|
+
className
|
|
27
|
+
)}
|
|
28
|
+
>
|
|
29
|
+
{children}
|
|
30
|
+
</div>
|
|
31
|
+
)
|
|
25
32
|
}
|
|
26
33
|
|
|
27
34
|
Page.displayName = 'Page'
|
|
35
|
+
|
|
28
36
|
Page.Navbar = Navbar
|
|
37
|
+
Page.Navbar.displayName = 'Page.Navbar'
|
|
38
|
+
|
|
29
39
|
Page.Content = Content
|
|
40
|
+
Page.Content.displayName = "Page.Content"
|
|
30
41
|
|
|
31
|
-
export { Page }
|
|
42
|
+
export { Page }
|
|
@@ -3,166 +3,153 @@
|
|
|
3
3
|
@tailwind utilities;
|
|
4
4
|
|
|
5
5
|
@layer base {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
@font-face {
|
|
16
|
-
font-weight: 100 900;
|
|
17
|
-
font-family: 'Roboto';
|
|
18
|
-
font-style: italic;
|
|
19
|
-
font-stretch: 75% 100%;
|
|
20
|
-
src: url('../fonts/Roboto-Italic.woff2') format('woff2');
|
|
21
|
-
font-display: swap;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
body {
|
|
25
|
-
min-height: 100vh;
|
|
26
|
-
/* mobile viewport bug fix */
|
|
27
|
-
@supports (-webkit-touch-callout: none) {
|
|
28
|
-
min-height: -webkit-fill-available;
|
|
29
|
-
}
|
|
30
|
-
}
|
|
6
|
+
|
|
7
|
+
@font-face {
|
|
8
|
+
font-weight: 100 900;
|
|
9
|
+
font-family: "Roboto";
|
|
10
|
+
font-style: normal;
|
|
11
|
+
font-stretch: 75% 100%;
|
|
12
|
+
src: url("../fonts/Roboto.woff2") format("woff2");
|
|
13
|
+
font-display: swap;
|
|
14
|
+
}
|
|
31
15
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
16
|
+
@font-face {
|
|
17
|
+
font-weight: 100 900;
|
|
18
|
+
font-family: "Roboto";
|
|
19
|
+
font-style: italic;
|
|
20
|
+
font-stretch: 75% 100%;
|
|
21
|
+
src: url("../fonts/Roboto-Italic.woff2") format("woff2");
|
|
22
|
+
font-display: swap;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
:root {
|
|
26
|
+
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
|
27
|
+
|
|
28
|
+
--cl-white: #ffffff;
|
|
29
|
+
--cl-dark: #000000;
|
|
30
|
+
|
|
31
|
+
/* Синий */
|
|
32
|
+
--cl-blue-1: #253c77;
|
|
33
|
+
--cl-blue-2: #4971d0;
|
|
34
|
+
--cl-blue-3: #6b91eb;
|
|
35
|
+
--cl-blue-4: #81a5f9;
|
|
36
|
+
--cl-blue-5: #a7c0fb;
|
|
37
|
+
--cl-blue-6: #d2ddfa;
|
|
38
|
+
--cl-blue-7: #f2f6ff;
|
|
39
|
+
|
|
40
|
+
/* Серый */
|
|
41
|
+
--cl-graphite-1: #222733;
|
|
42
|
+
--cl-graphite-2: #464c59;
|
|
43
|
+
--cl-graphite-3: #777c87;
|
|
44
|
+
--cl-graphite-4: #9b9fa8;
|
|
45
|
+
--cl-graphite-5: #cbcdd1;
|
|
46
|
+
--cl-graphite-6: #e6e7e9;
|
|
47
|
+
--cl-graphite-7: #f5f5f6;
|
|
48
|
+
|
|
49
|
+
/* Зеленый */
|
|
50
|
+
--cl-green-1: #5e8c00;
|
|
51
|
+
--cl-green-2: #6ca300;
|
|
52
|
+
--cl-green-3: #88bd1f;
|
|
53
|
+
--cl-green-4: #a4d73e;
|
|
54
|
+
--cl-green-5: #c0eb69;
|
|
55
|
+
--cl-green-6: #d4f296;
|
|
56
|
+
--cl-green-7: #eefad4;
|
|
57
|
+
|
|
58
|
+
/* Желтый */
|
|
59
|
+
--cl-yellow-1: #b79310;
|
|
60
|
+
--cl-yellow-2: #d2aa0f;
|
|
61
|
+
--cl-yellow-3: #e8c113;
|
|
62
|
+
--cl-yellow-4: #efd04e;
|
|
63
|
+
--cl-yellow-5: #f5de88;
|
|
64
|
+
--cl-yellow-6: #fae6aa;
|
|
65
|
+
--cl-yellow-7: #fcf2ce;
|
|
66
|
+
|
|
67
|
+
/* Красный */
|
|
68
|
+
--cl-red-1: #a61d1d;
|
|
69
|
+
--cl-red-2: #bd2c2c;
|
|
70
|
+
--cl-red-3: #d43d3d;
|
|
71
|
+
--cl-red-4: #e36868;
|
|
72
|
+
--cl-red-5: #f19494;
|
|
73
|
+
--cl-red-6: #f9c1bd;
|
|
74
|
+
--cl-red-7: #ffe9e9;
|
|
75
|
+
|
|
76
|
+
--text-base: var(--cl-graphite-1);
|
|
77
|
+
--primary: var(--cl-blue-2);
|
|
78
|
+
--primary-light: var(--cl-blue-7);
|
|
79
|
+
--success: var(--cl-green-3);
|
|
80
|
+
--success-light: var(--cl-green-7);
|
|
81
|
+
--light: var(--cl-graphite-3);
|
|
82
|
+
--dark: var(--cl-graphite-2);
|
|
83
|
+
--disabled: var(--cl-graphite-4);
|
|
84
|
+
--warning: var(--cl-yellow-2);
|
|
85
|
+
--warning-light: var(--cl-yellow-7);
|
|
86
|
+
--critical: var(--cl-red-4);
|
|
87
|
+
--critical-light: var(--cl-red-7);
|
|
88
|
+
/* --text-quaternary:; */
|
|
89
|
+
|
|
90
|
+
--page-bg: var(--cl-white);
|
|
91
|
+
|
|
92
|
+
/* ЦВЕТ КНОПОК */
|
|
93
|
+
/* =========================================== */
|
|
94
|
+
--btn-primary: var(--cl-white);
|
|
95
|
+
--btn-primary-bg: var(--cl-blue-2);
|
|
96
|
+
--btn-primary-hover-bg: var(--cl-blue-3);
|
|
97
|
+
--btn-primary-focus-bg: var(--cl-blue-1);
|
|
98
|
+
--btn-primary-active-bg: var(--cl-blue-1);
|
|
99
|
+
|
|
100
|
+
--btn-success: var(--cl-white);
|
|
101
|
+
--btn-success-bg: var(--cl-green-3);
|
|
102
|
+
--btn-success-hover-bg: var(--cl-green-4);
|
|
103
|
+
--btn-success-focus-bg: var(--cl-green-1);
|
|
104
|
+
--btn-success-active-bg: var(--cl-green-1);
|
|
105
|
+
|
|
106
|
+
--btn-secondary: var(--cl-graphite-2);
|
|
107
|
+
--btn-secondary-bg: #EDEEEF;
|
|
108
|
+
--btn-secondary-hover-bg: #E4E5E7;
|
|
109
|
+
--btn-secondary-focus-bg: #E4E5E7;
|
|
110
|
+
--btn-secondary-active-bg: #DCDCDE;
|
|
111
|
+
|
|
112
|
+
--btn-ghost: var(--cl-graphite-2);
|
|
113
|
+
--btn-ghost-bg: var(--cl-white);
|
|
114
|
+
--btn-ghost-hover-bg: #F6F6F7;
|
|
115
|
+
--btn-ghost-focus-bg: #F6F6F7;
|
|
116
|
+
--btn-ghost-active-bg: #EDEEEF;
|
|
117
|
+
--btn-primary-outline: var(--cl-blue-2);
|
|
118
|
+
--btn-primary-outline-bg: var(--cl-white);
|
|
119
|
+
--btn-primary-outline-hover-bg: var(--cl-blue-3);
|
|
120
|
+
--btn-primary-outline-focus-bg: var(--cl-blue-3);
|
|
121
|
+
--btn-primary-outline-active-bg: var(--cl-blue-1);
|
|
122
|
+
|
|
123
|
+
--btn-txt-primary: var(--cl-blue-2);
|
|
124
|
+
--btn-txt-primary-hover: var(--cl-blue-3);
|
|
125
|
+
--btn-txt-primary-focus: var(--cl-blue-3);
|
|
126
|
+
--btn-txt-primary-active: var(--cl-blue-1);
|
|
127
|
+
/* =========================================== */
|
|
128
|
+
/* ЦВЕТ КНОПОК */
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
/* ЦВЕТ ПОЛЯ ВВОДА */
|
|
132
|
+
/* =========================================== */
|
|
133
|
+
|
|
134
|
+
/* =========================================== */
|
|
135
|
+
/* ЦВЕТ ПОЛЯ ВВОДА */
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
/* BORDER */
|
|
139
|
+
/* =========================================== */
|
|
140
|
+
--border-color: var(--cl-graphite-5);
|
|
141
|
+
--border-radius-1: 8px;
|
|
142
|
+
/* =========================================== */
|
|
143
|
+
/* BORDER */
|
|
144
|
+
|
|
145
|
+
/* SHADOWS */
|
|
146
|
+
/* =========================================== */
|
|
147
|
+
--shadow-1: 0px 4px 16px rgba(36, 48, 54, 0.08);
|
|
148
|
+
--shadow-2: 0 2px 10px rgba(36, 48, 54, 0.12);
|
|
149
|
+
/* =========================================== */
|
|
150
|
+
/* SHADOWS */
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
.dark {}
|
|
155
|
+
}
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import cn from 'clsx'
|
|
3
|
-
import * as Accordion from '@radix-ui/react-accordion'
|
|
4
|
-
import {
|
|
5
|
-
AccordionMultipleProps,
|
|
6
|
-
AccordionSingleProps,
|
|
7
|
-
AccordionContent,
|
|
8
|
-
AccordionHeader,
|
|
9
|
-
AccordionItem,
|
|
10
|
-
AccordionTrigger
|
|
11
|
-
} from "@radix-ui/react-accordion";
|
|
12
|
-
|
|
13
|
-
type CollapseComponents = {
|
|
14
|
-
Item: typeof AccordionItem,
|
|
15
|
-
Header: typeof AccordionHeader,
|
|
16
|
-
Trigger: typeof AccordionTrigger,
|
|
17
|
-
Content: typeof AccordionContent,
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
const Collapse: React.FC<AccordionSingleProps | AccordionMultipleProps> & CollapseComponents = ({...props}) => <Accordion.Root {...props}/>
|
|
21
|
-
|
|
22
|
-
const CollapseItem = React.forwardRef<
|
|
23
|
-
React.ElementRef<typeof Accordion.Item>,
|
|
24
|
-
React.ComponentPropsWithoutRef<typeof Accordion.Item>
|
|
25
|
-
>(({ className, ...props }, ref) => (
|
|
26
|
-
<Accordion.Item
|
|
27
|
-
ref={ref}
|
|
28
|
-
className={cn('border-b', className)}
|
|
29
|
-
{...props}
|
|
30
|
-
/>
|
|
31
|
-
))
|
|
32
|
-
|
|
33
|
-
const CollapseHeader = React.forwardRef<
|
|
34
|
-
React.ElementRef<typeof Accordion.Header>,
|
|
35
|
-
React.ComponentPropsWithoutRef<typeof Accordion.Header>
|
|
36
|
-
>(({ className, children, ...props }, ref) => (
|
|
37
|
-
<Accordion.Header
|
|
38
|
-
className={cn('flex', className)}
|
|
39
|
-
{...props}
|
|
40
|
-
ref={ref}
|
|
41
|
-
>
|
|
42
|
-
{children}
|
|
43
|
-
</Accordion.Header>
|
|
44
|
-
))
|
|
45
|
-
|
|
46
|
-
const CollapseTrigger = React.forwardRef<
|
|
47
|
-
React.ElementRef<typeof Accordion.Trigger>,
|
|
48
|
-
React.ComponentPropsWithoutRef<typeof Accordion.Trigger>
|
|
49
|
-
>(({ className, children, ...props }, ref) => (
|
|
50
|
-
<Accordion.Trigger
|
|
51
|
-
ref={ref}
|
|
52
|
-
className={cn(
|
|
53
|
-
'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
|
|
54
|
-
className
|
|
55
|
-
)}
|
|
56
|
-
{...props}
|
|
57
|
-
>
|
|
58
|
-
{children}
|
|
59
|
-
{/*<ChevronDown className="w-4 h-4 transition-transform duration-200 shrink-0" />*/}
|
|
60
|
-
</Accordion.Trigger>
|
|
61
|
-
))
|
|
62
|
-
|
|
63
|
-
const CollapseContent = React.forwardRef<
|
|
64
|
-
React.ElementRef<typeof Accordion.Content>,
|
|
65
|
-
React.ComponentPropsWithoutRef<typeof Accordion.Content>
|
|
66
|
-
>(({ className, children, ...props }, ref) => (
|
|
67
|
-
<Accordion.Content
|
|
68
|
-
ref={ref}
|
|
69
|
-
className={cn(
|
|
70
|
-
'overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down',
|
|
71
|
-
className
|
|
72
|
-
)}
|
|
73
|
-
{...props}
|
|
74
|
-
>
|
|
75
|
-
{children}
|
|
76
|
-
</Accordion.Content>
|
|
77
|
-
))
|
|
78
|
-
|
|
79
|
-
Collapse.Item = CollapseItem
|
|
80
|
-
CollapseItem.displayName = "CollapseItem"
|
|
81
|
-
Collapse.Header = CollapseHeader
|
|
82
|
-
CollapseHeader.displayName = "CollapseHeader"
|
|
83
|
-
Collapse.Trigger = CollapseTrigger
|
|
84
|
-
CollapseTrigger.displayName = "CollapseTrigger"
|
|
85
|
-
Collapse.Content = CollapseContent
|
|
86
|
-
CollapseContent.displayName = "CollapseContent"
|
|
87
|
-
|
|
88
|
-
export default Collapse
|
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
import * as React from 'react'
|
|
2
|
-
|
|
3
|
-
import { DropdownSmallOld, CheckSmall } from '../Icon'
|
|
4
|
-
|
|
5
|
-
import Select, {
|
|
6
|
-
components,
|
|
7
|
-
ControlProps,
|
|
8
|
-
OptionProps,
|
|
9
|
-
DropdownIndicatorProps,
|
|
10
|
-
StylesConfig,
|
|
11
|
-
SingleValueProps,
|
|
12
|
-
MenuProps,
|
|
13
|
-
ValueContainerProps,
|
|
14
|
-
} from 'react-select'
|
|
15
|
-
|
|
16
|
-
import { cn } from '../@/lib/utils'
|
|
17
|
-
|
|
18
|
-
const selectTriggerClasses: string =
|
|
19
|
-
'flex items-center bg-gradient-to-r from-[--cl-blue-3] to-primary shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)] px-[16px] py-[8px] border-none rounded-md min-h-[80px] text-left text-white'
|
|
20
|
-
|
|
21
|
-
const colourStyles: StylesConfig = {
|
|
22
|
-
control: () => ({}),
|
|
23
|
-
option: () => ({}),
|
|
24
|
-
input: () => ({}),
|
|
25
|
-
dropdownIndicator: () => ({}),
|
|
26
|
-
indicatorsContainer: () => ({}),
|
|
27
|
-
menu: () => ({}),
|
|
28
|
-
menuList: () => ({}),
|
|
29
|
-
singleValue: () => ({}),
|
|
30
|
-
valueContainer: () => ({}),
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const Control = ({ children, ...props }: ControlProps) => {
|
|
34
|
-
const style = { cursor: 'pointer' }
|
|
35
|
-
return (
|
|
36
|
-
<components.Control
|
|
37
|
-
className={selectTriggerClasses}
|
|
38
|
-
{...props}
|
|
39
|
-
>
|
|
40
|
-
{children}
|
|
41
|
-
</components.Control>
|
|
42
|
-
)
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
const optionClasses =
|
|
46
|
-
'flex items-center first:rounded-t-md last:rounded-b-md px-[12px] py-[16px] w-full cursor-default select-none outline-none'
|
|
47
|
-
|
|
48
|
-
const Option = ({ children, ...props }: OptionProps) => {
|
|
49
|
-
console.log({ ...props })
|
|
50
|
-
const {
|
|
51
|
-
isSelected,
|
|
52
|
-
isFocused,
|
|
53
|
-
isDisabled,
|
|
54
|
-
data : { label, account, balance, cur },
|
|
55
|
-
} = props
|
|
56
|
-
const style = { cursor: 'pointer' }
|
|
57
|
-
return (
|
|
58
|
-
<components.Option
|
|
59
|
-
className={cn(
|
|
60
|
-
optionClasses,
|
|
61
|
-
{ 'bg-light': isFocused },
|
|
62
|
-
{ 'opacity-50 pointer-events-none': isDisabled }
|
|
63
|
-
)}
|
|
64
|
-
{...props}
|
|
65
|
-
>
|
|
66
|
-
<span className="flex basis-0 grow">
|
|
67
|
-
<span>
|
|
68
|
-
<span>{label}</span><br/>
|
|
69
|
-
<span className='text-[14px] text-light'>{account}</span>
|
|
70
|
-
</span>
|
|
71
|
-
<span className='ml-auto shrink-0'>
|
|
72
|
-
{balance} {cur}
|
|
73
|
-
</span>
|
|
74
|
-
</span>
|
|
75
|
-
|
|
76
|
-
<span className='ml-[16px] w-[24px] h-[24px] shrink-0'>
|
|
77
|
-
{isSelected && (
|
|
78
|
-
<CheckSmall
|
|
79
|
-
width="24"
|
|
80
|
-
height="24"
|
|
81
|
-
className="text-primary"
|
|
82
|
-
/>
|
|
83
|
-
)}
|
|
84
|
-
</span>
|
|
85
|
-
|
|
86
|
-
</components.Option>
|
|
87
|
-
)
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
const DropdownIndicator = ({ children, ...props }: DropdownIndicatorProps) => {
|
|
91
|
-
return (
|
|
92
|
-
<components.DropdownIndicator
|
|
93
|
-
className="shrink-0"
|
|
94
|
-
{...props}
|
|
95
|
-
>
|
|
96
|
-
<DropdownSmallOld
|
|
97
|
-
className="text-white"
|
|
98
|
-
width="16"
|
|
99
|
-
height="16"
|
|
100
|
-
/>
|
|
101
|
-
</components.DropdownIndicator>
|
|
102
|
-
)
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
const ValueContainer = ({ children, ...props }: ValueContainerProps) => {
|
|
106
|
-
return (
|
|
107
|
-
<components.ValueContainer
|
|
108
|
-
className="flex-1 grid"
|
|
109
|
-
{...props}
|
|
110
|
-
>
|
|
111
|
-
{children}
|
|
112
|
-
</components.ValueContainer>
|
|
113
|
-
)
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
const SingleValue = ({ children, ...props }: SingleValueProps) => {
|
|
117
|
-
// @ts-ignore
|
|
118
|
-
const { label, account, balance, cur } = props.data
|
|
119
|
-
return (
|
|
120
|
-
<components.SingleValue className='col-start-1 col-end-3 row-start-1 row-end-2' {...props}>
|
|
121
|
-
<span className="block max-w-full text-[16px] truncate leading-[1.5]">
|
|
122
|
-
{label} <span className="opacity-75 text-[14px] leading-[1.42]">{account}</span>
|
|
123
|
-
</span>
|
|
124
|
-
<span className="block mt-[8px] font-medium text-[24px] leading-[1.333]">
|
|
125
|
-
{balance} {cur}
|
|
126
|
-
</span>
|
|
127
|
-
</components.SingleValue>
|
|
128
|
-
)
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
const Menu = ({ children, ...props }: MenuProps) => {
|
|
132
|
-
return (
|
|
133
|
-
<components.Menu
|
|
134
|
-
className="bg-page drop-shadow-1 mt-[8px] rounded-md"
|
|
135
|
-
{...props}
|
|
136
|
-
>
|
|
137
|
-
{children}
|
|
138
|
-
</components.Menu>
|
|
139
|
-
)
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
const SelectAccountCard = React.forwardRef<Select, { className: string | undefined }>(({ className, ...props }, ref) => (
|
|
143
|
-
<Select
|
|
144
|
-
className={cn(className)}
|
|
145
|
-
classNamePrefix="super"
|
|
146
|
-
isDisabled={false}
|
|
147
|
-
isSearchable={false}
|
|
148
|
-
components={{
|
|
149
|
-
Control,
|
|
150
|
-
Option,
|
|
151
|
-
SingleValue,
|
|
152
|
-
DropdownIndicator,
|
|
153
|
-
IndicatorSeparator: () => null,
|
|
154
|
-
Menu,
|
|
155
|
-
ValueContainer,
|
|
156
|
-
}}
|
|
157
|
-
styles={colourStyles}
|
|
158
|
-
unstyled={true}
|
|
159
|
-
{...props}
|
|
160
|
-
/>
|
|
161
|
-
))
|
|
162
|
-
|
|
163
|
-
export { SelectAccountCard }
|
package/src/Select/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { SelectAccountCard } from './SelectAccountCard'
|