@modul/mbui 0.0.20-beta-pv-52992-d5155aa6 → 0.0.20-beta-pv-53139-48074e41

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.
Files changed (64) hide show
  1. package/dist/Alert/Alert.js +1 -1
  2. package/dist/Alert/Alert.js.map +1 -1
  3. package/dist/Badge/Badge.d.ts +10 -0
  4. package/dist/Badge/Badge.js +52 -0
  5. package/dist/Badge/Badge.js.map +1 -0
  6. package/dist/Badge/index.d.ts +1 -0
  7. package/dist/Badge/index.js +7 -0
  8. package/dist/Badge/index.js.map +1 -0
  9. package/dist/Button/Button.js +1 -1
  10. package/dist/FavoritePyments/FavoritePaymentsList.js +1 -1
  11. package/dist/FavoritePyments/FavoritePaymentsList.js.map +1 -1
  12. package/dist/Input-OTP/Input.js +2 -3
  13. package/dist/Input-OTP/Input.js.map +1 -1
  14. package/dist/Page/Page.js +1 -1
  15. package/dist/Page/Page.js.map +1 -1
  16. package/dist/Select/SelectAccountCard.js +33 -5
  17. package/dist/Select/SelectAccountCard.js.map +1 -1
  18. package/dist/Select/SelectAsync.js +73 -12
  19. package/dist/Select/SelectAsync.js.map +1 -1
  20. package/dist/Select/SelectBase.js +73 -13
  21. package/dist/Select/SelectBase.js.map +1 -1
  22. package/dist/Select/index.d.ts +0 -1
  23. package/dist/Select/index.js +1 -3
  24. package/dist/Select/index.js.map +1 -1
  25. package/dist/Toaster/Toaster.d.ts +13 -0
  26. package/dist/Toaster/Toaster.js +60 -0
  27. package/dist/Toaster/Toaster.js.map +1 -0
  28. package/dist/Toaster/index.d.ts +1 -0
  29. package/dist/Toaster/index.js +7 -0
  30. package/dist/Toaster/index.js.map +1 -0
  31. package/dist/index.d.ts +8 -5
  32. package/dist/index.js +11 -5
  33. package/dist/index.js.map +1 -1
  34. package/package.json +3 -1
  35. package/src/@/config/index.ts +5 -0
  36. package/src/Alert/Alert.tsx +1 -1
  37. package/src/Badge/Badge.tsx +58 -0
  38. package/src/Badge/index.ts +1 -0
  39. package/src/Button/Button.tsx +1 -1
  40. package/src/FavoritePyments/FavoritePaymentsList.tsx +1 -1
  41. package/src/Input-OTP/Input.tsx +2 -2
  42. package/src/Page/Page.tsx +1 -1
  43. package/src/Select/SelectAccountCard.tsx +51 -1
  44. package/src/Select/SelectAsync.tsx +162 -1
  45. package/src/Select/SelectBase.tsx +168 -19
  46. package/src/Select/index.ts +0 -1
  47. package/src/Toaster/Toaster.tsx +71 -0
  48. package/src/Toaster/index.ts +1 -0
  49. package/src/assets/css/global.css +9 -1
  50. package/src/assets/images/logo/sbp-logo.svg +1 -0
  51. package/src/index.ts +16 -11
  52. package/src/pages/payments/SmsSign/sms-sign.tsx +151 -0
  53. package/dist/Select/SelectAccount.d.ts +0 -8
  54. package/dist/Select/SelectAccount.js +0 -50
  55. package/dist/Select/SelectAccount.js.map +0 -1
  56. package/dist/Select/components/components.d.ts +0 -15
  57. package/dist/Select/components/components.js +0 -80
  58. package/dist/Select/components/components.js.map +0 -1
  59. package/dist/Select/components/index.d.ts +0 -1
  60. package/dist/Select/components/index.js +0 -17
  61. package/dist/Select/components/index.js.map +0 -1
  62. package/src/Select/SelectAccount.tsx +0 -101
  63. package/src/Select/components/components.tsx +0 -186
  64. package/src/Select/components/index.tsx +0 -15
@@ -1,22 +1,169 @@
1
1
  import * as React from 'react'
2
2
 
