@opexa/portal-components 0.0.262 → 0.0.263
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/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css +184 -184
- package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css +184 -184
- package/dist/components/KYC/IdentityVerification.js +20 -15
- package/dist/components/KYC/KYC.d.ts +1 -1
- package/dist/components/KYC/KYC.js +3 -3
- package/dist/components/KYC/KYC.lazy.js +1 -3
- package/dist/components/KYC/useKYC.d.ts +0 -2
- package/dist/components/KYC/useKYC.js +0 -4
- package/dist/components/KYC/utils.js +18 -18
- package/dist/components/SignUp/SignUpKYC/CaptureIdDocument.js +2 -2
- package/dist/components/SignUp/SignUpKYC/CaptureSelfie.js +3 -3
- package/dist/components/SignUp/SignUpKYC/ImageUploader.js +1 -1
- package/dist/components/SignUp/SignUpKYC/PersonOverlayDesktop.d.ts +7 -0
- package/dist/components/SignUp/SignUpKYC/PersonOverlayDesktop.js +9 -0
- package/dist/components/SignUp/SignUpKYC/utils.d.ts +9 -0
- package/dist/components/SignUp/SignUpKYC/utils.js +79 -0
- package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.module.css +184 -184
- package/dist/components/Tournaments/TournamentsList/TournamentItem.module.css +184 -184
- package/dist/components/shared/IdFrontImageField/IdFrontImageField.client.js +1 -1
- package/dist/components/shared/SelfieImageField/SelfieImageField.client.js +1 -1
- package/dist/components/shared/SelfieImageField/useSelfieImageField.js +19 -17
- package/dist/handlers/postTransformIdFrontImage.js +21 -6
- package/dist/handlers/postTransformSelfieImage.js +20 -9
- package/dist/services/queries.js +2570 -2570
- package/dist/styles/theme.css +694 -694
- package/package.json +166 -166
- package/dist/components/shared/IdDocumentField.client.d.ts +0 -25
- package/dist/components/shared/IdDocumentField.client.js +0 -204
- package/dist/components/shared/IdDocumentField.d.ts +0 -2
- package/dist/components/shared/IdDocumentField.js +0 -11
- package/dist/components/shared/SelfieField.client.d.ts +0 -20
- package/dist/components/shared/SelfieField.client.js +0 -327
- package/dist/components/shared/SelfieField.d.ts +0 -2
- package/dist/components/shared/SelfieField.js +0 -11
- package/dist/handlers.d.ts +0 -43
- package/dist/handlers.js +0 -297
package/package.json
CHANGED
|
@@ -1,166 +1,166 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@opexa/portal-components",
|
|
3
|
-
"version": "0.0.
|
|
4
|
-
"exports": {
|
|
5
|
-
"./ui/*": {
|
|
6
|
-
"types": "./dist/ui/*/index.d.ts",
|
|
7
|
-
"default": "./dist/ui/*/index.js"
|
|
8
|
-
},
|
|
9
|
-
"./utils/*": {
|
|
10
|
-
"types": "./dist/utils/*.d.ts",
|
|
11
|
-
"import": "./dist/utils/*.js"
|
|
12
|
-
},
|
|
13
|
-
"./types": {
|
|
14
|
-
"types": "./dist/types/index.d.ts",
|
|
15
|
-
"import": "./dist/types/index.js"
|
|
16
|
-
},
|
|
17
|
-
"./handlers": {
|
|
18
|
-
"types": "./dist/handlers/index.d.ts",
|
|
19
|
-
"default": "./dist/handlers/index.js"
|
|
20
|
-
},
|
|
21
|
-
"./middleware": {
|
|
22
|
-
"types": "./dist/middleware.d.ts",
|
|
23
|
-
"default": "./dist/middleware.js"
|
|
24
|
-
},
|
|
25
|
-
"./constants": {
|
|
26
|
-
"types": "./dist/constants/index.d.ts",
|
|
27
|
-
"default": "./dist/constants/index.js"
|
|
28
|
-
},
|
|
29
|
-
"./services/*": {
|
|
30
|
-
"types": "./dist/services/*.d.ts",
|
|
31
|
-
"default": "./dist/services/*.js"
|
|
32
|
-
},
|
|
33
|
-
"./client-utils/*": {
|
|
34
|
-
"types": "./dist/client/utils/*.d.ts",
|
|
35
|
-
"default": "./dist/client/utils/*.js"
|
|
36
|
-
},
|
|
37
|
-
"./client-hooks/*": {
|
|
38
|
-
"types": "./dist/client/hooks/*.d.ts",
|
|
39
|
-
"default": "./dist/client/hooks/*.js"
|
|
40
|
-
},
|
|
41
|
-
"./client-services/*": {
|
|
42
|
-
"types": "./dist/client/services/*.d.ts",
|
|
43
|
-
"default": "./dist/client/services/*.js"
|
|
44
|
-
},
|
|
45
|
-
"./server-utils/*": {
|
|
46
|
-
"types": "./dist/server/utils/*.d.ts",
|
|
47
|
-
"default": "./dist/server/utils/*.js"
|
|
48
|
-
},
|
|
49
|
-
"./server-services/*": {
|
|
50
|
-
"types": "./dist/server/services/*.d.ts",
|
|
51
|
-
"default": "./dist/server/services/*.js"
|
|
52
|
-
},
|
|
53
|
-
"./next.config": {
|
|
54
|
-
"types": "./dist/next.config.d.ts",
|
|
55
|
-
"default": "./dist/next.config.js"
|
|
56
|
-
},
|
|
57
|
-
"./theme.css": "./dist/styles/theme.css",
|
|
58
|
-
"./*": {
|
|
59
|
-
"types": "./dist/components/*/index.d.ts",
|
|
60
|
-
"default": "./dist/components/*/index.js"
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
"files": [
|
|
64
|
-
"dist",
|
|
65
|
-
"!dist/tsconfig.tsbuildinfo",
|
|
66
|
-
"!dist/tsconfig.build.tsbuildinfo"
|
|
67
|
-
],
|
|
68
|
-
"publishConfig": {
|
|
69
|
-
"access": "public"
|
|
70
|
-
},
|
|
71
|
-
"scripts": {
|
|
72
|
-
"dev": "next dev --port 4000",
|
|
73
|
-
"build": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json && copy-files-from-to",
|
|
74
|
-
"build:app": "next build",
|
|
75
|
-
"start": "next start",
|
|
76
|
-
"lint": "next lint",
|
|
77
|
-
"release": "release-it"
|
|
78
|
-
},
|
|
79
|
-
"dependencies": {
|
|
80
|
-
"@ark-ui/react": "^5.16.0",
|
|
81
|
-
"@date-fns/tz": "^1.2.0",
|
|
82
|
-
"@mediapipe/tasks-vision": "0.10.22-rc.20250304",
|
|
83
|
-
"@next/third-parties": "^15.3.4",
|
|
84
|
-
"@tailwindcss/typography": "^0.5.16",
|
|
85
|
-
"date-fns": "^4.1.0",
|
|
86
|
-
"embla-carousel-autoplay": "^8.6.0",
|
|
87
|
-
"embla-carousel-react": "^8.6.0",
|
|
88
|
-
"face-api.js": "^0.22.2",
|
|
89
|
-
"is-mobile": "^5.0.0",
|
|
90
|
-
"lodash-es": "^4.17.21",
|
|
91
|
-
"react-image-file-resizer": "^0.4.8",
|
|
92
|
-
"sharp": "^0.34.2",
|
|
93
|
-
"tailwind-merge": "^3.3.1",
|
|
94
|
-
"tailwind-variants": "^1.0.0",
|
|
95
|
-
"tailwind-zag": "^1.0.2",
|
|
96
|
-
"tiny-invariant": "^1.3.3",
|
|
97
|
-
"type-fest": "^4.41.0",
|
|
98
|
-
"usehooks-ts": "^3.1.1",
|
|
99
|
-
"zustand": "^5.0.6"
|
|
100
|
-
},
|
|
101
|
-
"devDependencies": {
|
|
102
|
-
"@eslint/eslintrc": "3",
|
|
103
|
-
"@hookform/resolvers": "5.1.1",
|
|
104
|
-
"@opexa/object-id": "0.1.6",
|
|
105
|
-
"@tailwindcss/postcss": "4",
|
|
106
|
-
"@tanstack/react-query": "5.81.5",
|
|
107
|
-
"@tanstack/react-query-devtools": "5.81.5",
|
|
108
|
-
"@total-typescript/ts-reset": "0.6.1",
|
|
109
|
-
"@types/lodash-es": "4.17.12",
|
|
110
|
-
"@types/node": "24",
|
|
111
|
-
"@types/react": "19",
|
|
112
|
-
"@types/react-dom": "19",
|
|
113
|
-
"copy-files-from-to": "3.12.1",
|
|
114
|
-
"eslint": "9",
|
|
115
|
-
"eslint-config-next": "15.3.4",
|
|
116
|
-
"next": "15.4.0-canary.61",
|
|
117
|
-
"react": "19.1.0",
|
|
118
|
-
"react-dom": "19.1.0",
|
|
119
|
-
"react-hook-form": "7.59.0",
|
|
120
|
-
"release-it": "19.0.3",
|
|
121
|
-
"tailwindcss": "4.1.11",
|
|
122
|
-
"tsc-alias": "1.8.16",
|
|
123
|
-
"typescript": "5",
|
|
124
|
-
"zod": "3.25.71"
|
|
125
|
-
},
|
|
126
|
-
"peerDependencies": {
|
|
127
|
-
"@hookform/resolvers": "^4.0.0 || ^5.0.0",
|
|
128
|
-
"@opexa/object-id": "^0.1.0",
|
|
129
|
-
"@tanstack/react-query": "^5.0.0",
|
|
130
|
-
"next": "^15.4.0-canary.1",
|
|
131
|
-
"react": "^19.0.0",
|
|
132
|
-
"react-dom": "^19.0.0",
|
|
133
|
-
"react-hook-form": "^7.0.0",
|
|
134
|
-
"tailwindcss": "^4.0.0",
|
|
135
|
-
"zod": "^3.0.0"
|
|
136
|
-
},
|
|
137
|
-
"release-it": {
|
|
138
|
-
"git": {
|
|
139
|
-
"commitMessage": "chore: release ${npm.name} v${version}",
|
|
140
|
-
"tagName": "${npm.name}@${version}"
|
|
141
|
-
},
|
|
142
|
-
"github": {
|
|
143
|
-
"release": false
|
|
144
|
-
},
|
|
145
|
-
"hooks": {
|
|
146
|
-
"before:bump": [
|
|
147
|
-
"pnpm lint"
|
|
148
|
-
],
|
|
149
|
-
"after:bump": [
|
|
150
|
-
"pnpm build"
|
|
151
|
-
]
|
|
152
|
-
}
|
|
153
|
-
},
|
|
154
|
-
"copyFiles": [
|
|
155
|
-
{
|
|
156
|
-
"from": "src/lib/**/*.{png,jpg,jpeg,gif,svg,css,json}",
|
|
157
|
-
"to": "dist/",
|
|
158
|
-
"toFlat": false
|
|
159
|
-
}
|
|
160
|
-
],
|
|
161
|
-
"copyFilesSettings": {
|
|
162
|
-
"whenFileExists": "overwrite",
|
|
163
|
-
"removeSourceMappingURL": true,
|
|
164
|
-
"ignoreDotFilesAndFolders": false
|
|
165
|
-
}
|
|
166
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@opexa/portal-components",
|
|
3
|
+
"version": "0.0.263",
|
|
4
|
+
"exports": {
|
|
5
|
+
"./ui/*": {
|
|
6
|
+
"types": "./dist/ui/*/index.d.ts",
|
|
7
|
+
"default": "./dist/ui/*/index.js"
|
|
8
|
+
},
|
|
9
|
+
"./utils/*": {
|
|
10
|
+
"types": "./dist/utils/*.d.ts",
|
|
11
|
+
"import": "./dist/utils/*.js"
|
|
12
|
+
},
|
|
13
|
+
"./types": {
|
|
14
|
+
"types": "./dist/types/index.d.ts",
|
|
15
|
+
"import": "./dist/types/index.js"
|
|
16
|
+
},
|
|
17
|
+
"./handlers": {
|
|
18
|
+
"types": "./dist/handlers/index.d.ts",
|
|
19
|
+
"default": "./dist/handlers/index.js"
|
|
20
|
+
},
|
|
21
|
+
"./middleware": {
|
|
22
|
+
"types": "./dist/middleware.d.ts",
|
|
23
|
+
"default": "./dist/middleware.js"
|
|
24
|
+
},
|
|
25
|
+
"./constants": {
|
|
26
|
+
"types": "./dist/constants/index.d.ts",
|
|
27
|
+
"default": "./dist/constants/index.js"
|
|
28
|
+
},
|
|
29
|
+
"./services/*": {
|
|
30
|
+
"types": "./dist/services/*.d.ts",
|
|
31
|
+
"default": "./dist/services/*.js"
|
|
32
|
+
},
|
|
33
|
+
"./client-utils/*": {
|
|
34
|
+
"types": "./dist/client/utils/*.d.ts",
|
|
35
|
+
"default": "./dist/client/utils/*.js"
|
|
36
|
+
},
|
|
37
|
+
"./client-hooks/*": {
|
|
38
|
+
"types": "./dist/client/hooks/*.d.ts",
|
|
39
|
+
"default": "./dist/client/hooks/*.js"
|
|
40
|
+
},
|
|
41
|
+
"./client-services/*": {
|
|
42
|
+
"types": "./dist/client/services/*.d.ts",
|
|
43
|
+
"default": "./dist/client/services/*.js"
|
|
44
|
+
},
|
|
45
|
+
"./server-utils/*": {
|
|
46
|
+
"types": "./dist/server/utils/*.d.ts",
|
|
47
|
+
"default": "./dist/server/utils/*.js"
|
|
48
|
+
},
|
|
49
|
+
"./server-services/*": {
|
|
50
|
+
"types": "./dist/server/services/*.d.ts",
|
|
51
|
+
"default": "./dist/server/services/*.js"
|
|
52
|
+
},
|
|
53
|
+
"./next.config": {
|
|
54
|
+
"types": "./dist/next.config.d.ts",
|
|
55
|
+
"default": "./dist/next.config.js"
|
|
56
|
+
},
|
|
57
|
+
"./theme.css": "./dist/styles/theme.css",
|
|
58
|
+
"./*": {
|
|
59
|
+
"types": "./dist/components/*/index.d.ts",
|
|
60
|
+
"default": "./dist/components/*/index.js"
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
"files": [
|
|
64
|
+
"dist",
|
|
65
|
+
"!dist/tsconfig.tsbuildinfo",
|
|
66
|
+
"!dist/tsconfig.build.tsbuildinfo"
|
|
67
|
+
],
|
|
68
|
+
"publishConfig": {
|
|
69
|
+
"access": "public"
|
|
70
|
+
},
|
|
71
|
+
"scripts": {
|
|
72
|
+
"dev": "next dev --port 4000",
|
|
73
|
+
"build": "tsc --project tsconfig.build.json && tsc-alias -p tsconfig.build.json && copy-files-from-to",
|
|
74
|
+
"build:app": "next build",
|
|
75
|
+
"start": "next start",
|
|
76
|
+
"lint": "next lint",
|
|
77
|
+
"release": "release-it"
|
|
78
|
+
},
|
|
79
|
+
"dependencies": {
|
|
80
|
+
"@ark-ui/react": "^5.16.0",
|
|
81
|
+
"@date-fns/tz": "^1.2.0",
|
|
82
|
+
"@mediapipe/tasks-vision": "0.10.22-rc.20250304",
|
|
83
|
+
"@next/third-parties": "^15.3.4",
|
|
84
|
+
"@tailwindcss/typography": "^0.5.16",
|
|
85
|
+
"date-fns": "^4.1.0",
|
|
86
|
+
"embla-carousel-autoplay": "^8.6.0",
|
|
87
|
+
"embla-carousel-react": "^8.6.0",
|
|
88
|
+
"face-api.js": "^0.22.2",
|
|
89
|
+
"is-mobile": "^5.0.0",
|
|
90
|
+
"lodash-es": "^4.17.21",
|
|
91
|
+
"react-image-file-resizer": "^0.4.8",
|
|
92
|
+
"sharp": "^0.34.2",
|
|
93
|
+
"tailwind-merge": "^3.3.1",
|
|
94
|
+
"tailwind-variants": "^1.0.0",
|
|
95
|
+
"tailwind-zag": "^1.0.2",
|
|
96
|
+
"tiny-invariant": "^1.3.3",
|
|
97
|
+
"type-fest": "^4.41.0",
|
|
98
|
+
"usehooks-ts": "^3.1.1",
|
|
99
|
+
"zustand": "^5.0.6"
|
|
100
|
+
},
|
|
101
|
+
"devDependencies": {
|
|
102
|
+
"@eslint/eslintrc": "3",
|
|
103
|
+
"@hookform/resolvers": "5.1.1",
|
|
104
|
+
"@opexa/object-id": "0.1.6",
|
|
105
|
+
"@tailwindcss/postcss": "4",
|
|
106
|
+
"@tanstack/react-query": "5.81.5",
|
|
107
|
+
"@tanstack/react-query-devtools": "5.81.5",
|
|
108
|
+
"@total-typescript/ts-reset": "0.6.1",
|
|
109
|
+
"@types/lodash-es": "4.17.12",
|
|
110
|
+
"@types/node": "24",
|
|
111
|
+
"@types/react": "19",
|
|
112
|
+
"@types/react-dom": "19",
|
|
113
|
+
"copy-files-from-to": "3.12.1",
|
|
114
|
+
"eslint": "9",
|
|
115
|
+
"eslint-config-next": "15.3.4",
|
|
116
|
+
"next": "15.4.0-canary.61",
|
|
117
|
+
"react": "19.1.0",
|
|
118
|
+
"react-dom": "19.1.0",
|
|
119
|
+
"react-hook-form": "7.59.0",
|
|
120
|
+
"release-it": "19.0.3",
|
|
121
|
+
"tailwindcss": "4.1.11",
|
|
122
|
+
"tsc-alias": "1.8.16",
|
|
123
|
+
"typescript": "5",
|
|
124
|
+
"zod": "3.25.71"
|
|
125
|
+
},
|
|
126
|
+
"peerDependencies": {
|
|
127
|
+
"@hookform/resolvers": "^4.0.0 || ^5.0.0",
|
|
128
|
+
"@opexa/object-id": "^0.1.0",
|
|
129
|
+
"@tanstack/react-query": "^5.0.0",
|
|
130
|
+
"next": "^15.4.0-canary.1",
|
|
131
|
+
"react": "^19.0.0",
|
|
132
|
+
"react-dom": "^19.0.0",
|
|
133
|
+
"react-hook-form": "^7.0.0",
|
|
134
|
+
"tailwindcss": "^4.0.0",
|
|
135
|
+
"zod": "^3.0.0"
|
|
136
|
+
},
|
|
137
|
+
"release-it": {
|
|
138
|
+
"git": {
|
|
139
|
+
"commitMessage": "chore: release ${npm.name} v${version}",
|
|
140
|
+
"tagName": "${npm.name}@${version}"
|
|
141
|
+
},
|
|
142
|
+
"github": {
|
|
143
|
+
"release": false
|
|
144
|
+
},
|
|
145
|
+
"hooks": {
|
|
146
|
+
"before:bump": [
|
|
147
|
+
"pnpm lint"
|
|
148
|
+
],
|
|
149
|
+
"after:bump": [
|
|
150
|
+
"pnpm build"
|
|
151
|
+
]
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
"copyFiles": [
|
|
155
|
+
{
|
|
156
|
+
"from": "src/lib/**/*.{png,jpg,jpeg,gif,svg,css,json}",
|
|
157
|
+
"to": "dist/",
|
|
158
|
+
"toFlat": false
|
|
159
|
+
}
|
|
160
|
+
],
|
|
161
|
+
"copyFilesSettings": {
|
|
162
|
+
"whenFileExists": "overwrite",
|
|
163
|
+
"removeSourceMappingURL": true,
|
|
164
|
+
"ignoreDotFilesAndFolders": false
|
|
165
|
+
}
|
|
166
|
+
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { type CSSProperties, type RefObject } from 'react';
|
|
2
|
-
import { type ValidateFileError } from '../../utils/validateFile';
|
|
3
|
-
export interface IdDocumentFieldProps extends UseIdDocumentFieldProps {
|
|
4
|
-
ref?: RefObject<HTMLDivElement | null>;
|
|
5
|
-
id?: string;
|
|
6
|
-
style?: CSSProperties;
|
|
7
|
-
className?: string;
|
|
8
|
-
invalid?: boolean;
|
|
9
|
-
readOnly?: boolean;
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
required?: boolean;
|
|
12
|
-
onError?: (error: ValidateFileError) => void;
|
|
13
|
-
}
|
|
14
|
-
export declare function IdDocumentField__client(props: IdDocumentFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
-
/**
|
|
16
|
-
* -------------------------------------
|
|
17
|
-
* Context
|
|
18
|
-
* -------------------------------------
|
|
19
|
-
*/
|
|
20
|
-
interface UseIdDocumentFieldProps {
|
|
21
|
-
value?: string;
|
|
22
|
-
onChange?: (value: string) => void;
|
|
23
|
-
defaultValue?: string;
|
|
24
|
-
}
|
|
25
|
-
export {};
|
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useFieldContext } from '@ark-ui/react';
|
|
3
|
-
import Image from 'next/image';
|
|
4
|
-
import { useEffect, useId, useRef, useState, } from 'react';
|
|
5
|
-
import { twMerge } from 'tailwind-merge';
|
|
6
|
-
import { useMediaQuery } from 'usehooks-ts';
|
|
7
|
-
import { useCamera } from '../../client/hooks/useCamera.js';
|
|
8
|
-
import { useControllableState } from '../../client/hooks/useControllableState.js';
|
|
9
|
-
import { useDisclosure } from '../../client/hooks/useDisclosure.js';
|
|
10
|
-
import { useFileQuery } from '../../client/hooks/useFileQuery.js';
|
|
11
|
-
import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
|
|
12
|
-
import { createContext } from '../../client/utils/createContext.js';
|
|
13
|
-
import { toaster } from '../../client/utils/toaster.js';
|
|
14
|
-
import { Camera01Icon } from '../../icons/Camera01Icon.js';
|
|
15
|
-
import { CameraOffIcon } from '../../icons/CameraOffIcon.js';
|
|
16
|
-
import { CheckCircleIcon } from '../../icons/CheckCircleIcon.js';
|
|
17
|
-
import { RefreshCcw01Icon } from '../../icons/RefreshCcw01Icon.js';
|
|
18
|
-
import { Spinner02Icon } from '../../icons/Spinner02Icon.js';
|
|
19
|
-
import { UploadCloud02Icon } from '../../icons/UploadCloud02Icon.js';
|
|
20
|
-
import { XIcon } from '../../icons/XIcon.js';
|
|
21
|
-
import { Button } from '../../ui/Button/index.js';
|
|
22
|
-
import { Dialog } from '../../ui/Dialog/index.js';
|
|
23
|
-
import { Portal } from '../../ui/Portal/index.js';
|
|
24
|
-
import { validateFile } from '../../utils/validateFile.js';
|
|
25
|
-
export function IdDocumentField__client(props) {
|
|
26
|
-
const context = useIdDocumentField(props);
|
|
27
|
-
return (_jsxs(IdDocumentFieldProvider, { value: context, children: [_jsxs("div", { ref: props.ref, id: props.id, style: props.style, className: twMerge('border-border-primary bg-bg-primary group relative aspect-[352/180] w-full shrink-0 rounded-xl border p-xl', props.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: (e) => {
|
|
28
|
-
e.preventDefault();
|
|
29
|
-
const file = e.dataTransfer.files?.[0];
|
|
30
|
-
if (!file)
|
|
31
|
-
return;
|
|
32
|
-
const error = validateFile(file);
|
|
33
|
-
if (error)
|
|
34
|
-
return props.onError?.(error);
|
|
35
|
-
context.mutation.mutate({ file });
|
|
36
|
-
}, "aria-describedby": context.field?.ariaDescribedby, children: [_jsx("input", { id: context.field?.ids?.control, ref: context.inputRef, type: "file", accept: "image/png, image/jpeg", onChange: (e) => {
|
|
37
|
-
const file = e.target.files?.[0];
|
|
38
|
-
if (!file)
|
|
39
|
-
return;
|
|
40
|
-
const error = validateFile(file);
|
|
41
|
-
if (error)
|
|
42
|
-
return props.onError?.(error);
|
|
43
|
-
context.mutation.mutate({ file });
|
|
44
|
-
}, disabled: context.field?.disabled ||
|
|
45
|
-
context.query.isLoading ||
|
|
46
|
-
context.mutation.isPending ||
|
|
47
|
-
props.disabled, readOnly: context.field?.readOnly || props.readOnly, required: context.field?.required || props.required, className: "sr-only" }), !context.query.data?.url && (_jsxs("div", { className: "flex size-full flex-col justify-center", children: [_jsx("div", { className: "border-border-primary shadow-xs mx-auto flex size-8 items-center justify-center rounded-sm border", children: _jsx(UploadCloud02Icon, { className: "text-text-placeholder-subtle size-4" }) }), _jsxs("h2", { className: "text-text-tertiary-600 mt-lg", children: [_jsxs("span", { className: "block text-center text-sm", children: [_jsx("button", { type: "button", onClick: () => {
|
|
48
|
-
context.inputRef.current?.click();
|
|
49
|
-
}, disabled: context.field?.disabled ||
|
|
50
|
-
context.field?.readOnly ||
|
|
51
|
-
context.query.isLoading ||
|
|
52
|
-
context.mutation.isPending ||
|
|
53
|
-
props.disabled ||
|
|
54
|
-
props.readOnly, className: "text-button-secondary-fg font-semibold disabled:opacity-60", children: "Click to upload" }), ' ', "or drag and drop"] }), _jsx("span", { className: "mt-xs block text-center text-xs", children: "PNG, JPG or JPEG (max. 10mb)" }), _jsx("span", { className: "m-txs block text-center text-xs", children: "or" })] }), _jsx(Button, { size: "sm", variant: "outline", className: "mx-auto mt-md w-auto", onClick: () => {
|
|
55
|
-
context.disclosure.setOpen(true);
|
|
56
|
-
}, disabled: context.field?.disabled ||
|
|
57
|
-
context.field?.readOnly ||
|
|
58
|
-
context.query.isLoading ||
|
|
59
|
-
context.mutation.isPending ||
|
|
60
|
-
props.disabled ||
|
|
61
|
-
props.readOnly, children: "Take a photo" })] })), context.query.data?.url && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: context.query.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "h-auto w-full rounded-md" }), _jsx("button", { type: "button", className: "backdrop-blur-xs absolute right-2 top-2 rounded-full bg-white/10 p-1", onClick: () => {
|
|
62
|
-
context.setValue('');
|
|
63
|
-
}, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Camera, {})] }));
|
|
64
|
-
}
|
|
65
|
-
/**
|
|
66
|
-
* -------------------------------------
|
|
67
|
-
* Camera
|
|
68
|
-
* -------------------------------------
|
|
69
|
-
*/
|
|
70
|
-
function Camera() {
|
|
71
|
-
const context = useIdDocumentFieldContext();
|
|
72
|
-
return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
|
|
73
|
-
context.disclosure.setOpen(details.open);
|
|
74
|
-
}, closeOnEscape: false, closeOnInteractOutside: false, onExitComplete: context.camera.close, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, { className: "!z-[calc(var(--z-dialog)+1)]" }), _jsx(Dialog.Positioner, { className: "!z-[calc(var(--z-dialog)+2)] flex items-center justify-center overflow-y-auto py-4", children: _jsxs(Dialog.Content, { className: "bg-bg-primary-alt mx-auto w-[calc(100dvw-1rem)] max-w-[calc(100dvw-1rem)] overflow-y-auto rounded-lg px-4 py-5 lg:w-[747px] lg:max-w-[747px] lg:px-3xl lg:py-4xl", children: [_jsx(Dialog.CloseTrigger, { children: _jsx(XIcon, {}) }), _jsx(Dialog.Title, { className: "text-center font-semibold lg:text-xl", children: "Take a Picture of Your Front ID" }), _jsxs(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: ["Make sure your ID is clearly visible, well-lit, and not blurry.", ' ', _jsx("br", { className: "hidden lg:block" }), "Avoid glare or reflections, and ensure all corners are within\u00A0the\u00A0frame."] }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsx(Video, {}), context.camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: [_jsx(CameraOffIcon, { className: "text-text-placeholder-subtle size-10 text-center lg:size-12" }), _jsx("h2", { className: "mt-3 text-sm font-semibold lg:mt-4 lg:text-base", children: context.camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: context.camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
|
|
75
|
-
context.camera.reopen();
|
|
76
|
-
}, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[4/3] flex-col items-center justify-center rounded-md border bg-black px-4 lg:aspect-video", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), context.camera.data && (_jsx("div", { className: "border-border-disabled aspect-[4/3] w-full overflow-hidden rounded-md border bg-black lg:aspect-video", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "mx-auto mt-2 block h-[calc(100%-1rem)] w-auto" }) }))] }), !context.camera.data && (_jsx("div", { className: "mt-5 lg:mt-10", children: _jsxs(Button, { className: "disabled:bg-bg-disabled disabled:text-text-disabled mx-auto w-full px-xl py-lg lg:w-[10rem]", onClick: () => {
|
|
77
|
-
context.camera.snap({
|
|
78
|
-
crop: context.guideRef.current?.getBoundingClientRect(),
|
|
79
|
-
});
|
|
80
|
-
}, disabled: context.camera.snapping ||
|
|
81
|
-
context.camera.loading ||
|
|
82
|
-
!!context.camera.error, children: [context.camera.snapping ? (_jsx(Spinner02Icon, { className: "size-5" })) : (_jsx(Camera01Icon, { className: "size-5" })), "Capture"] }) })), context.camera.data && (_jsxs("div", { className: "mt-5 flex gap-3 lg:mt-10 lg:justify-center", children: [_jsxs(Button, { onClick: () => {
|
|
83
|
-
const file = context.camera.data?.file;
|
|
84
|
-
if (!file)
|
|
85
|
-
return;
|
|
86
|
-
context.mutation.mutate({ file });
|
|
87
|
-
context.disclosure.setOpen(false);
|
|
88
|
-
}, className: "w-full lg:w-[10rem]", children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
|
|
89
|
-
context.camera.reset();
|
|
90
|
-
}, className: "w-full lg:w-[10rem]", children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
|
|
91
|
-
}
|
|
92
|
-
/**
|
|
93
|
-
* -------------------------------------
|
|
94
|
-
* Video
|
|
95
|
-
* -------------------------------------
|
|
96
|
-
*/
|
|
97
|
-
function Video() {
|
|
98
|
-
const id = useId();
|
|
99
|
-
const context = useIdDocumentFieldContext();
|
|
100
|
-
const [maskBox, setMaskBox] = useState({
|
|
101
|
-
x: 0,
|
|
102
|
-
y: 0,
|
|
103
|
-
width: 0,
|
|
104
|
-
height: 0,
|
|
105
|
-
});
|
|
106
|
-
useEffect(() => {
|
|
107
|
-
const update = () => {
|
|
108
|
-
const guide = context.guideRef.current;
|
|
109
|
-
const mask = context.maskRef.current;
|
|
110
|
-
if (!guide || !mask)
|
|
111
|
-
return;
|
|
112
|
-
const guideRect = guide.getBoundingClientRect();
|
|
113
|
-
const maskRect = mask.getBoundingClientRect();
|
|
114
|
-
const x = guideRect.left - maskRect.left;
|
|
115
|
-
const y = guideRect.top - maskRect.top;
|
|
116
|
-
const width = guideRect.width;
|
|
117
|
-
const height = guideRect.height;
|
|
118
|
-
if (width && height) {
|
|
119
|
-
setMaskBox({
|
|
120
|
-
x,
|
|
121
|
-
y,
|
|
122
|
-
width,
|
|
123
|
-
height,
|
|
124
|
-
});
|
|
125
|
-
}
|
|
126
|
-
};
|
|
127
|
-
const observer = new ResizeObserver(update);
|
|
128
|
-
if (context.guideRef.current)
|
|
129
|
-
observer.observe(context.guideRef.current);
|
|
130
|
-
if (context.maskRef.current)
|
|
131
|
-
observer.observe(context.maskRef.current);
|
|
132
|
-
requestAnimationFrame(update);
|
|
133
|
-
return () => observer.disconnect();
|
|
134
|
-
}, [context.guideRef, context.maskRef]);
|
|
135
|
-
return (_jsxs("div", { className: twMerge('relative h-auto w-full overflow-hidden', !context.camera.data && !context.camera.error && !context.camera.loading
|
|
136
|
-
? 'block'
|
|
137
|
-
: 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx("svg", { className: "pointer-events-none absolute -inset-4 size-[200%]", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "200%", height: "200%", fill: "white" }), _jsx("rect", { x: maskBox.x, y: maskBox.y, width: maskBox.width, height: maskBox.height, fill: "black", rx: "8", ry: "8" })] }) }) }), _jsx("div", { ref: context.maskRef, className: "absolute -inset-4 size-[200%] bg-black/60 backdrop-blur-sm", style: {
|
|
138
|
-
mask: `url(#${id})`,
|
|
139
|
-
WebkitMask: `url(#${id})`,
|
|
140
|
-
maskRepeat: 'no-repeat',
|
|
141
|
-
WebkitMaskRepeat: 'no-repeat',
|
|
142
|
-
} }), _jsx("div", { ref: context.guideRef, className: "border-utility-warning-700 pointer-events-none absolute left-1/2 top-1/2 z-10 aspect-[85.6/53.98] w-[calc(100%-1rem)] max-w-[24.688rem] -translate-x-1/2 -translate-y-1/2 rounded-md border-2 border-dashed transition-all duration-200" })] }));
|
|
143
|
-
}
|
|
144
|
-
function useIdDocumentField(props) {
|
|
145
|
-
const field = useFieldContext();
|
|
146
|
-
const [value, setValue] = useControllableState({
|
|
147
|
-
value: props.value,
|
|
148
|
-
defaultValue: props.defaultValue ?? '',
|
|
149
|
-
onChange: props.onChange,
|
|
150
|
-
});
|
|
151
|
-
const query = useFileQuery(value, {
|
|
152
|
-
refetchInterval({ state }) {
|
|
153
|
-
return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
|
|
154
|
-
},
|
|
155
|
-
});
|
|
156
|
-
const mutation = useUploadImageFileMutation({
|
|
157
|
-
onSuccess(id) {
|
|
158
|
-
setValue(id);
|
|
159
|
-
},
|
|
160
|
-
onMutate() {
|
|
161
|
-
setValue('');
|
|
162
|
-
},
|
|
163
|
-
onError(error) {
|
|
164
|
-
toaster.error({
|
|
165
|
-
title: 'Upload Failed',
|
|
166
|
-
description: error.message,
|
|
167
|
-
});
|
|
168
|
-
},
|
|
169
|
-
onSettled() {
|
|
170
|
-
if (inputRef.current) {
|
|
171
|
-
inputRef.current.value = '';
|
|
172
|
-
}
|
|
173
|
-
},
|
|
174
|
-
});
|
|
175
|
-
const inputRef = useRef(null);
|
|
176
|
-
const maskRef = useRef(null);
|
|
177
|
-
const guideRef = useRef(null);
|
|
178
|
-
const desktop = useMediaQuery('(min-width: 1024px)');
|
|
179
|
-
const camera = useCamera({
|
|
180
|
-
video: {
|
|
181
|
-
facingMode: desktop ? 'user' : 'environment',
|
|
182
|
-
},
|
|
183
|
-
});
|
|
184
|
-
const disclosure = useDisclosure({
|
|
185
|
-
onOpenChange(open) {
|
|
186
|
-
if (open) {
|
|
187
|
-
camera.open();
|
|
188
|
-
}
|
|
189
|
-
},
|
|
190
|
-
});
|
|
191
|
-
return {
|
|
192
|
-
field,
|
|
193
|
-
value,
|
|
194
|
-
setValue,
|
|
195
|
-
query,
|
|
196
|
-
mutation,
|
|
197
|
-
camera,
|
|
198
|
-
disclosure,
|
|
199
|
-
inputRef,
|
|
200
|
-
guideRef,
|
|
201
|
-
maskRef,
|
|
202
|
-
};
|
|
203
|
-
}
|
|
204
|
-
const [IdDocumentFieldProvider, useIdDocumentFieldContext] = createContext();
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import dynamic from 'next/dynamic';
|
|
4
|
-
import { Spinner02Icon } from '../../icons/Spinner02Icon.js';
|
|
5
|
-
const Component = dynamic(() => import('./IdDocumentField.client.js').then((mod) => mod.IdDocumentField__client), {
|
|
6
|
-
ssr: false,
|
|
7
|
-
loading: () => (_jsx("div", { className: "border-border-primary bg-bg-primary flex aspect-[352/180] w-full shrink-0 items-center justify-center rounded-xl border", children: _jsx(Spinner02Icon, { className: "text-text-quinary size-8" }) })),
|
|
8
|
-
});
|
|
9
|
-
export function IdDocumentField(props) {
|
|
10
|
-
return _jsx(Component, { ...props });
|
|
11
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { type CSSProperties, type RefObject } from 'react';
|
|
2
|
-
import { type ValidateFileError } from '../../utils/validateFile';
|
|
3
|
-
export interface SelfieFieldProps extends UseSelfieFieldProps {
|
|
4
|
-
ref?: RefObject<HTMLDivElement | null>;
|
|
5
|
-
id?: string;
|
|
6
|
-
style?: CSSProperties;
|
|
7
|
-
className?: string;
|
|
8
|
-
invalid?: boolean;
|
|
9
|
-
readOnly?: boolean;
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
required?: boolean;
|
|
12
|
-
onError?: (error: ValidateFileError<'FaceNotFoundError'>) => void;
|
|
13
|
-
}
|
|
14
|
-
export declare function SelfieField__client(props: SelfieFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
-
interface UseSelfieFieldProps {
|
|
16
|
-
value?: string;
|
|
17
|
-
onChange?: (value: string) => void;
|
|
18
|
-
defaultValue?: string;
|
|
19
|
-
}
|
|
20
|
-
export {};
|