@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.
Files changed (36) hide show
  1. package/dist/components/Jackpots/JackpotsCarousel/JackpotsCarouselItem.module.css +184 -184
  2. package/dist/components/Jackpots/JackpotsList/JackpotsListItem.module.css +184 -184
  3. package/dist/components/KYC/IdentityVerification.js +20 -15
  4. package/dist/components/KYC/KYC.d.ts +1 -1
  5. package/dist/components/KYC/KYC.js +3 -3
  6. package/dist/components/KYC/KYC.lazy.js +1 -3
  7. package/dist/components/KYC/useKYC.d.ts +0 -2
  8. package/dist/components/KYC/useKYC.js +0 -4
  9. package/dist/components/KYC/utils.js +18 -18
  10. package/dist/components/SignUp/SignUpKYC/CaptureIdDocument.js +2 -2
  11. package/dist/components/SignUp/SignUpKYC/CaptureSelfie.js +3 -3
  12. package/dist/components/SignUp/SignUpKYC/ImageUploader.js +1 -1
  13. package/dist/components/SignUp/SignUpKYC/PersonOverlayDesktop.d.ts +7 -0
  14. package/dist/components/SignUp/SignUpKYC/PersonOverlayDesktop.js +9 -0
  15. package/dist/components/SignUp/SignUpKYC/utils.d.ts +9 -0
  16. package/dist/components/SignUp/SignUpKYC/utils.js +79 -0
  17. package/dist/components/Tournaments/TournamentsCarousel/TournamentsCarouselItem.module.css +184 -184
  18. package/dist/components/Tournaments/TournamentsList/TournamentItem.module.css +184 -184
  19. package/dist/components/shared/IdFrontImageField/IdFrontImageField.client.js +1 -1
  20. package/dist/components/shared/SelfieImageField/SelfieImageField.client.js +1 -1
  21. package/dist/components/shared/SelfieImageField/useSelfieImageField.js +19 -17
  22. package/dist/handlers/postTransformIdFrontImage.js +21 -6
  23. package/dist/handlers/postTransformSelfieImage.js +20 -9
  24. package/dist/services/queries.js +2570 -2570
  25. package/dist/styles/theme.css +694 -694
  26. package/package.json +166 -166
  27. package/dist/components/shared/IdDocumentField.client.d.ts +0 -25
  28. package/dist/components/shared/IdDocumentField.client.js +0 -204
  29. package/dist/components/shared/IdDocumentField.d.ts +0 -2
  30. package/dist/components/shared/IdDocumentField.js +0 -11
  31. package/dist/components/shared/SelfieField.client.d.ts +0 -20
  32. package/dist/components/shared/SelfieField.client.js +0 -327
  33. package/dist/components/shared/SelfieField.d.ts +0 -2
  34. package/dist/components/shared/SelfieField.js +0 -11
  35. package/dist/handlers.d.ts +0 -43
  36. package/dist/handlers.js +0 -297
package/package.json CHANGED
@@ -1,166 +1,166 @@
1
- {
2
- "name": "@opexa/portal-components",
3
- "version": "0.0.262",
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,2 +0,0 @@
1
- import type { IdDocumentFieldProps } from './IdDocumentField.client';
2
- export declare function IdDocumentField(props: IdDocumentFieldProps): import("react/jsx-runtime").JSX.Element;
@@ -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 {};