3
+ import { DropdownSmallOld, CheckSmall } from '../../src/Icon'
4
+
3
5
  import Select, {
4
- GroupBase,
5
- Props,
6
+ components,
7
+ ControlProps,
8
+ OptionProps,
9
+ DropdownIndicatorProps,
10
+ StylesConfig,
11
+ SingleValueProps,
12
+ MenuProps,
13
+ PlaceholderProps,
14
+ ValueContainerProps,
15
+ InputProps,
16
+ LoadingIndicatorProps,
17
+ IndicatorsContainerProps, GroupBase, Props,
6
18
  } from 'react-select'
7
- import {
8
- colourStyles,
9
- Control,
10
- DropdownIndicator,
11
- IndicatorsContainer,
12
- Input,
13
- LoadingIndicator,
14
- Menu,
15
- Placeholder,
16
- SingleValue,
17
- ValueContainer,
18
- Option,
19
- } from './components'
19
+
20
+ import { cn } from '../@/lib/utils'
21
+
22
+ const selectTriggerClasses: string = `
23
+ flex
24
+ items-center
25
+ py-[12px]
26
+ px-[16px]
27
+ h-[44px]
28
+ text-left
29
+ border-[1px]
30
+ border-input
31
+ rounded-sm
32
+ cursor-pointer
33
+ `
34
+
35
+ const colourStyles: StylesConfig = {
36
+ control: () => ({}),
37
+ option: () => ({}),
38
+ input: () => ({}),
39
+ dropdownIndicator: () => ({}),
40
+ indicatorsContainer: () => ({}),
41
+ menu: () => ({}),
42
+ menuList: () => ({}),
43
+ singleValue: () => ({}),
44
+ valueContainer: () => ({}),
45
+ }
46
+
47
+ const Input = ({...props }: InputProps) => {
48
+ return <components.Input className='col-start-1 col-end-3 row-start-1 row-end-2' {...props} />
49
+ }
50
+
51
+ const Control = ({ children, ...props }: ControlProps) => {
52
+ const { isFocused } = props
53
+ return (
54
+ <components.Control
55
+ className={cn(selectTriggerClasses, { 'outline outline-primary outline-offset-2 outline-2': isFocused })}
56
+ {...props}
57
+ >
58
+ {children}
59
+ </components.Control>
60
+ )
61
+ }
62
+
63
+ const optionClasses =
64
+ 'flex items-center first:rounded-t-sm last:rounded-b-sm px-[16px] py-[12px] w-full cursor-default select-none outline-none'
65
+
66
+ const Option = ({ children, ...props }: OptionProps) => {
67
+ const {
68
+ isSelected,
69
+ isFocused,
70
+ isDisabled,
71
+ } = props
72
+ return (
73
+ <components.Option
74
+ className={cn(optionClasses, { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled })}
75
+ {...props}
76
+ >
77
+ <span className="flex basis-0 grow">{children}</span>
78
+
79
+ <span className="ml-[16px] shrink-0 size-[24px]">
80
+ {isSelected && (
81
+ <CheckSmall
82
+ width="24"
83
+ height="24"
84
+ className="text-primary"
85
+ />
86
+ )}
87
+ </span>
88
+ </components.Option>
89
+ )
90
+ }
91
+
92
+ const IndicatorsContainer = ({ children, ...props }: IndicatorsContainerProps) => {
93
+ return (
94
+ <components.IndicatorsContainer className='flex items-center gap-x-[8px] shrink-0' {...props}>
95
+ {children}
96
+ </components.IndicatorsContainer>
97
+ )
98
+ }
99
+
100
+ const LoadingIndicator = ({...props }: LoadingIndicatorProps) => {
101
+ return (
102
+ <components.LoadingIndicator
103
+ className='text-light shrink-0'
104
+ {...props}
105
+ />
106
+ )
107
+ }
108
+
109
+ const DropdownIndicator = ({ children, ...props }: DropdownIndicatorProps) => {
110
+ return (
111
+ <components.DropdownIndicator
112
+ className="shrink-0"
113
+ {...props}
114
+ >
115
+ <DropdownSmallOld
116
+ className="text-light"
117
+ width="12"
118
+ height="12"
119
+ />
120
+ </components.DropdownIndicator>
121
+ )
122
+ }
123
+
124
+ const ValueContainer = ({ children, ...props }: ValueContainerProps) => {
125
+ return (
126
+ <components.ValueContainer
127
+ className="flex-1 grid"
128
+ {...props}
129
+ >
130
+ {children}
131
+ </components.ValueContainer>
132
+ )
133
+ }
134
+
135
+ const SingleValue = ({ children, ...props }: SingleValueProps) => {
136
+ return (
137
+ <components.SingleValue
138
+ className="col-start-1 col-end-3 row-start-1 row-end-2"
139
+ {...props}
140
+ >
141
+ {children}
142
+ </components.SingleValue>
143
+ )
144
+ }
145
+
146
+ const Menu = ({ children, ...props }: MenuProps) => {
147
+ return (
148
+ <components.Menu
149
+ className="z-[1] absolute inset-x-0 bg-page shadow-sm mt-[8px] rounded-sm"
150
+ {...props}
151
+ >
152
+ {children}
153
+ </components.Menu>
154
+ )
155
+ }
156
+
157
+ const Placeholder = ({ children, ...props }: PlaceholderProps) => {
158
+ return (
159
+ <components.Placeholder
160
+ className="col-start-1 col-end-3 row-start-1 row-end-2 text-[16px] text-light truncate"
161
+ {...props}
162
+ >
163
+ {children}
164
+ </components.Placeholder>
165
+ )
166
+ }
20
167
 
21
168
  type SelectBaseProps<
22
169
  Option,
@@ -24,9 +171,11 @@ type SelectBaseProps<
24
171
  Group extends GroupBase<Option> = GroupBase<Option>
25
172
  > = Props<Option, IsMulti, Group>
26
173
 
27
- function SelectBase<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
28
- props: SelectBaseProps<Option, IsMulti, Group>
29
- ) {
174
+ function SelectBase<
175
+ Option,
176
+ IsMulti extends boolean = false,
177
+ Group extends GroupBase<Option> = GroupBase<Option>
178
+ >(props: SelectBaseProps<Option, IsMulti, Group>) {
30
179
  return (
31
180
  <Select
32
181
  components={{
@@ -40,7 +189,7 @@ function SelectBase<Option, IsMulti extends boolean = false, Group extends Group
40
189
  Placeholder,
41
190
  Input,
42
191
  LoadingIndicator,
43
- IndicatorsContainer,
192
+ IndicatorsContainer
44
193
  }}
45
194
  styles={colourStyles}
46
195
  unstyled={true}
@@ -1,5 +1,4 @@
1
1
  export { SelectAccountCard } from './SelectAccountCard'
2
- export { SelectAccount } from './SelectAccount'
3
2
  export { SelectAsync } from './SelectAsync'
4
3
  export { SelectBase } from './SelectBase'
5
4
  export { Select } from './Select'
@@ -0,0 +1,71 @@
1
+ import React, { ReactNode } from 'react'
2
+ import { InfoSolid, CheckCircleSolid } from '../Icon'
3
+ import { Toaster as ToastContainer, toast as toastItem, ToasterProps, ExternalToast } from 'sonner'
4
+
5
+ const Toaster = ({ ...props }: ToasterProps) => {
6
+ return (
7
+ <ToastContainer
8
+ visibleToasts={1}
9
+ toastOptions={{
10
+ unstyled: true,
11
+ classNames: {
12
+ icon: 'shrink-0 size-[24px]',
13
+ toast: 'px-[12px] py-[8px] text-white border-none rounded-md flex w-full sm:width-[--page-container-width] shadow-md',
14
+ description: 'text-[14px] leading-[1.125] mt-[4px]',
15
+ content: 'grow',
16
+ actionButton: 'shrink-0 py-[12px] px-[24px] font-medium',
17
+ cancelButton: 'shrink-0 py-[12px] px-[24px] font-medium',
18
+ },
19
+ }}
20
+ expand={true}
21
+ {...props}
22
+ />
23
+ )
24
+ }
25
+
26
+ Toaster.displayName = 'Toaster'
27
+ interface IToast {
28
+ success: (title?: string | ReactNode, options?: ExternalToast) => React.ReactNode
29
+ critical: (title?: string | ReactNode, options?: ExternalToast) => React.ReactNode
30
+ snackbar: (title?: string | ReactNode, options?: ExternalToast) => React.ReactNode
31
+ }
32
+ const toast: IToast = {
33
+ success: (title, options) => {
34
+ return toastItem(title, {
35
+ position: 'top-center',
36
+ icon: <CheckCircleSolid />,
37
+ classNames: {
38
+ content: 'w-[calc(100%-28px)]',
39
+ },
40
+ className: 'bg-success',
41
+ ...options,
42
+ })
43
+ },
44
+
45
+ critical: (title, options) => {
46
+ return toastItem(title, {
47
+ position: 'top-center',
48
+ icon: <InfoSolid />,
49
+ duration: Infinity,
50
+ classNames: {
51
+ content: 'w-[calc(100%-28px)]',
52
+ },
53
+ className: 'bg-critical',
54
+ ...options,
55
+ })
56
+ },
57
+
58
+ snackbar: (title, options) => {
59
+ return toastItem(title, {
60
+ position: 'bottom-center',
61
+ classNames: {
62
+ toast: 'items-center',
63
+ content: 'mt-0'
64
+ },
65
+ className: 'bg-[--base]',
66
+ ...options,
67
+ })
68
+ },
69
+ }
70
+
71
+ export { Toaster, toast }
@@ -0,0 +1 @@
1
+ export { Toaster, toast} from './Toaster'
@@ -92,7 +92,7 @@
92
92
  --bg-light: var(--cl-graphite-7);
93
93
  --warning: var(--cl-orange-2);
94
94
  --warning-light: var(--cl-yellow-7);
95
- --critical: var(--cl-red-3);
95
+ --critical: var(--cl-red-2);
96
96
  --critical-light: var(--cl-red-7);
97
97
  /* --text-quaternary:; */
98
98
 
@@ -134,6 +134,9 @@
134
134
  --btn-txt-primary-hover: var(--cl-blue-3);
135
135
  --btn-txt-primary-focus: var(--cl-blue-3);
136
136
  --btn-txt-primary-active: var(--cl-blue-1);
137
+
138
+ --btn-widget-bg:var(--page-bg);
139
+ --btn-widget-icon:var(--primary);
137
140
  /* =========================================== */
138
141
  /* ЦВЕТ КНОПОК */
139
142
 
@@ -183,6 +186,11 @@
183
186
  /* =========================================== */
184
187
  /* DRAWER */
185
188
 
189
+ --page-header-geight: 44px;
190
+ --page-container-width: 375px;
191
+
192
+
193
+
186
194
  }
187
195
 
188
196
 
@@ -0,0 +1 @@
1
+ <svg fill="none" height="36" width="68" xmlns="http://www.w3.org/2000/svg"><path d="m56.8 14.7v7.47h-2.62v-5.24h-2.54v5.24h-2.64v-7.47zm-9.04 4.16c0 2.17-1.82 3.6-4.25 3.6-2.52 0-4.36-1.51-4.36-4.96 0-2.96 1.89-5.4 4.68-5.44 1.22 0 3.85-.06 3.85-.06l-1.18 2.18h-2.38a2.48 2.48 0 0 0 -2.45 2.15 3.6 3.6 0 0 1 2.52-.95c2.23 0 3.57 1.37 3.57 3.48zm-2.7 0c0-.98-.63-1.55-1.54-1.55-.9 0-1.56.58-1.56 1.56a1.51 1.51 0 0 0 1.56 1.6c.98 0 1.54-.73 1.54-1.61zm-8 1.05c-.5.25-1.04.4-1.59.43-1.1.03-2.06-.64-2.06-1.85 0-1.2.85-1.84 2.03-1.84.73 0 1.68.5 1.68.5l1.06-1.9a4.28 4.28 0 0 0 -2.57-.76c-2.61.01-4.61 1.66-4.61 3.99s1.89 3.98 4.6 3.93c.87-.04 1.7-.28 2.46-.7z" fill="#1c1637"/><path d="m4 9.53 3.64 6.5v3.95l-3.64 6.49z" fill="#5b57a2"/><path d="m17.97 13.66 3.4-2.09h6.98l-10.38 6.35z" fill="#d90751"/><path d="m17.95 9.5.02 8.59-3.65-2.24v-12.85z" fill="#fab718"/><path d="m28.35 11.57h-6.97l-3.43-2.07-3.63-6.5z" fill="#ed6f26"/><path d="m17.97 26.5v-4.17l-3.65-2.2v12.87z" fill="#63b22f"/><path d="m21.37 24.43-13.73-8.4-3.64-6.51 24.34 14.9h-6.97z" fill="#1487c9"/><path d="m14.32 33 3.65-6.5 3.4-2.07h6.96l-14 8.57z" fill="#017f36"/><path d="m4 26.47 10.35-6.33-3.48-2.14-3.23 1.97z" fill="#984995"/></svg>
package/src/index.ts CHANGED
@@ -19,10 +19,10 @@ import {
19
19
  AccountCollapsibleContent,
20
20
  AccountCollapsibleContentItem,
21
21
  } from './Collapsible'
22
- import { Button, ButtonWidget } from './Button'
22
+ import { Button, buttonVariants, ButtonWidget } from './Button'
23
23
  import { Audio } from './Audio'
24
24
  import { cn } from './@/lib/utils'
25
- import { Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent } from './Drawer'
25
+ import { Drawer, DrawerTrigger, DrawerClose, DrawerContent } from './Drawer'
26
26
  import { Page } from './Page'
27
27
  import { Chip } from './Chip'
28
28
  import { InputField, InputLabel, InputMask } from './Input'
@@ -30,12 +30,12 @@ import { Alert } from './Alert'
30
30
  import { Switch } from './Switch'
31
31
  import { Label } from './Label'
32
32
  import { Textarea } from './Textarea'
33
- import { SelectAccountCard, SelectAsync, SelectAccount, Select } from './Select'
33
+ import { SelectAccountCard, SelectAsync } from './Select'
34
34
  import { Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage } from './Form'
35
35
  import { Calendar } from './Calendar'
36
36
  import { DatePicker } from './DatePicker'
37
-
38
- import { Progress } from "./Progress"
37
+ import { Select } from './Select'
38
+ import { Progress } from './Progress'
39
39
  import {
40
40
  AlertDialog,
41
41
  AlertDialogTrigger,
@@ -50,7 +50,8 @@ import {
50
50
  import { MessageTyping } from "./Chat"
51
51
  import { FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses } from './FavoritePyments'
52
52
  import { DigitKeyPad } from "./DigitKeyPad"
53
-
53
+ import { Badge, badgeVariants } from './Badge'
54
+ import { Toaster, toast } from './Toaster'
54
55
 
55
56
  export {
56
57
  Tooltip,
@@ -71,6 +72,7 @@ export {
71
72
  AccountCollapsibleContent,
72
73
  AccountCollapsibleContentItem,
73
74
  Button,
75
+ buttonVariants,
74
76
  InputField,
75
77
  InputLabel,
76
78
  Audio,
@@ -78,7 +80,7 @@ export {
78
80
  Icon,
79
81
  Drawer,
80
82
  DrawerTrigger,
81
- DrawerTitle,
83
+
82
84
  DrawerClose,
83
85
  DrawerContent,
84
86
  BottomNavigation,
@@ -93,9 +95,6 @@ export {
93
95
  Label,
94
96
  Textarea,
95
97
  SelectAccountCard,
96
- SelectAccount,
97
- SelectAsync,
98
- Select,
99
98
  Form,
100
99
  FormLabel,
101
100
  FormField,
@@ -105,7 +104,9 @@ export {
105
104
  FormMessage,
106
105
  Calendar,
107
106
  DatePicker,
107
+ SelectAsync,
108
108
  InputMask,
109
+ Select,
109
110
  AlertDialog,
110
111
  AlertDialogTrigger,
111
112
  AlertDialogContent,
@@ -120,6 +121,10 @@ export {
120
121
  FavoritePaymentsItem,
121
122
  FarvoritePaymentDescription,
122
123
  farvoriteLinkClasses,
124
+ Badge,
125
+ badgeVariants,
123
126
  DigitKeyPad,
124
127
  ButtonWidget,
125
- }
128
+ Toaster,
129
+ toast,
130
+ }
@@ -0,0 +1,151 @@
1
+ import React, { useState } from 'react'
2
+ import {
3
+ Alert,
4
+ Button,
5
+ cn,
6
+ Drawer,
7
+ DrawerContent,
8
+ DrawerTitle,
9
+ DrawerTrigger,
10
+ InputOTP,
11
+ InputOTPGroup,
12
+ InputOTPSlot,
13
+ Page,
14
+ } from '../../..'
15
+ import { Close } from '../../../Icon'
16
+
17
+ const InputSMS: React.FC = (props) => (
18
+ <InputOTP
19
+ maxLength={5}
20
+ {...props}
21
+ >
22
+ <InputOTPGroup className="gap-[10px] mx-auto">
23
+ <InputOTPSlot
24
+ index={0}
25
+ className="font-bold text-[40px] leading-[1.1]"
26
+ />
27
+ <InputOTPSlot
28
+ className="font-bold text-[40px] leading-[1.1]"
29
+ index={1}
30
+ />
31
+ <InputOTPSlot
32
+ className="font-bold text-[40px] leading-[1.1]"
33
+ index={2}
34
+ />
35
+ <InputOTPSlot
36
+ className="font-bold text-[40px] leading-[1.1]"
37
+ index={3}
38
+ />
39
+ <InputOTPSlot
40
+ className="font-bold text-[40px] leading-[1.1]"
41
+ index={4}
42
+ />
43
+ </InputOTPGroup>
44
+ </InputOTP>
45
+ )
46
+
47
+ export const smsSignPage = () => {
48
+ const [snap, setSnap] = useState<number | string | null>('148px')
49
+ return (
50
+ <Page>
51
+ <Page.Navbar>
52
+ <a
53
+ href=""
54
+ className="ml-auto"
55
+ >
56
+ <Close className="text-primary" />
57
+ </a>
58
+ </Page.Navbar>
59
+ {/* <Page.Content className='flex flex-col'>
60
+ <h1 className="mt-[32px] mb-[16px] font-medium text-[20px] text-center leading-[1.2]">
61
+ Введите код из&nbsp;сообщения
62
+ <br />
63
+ <span className="font-normal text-[16px] leading-[1.3]">Код отправлен на +7 960 888 00-00</span>
64
+ </h1>
65
+
66
+ <form className='flex flex-col grow'>
67
+ <div
68
+ className="relative mb-[8px] h-[24px] text-center text-critical"
69
+ role="alert"
70
+ >
71
+ {true && <span>Введен неверный ПИН-код</span>}
72
+ </div>
73
+ <InputSMS />
74
+ <p className="mt-[32px] text-[12px] text-center text-light leading-[1.16]">
75
+ Выслать код повторно через{' '}
76
+ <span
77
+ role="timer"
78
+ aria-live="polite"
79
+ aria-atomic="true"
80
+ >
81
+ 1&nbsp;минуту 16&nbsp;секунд
82
+ </span>
83
+ </p>
84
+ <div className='mt-auto'>
85
+ <Button className='mt-[32px] w-full'>Подтвердить</Button>
86
+ </div>
87
+ </form>
88
+ </Page.Content> */}
89
+ <Page.Content>
90
+ <Drawer
91
+ snapPoints={['148px', '355px', 1]}
92
+ activeSnapPoint={snap}
93
+ setActiveSnapPoint={setSnap}
94
+ >
95
+ <DrawerTrigger>
96
+ <Button variant="primary">Перевести</Button>
97
+ </DrawerTrigger>
98
+ <DrawerContent>
99
+ <DrawerTitle className="sr-only">Перевести</DrawerTitle>
100
+ <div className="px-[20px] pt-[8px]">
101
+ <p
102
+ className={cn('font-medium text-[12px] leading-[1.16] mb-[16px]', 'text-success', {
103
+ 'text-critical': false,
104
+ })}
105
+ >
106
+ Отклонен, <time dateTime="">30 января 2024, 11:23</time>
107
+ </p>
108
+ <p className="font-medium text-[40px] leading-[1.1] mb-[16px]">3598,00 ₽</p>
109
+ <div className="space-y-[8px]">
110
+ <p className="">
111
+ <span className="text-light text-[12px] leading-[1.16]">Платёжное поручение:</span>{' '}
112
+ №91 от 01.01.2024
113
+ </p>
114
+ <p className="">
115
+ <span className="text-light text-[12px] leading-[1.16]">Со счёта:</span> Расчётный
116
+ счёт (•••• 4590)
117
+ </p>
118
+ <p className="">
119
+ <span className="text-light text-[12px] leading-[1.16]">На счёт:</span> Карточный
120
+ счёт (•••• 6416)
121
+ </p>
122
+ </div>
123
+
124
+ <hr
125
+ role="presentation"
126
+ className="my-[16px]"
127
+ />
128
+
129
+ <Alert
130
+ variant="critical"
131
+ className="my-[16px]"
132
+ >
133
+ <Alert.Description>
134
+ Произошла ошибка при отправке в банк: Клиент не является владельцем счёта
135
+ </Alert.Description>
136
+ </Alert>
137
+
138
+ <Button>Повторить</Button>
139
+
140
+ <p className="mt-[32px]">
141
+ <span className="text-light">Назначение:</span>
142
+ <br />
143
+ Перевод между счетами. Без НДС
144
+ </p>
145
+ </div>
146
+ </DrawerContent>
147
+ </Drawer>
148
+ </Page.Content>
149
+ </Page>
150
+ )
151
+ }
@@ -1,8 +0,0 @@
1
- import * as React from 'react';
2
- import { GroupBase, Props } from 'react-select';
3
- declare type SelectAccountProps<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = Props<Option, IsMulti, Group>;
4
- declare function SelectAccount<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectAccountProps<Option, IsMulti, Group>): React.JSX.Element;
5
- declare namespace SelectAccount {
6
- var displayName: string;
7
- }
8
- export { SelectAccount };
@@ -1,50 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.SelectAccount = void 0;
4
- const tslib_1 = require("tslib");
5
- const React = (0, tslib_1.__importStar)(require("react"));
6
- const Icon_1 = require("../../src/Icon");
7
- const react_select_1 = (0, tslib_1.__importStar)(require("react-select"));
8
- const utils_1 = require("../@/lib/utils");
9
- const components_1 = require("./components");
10
- const Option = ({ children, ...props }) => {
11
- const { isSelected, isFocused, isDisabled,
12
- // @ts-ignore
13
- data: { label, account, balance, cur }, } = props;
14
- return (React.createElement(react_select_1.components.Option, { className: (0, utils_1.cn)(components_1.optionClasses, 'items-start', { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled }), ...props },
15
- React.createElement("span", { className: "flex basis-0 grow" },
16
- React.createElement("span", null,
17
- React.createElement("span", { className: "text-[16px`] leading-[1.375]" }, label),
18
- React.createElement("br", null),
19
- React.createElement("span", { className: "text-[12px] text-light" }, account)),
20
- React.createElement("span", { className: "ml-auto shrink-0" }, cur)),
21
- React.createElement("span", { className: "ml-[16px] shrink-0 size-[24px]" }, isSelected && (React.createElement(Icon_1.CheckSmall, { width: "24", height: "24", className: "text-primary" })))));
22
- };
23
- const SingleValue = ({ children, ...props }) => {
24
- const {
25
- // @ts-ignore
26
- data: { account, cur }, } = props;
27
- return (React.createElement(react_select_1.components.SingleValue, { className: "col-start-1 col-end-3 row-start-1 row-end-2", ...props },
28
- account,
29
- " (",
30
- cur,
31
- ")"));
32
- };
33
- function SelectAccount(props) {
34
- return (React.createElement(react_select_1.default, { components: {
35
- Control: components_1.Control,
36
- Option,
37
- SingleValue,
38
- DropdownIndicator: components_1.DropdownIndicator,
39
- IndicatorSeparator: () => null,
40
- Menu: components_1.Menu,
41
- ValueContainer: components_1.ValueContainer,
42
- Placeholder: components_1.Placeholder,
43
- Input: components_1.Input,
44
- LoadingIndicator: components_1.LoadingIndicator,
45
- IndicatorsContainer: components_1.IndicatorsContainer,
46
- }, styles: components_1.colourStyles, unstyled: true, ...props }));
47
- }
48
- exports.SelectAccount = SelectAccount;
49
- SelectAccount.displayName = 'SelectAccount';
50
- //# sourceMappingURL=SelectAccount.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectAccount.js","sourceRoot":"","sources":["../../src/Select/SelectAccount.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,yCAA2C;AAC3C,0EAAkG;AAClG,0CAAmC;AACnC,6CAWqB;AAErB,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE;IACtD,MAAM,EACL,UAAU,EACV,SAAS,EACT,UAAU;IACV,aAAa;IACb,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,GACtC,GAAG,KAAK,CAAA;IACT,OAAO,CACN,oBAAC,yBAAU,CAAC,MAAM,IACjB,SAAS,EAAE,IAAA,UAAE,EAAC,0BAAa,EAAE,aAAa,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE,gCAAgC,EAAE,UAAU,EAAE,CAAC,KACpH,KAAK;QAET,8BAAM,SAAS,EAAC,mBAAmB;YAClC;gBACC,8BAAM,SAAS,EAAC,8BAA8B,IAAE,KAAK,CAAQ;gBAC7D,+BAAM;gBACN,8BAAM,SAAS,EAAC,wBAAwB,IAAE,OAAO,CAAQ,CACnD;YACP,8BAAM,SAAS,EAAC,kBAAkB,IAAE,GAAG,CAAQ,CACzC;QAEP,8BAAM,SAAS,EAAC,gCAAgC,IAC9C,UAAU,IAAI,CACd,oBAAC,iBAAU,IACV,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,SAAS,EAAC,cAAc,GACvB,CACF,CACK,CACY,CACpB,CAAA;AACF,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAoB,EAAE,EAAE;IAChE,MAAM;IACL,aAAa;IACb,IAAI,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,GACtB,GAAG,KAAK,CAAA;IACT,OAAO,CACN,oBAAC,yBAAU,CAAC,WAAW,IACtB,SAAS,EAAC,6CAA6C,KACnD,KAAK;QAER,OAAO;;QAAI,GAAG;YACS,CACzB,CAAA;AACF,CAAC,CAAA;AAQD,SAAS,aAAa,CACrB,KAAiD;IAEjD,OAAO,CACN,oBAAC,sBAAM,IACN,UAAU,EAAE;YACX,OAAO,EAAP,oBAAO;YACP,MAAM;YACN,WAAW;YACX,iBAAiB,EAAjB,8BAAiB;YACjB,kBAAkB,EAAE,GAAG,EAAE,CAAC,IAAI;YAC9B,IAAI,EAAJ,iBAAI;YACJ,cAAc,EAAd,2BAAc;YACd,WAAW,EAAX,wBAAW;YACX,KAAK,EAAL,kBAAK;YACL,gBAAgB,EAAhB,6BAAgB;YAChB,mBAAmB,EAAnB,gCAAmB;SACnB,EACD,MAAM,EAAE,yBAAY,EACpB,QAAQ,EAAE,IAAI,KACV,KAAK,GACR,CACF,CAAA;AACF,CAAC;AAIQ,sCAAa;AAFtB,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}
@@ -1,15 +0,0 @@
1
- import React from 'react';
2
- import { ControlProps, OptionProps, DropdownIndicatorProps, StylesConfig, SingleValueProps, MenuProps, PlaceholderProps, ValueContainerProps, InputProps, LoadingIndicatorProps, IndicatorsContainerProps } from 'react-select';
3
- declare const Input: ({ ...props }: InputProps) => React.JSX.Element;
4
- declare const Control: ({ children, ...props }: ControlProps) => React.JSX.Element;
5
- declare const colourStyles: StylesConfig;
6
- declare const optionClasses = "flex items-center first:rounded-t-sm last:rounded-b-sm px-[16px] py-[12px] w-full cursor-default select-none outline-none";
7
- declare const Option: ({ children, ...props }: OptionProps) => React.JSX.Element;
8
- declare const IndicatorsContainer: ({ children, ...props }: IndicatorsContainerProps) => React.JSX.Element;
9
- declare const LoadingIndicator: ({ ...props }: LoadingIndicatorProps) => React.JSX.Element;
10
- declare const DropdownIndicator: ({ children, ...props }: DropdownIndicatorProps) => React.JSX.Element;
11
- declare const ValueContainer: ({ children, ...props }: ValueContainerProps) => React.JSX.Element;
12
- declare const SingleValue: ({ children, ...props }: SingleValueProps) => React.JSX.Element;
13
- declare const Menu: ({ children, ...props }: MenuProps) => React.JSX.Element;
14
- declare const Placeholder: ({ children, ...props }: PlaceholderProps) => React.JSX.Element;
15
- export { Input, Control, colourStyles, optionClasses, Option, IndicatorsContainer, LoadingIndicator, DropdownIndicator, ValueContainer, SingleValue, Menu, Placeholder, };