@opexa/portal-components 0.0.236 → 0.0.238

package/dist/components/shared/IdDocumentField.js

@@ -22,11 +22,9 @@ import { XIcon } from '../../icons/XIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { dataAttr } from '../../utils/dataAttr.js';
 import { validateFile } from '../../utils/validateFile.js';
 export function IdDocumentField(props) {
     const context = useIdDocumentField(props);
-    const { field, setValue, query, mutation, inputRef, guideRef, camera, disclosure, } = context;
     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) => {
                     e.preventDefault();
                     const file = e.dataTransfer.files?.[0];
@@ -35,60 +33,73 @@ export function IdDocumentField(props) {
                     const error = validateFile(file);
                     if (error)
                         return props.onError?.(error);
-                    mutation.mutate({ file });
-                }, "data-invalid": dataAttr(props.invalid ?? field?.invalid), "data-readonly": dataAttr(props.readOnly ?? field?.readOnly), "data-disabled": dataAttr(props.disabled ?? field?.disabled), "data-required": dataAttr(props.required ?? field?.required), "data-loading": dataAttr(query.isLoading || mutation.isPending), "aria-describedby": field?.ariaDescribedby, children: [_jsx("input", { id: field?.ids?.control, ref: inputRef, type: "file", accept: "image/png, image/jpeg", onChange: (e) => {
+                    context.mutation.mutate({ file });
+                }, "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) => {
                             const file = e.target.files?.[0];
                             if (!file)
                                 return;
                             const error = validateFile(file);
                             if (error)
                                 return props.onError?.(error);
-                            mutation.mutate({ file });
-                        }, disabled: field?.disabled ||
-                            props.disabled ||
-                            query.isLoading ||
-                            mutation.isPending, readOnly: field?.readOnly || props.readOnly, required: field?.required || props.required, className: "sr-only" }), !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: () => {
-                                                    inputRef.current?.click();
-                                                }, disabled: field?.disabled ||
-                                                    field?.readOnly ||
+                            context.mutation.mutate({ file });
+                        }, disabled: context.field?.disabled ||
+                            context.query.isLoading ||
+                            context.mutation.isPending ||
+                            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: () => {
+                                                    context.inputRef.current?.click();
+                                                }, disabled: context.field?.disabled ||
+                                                    context.field?.readOnly ||
+                                                    context.query.isLoading ||
+                                                    context.mutation.isPending ||
                                                     props.disabled ||
-                                                    props.readOnly ||
-                                                    query.isLoading ||
-                                                    mutation.isPending, "data-required": dataAttr(props.required ?? field?.required), "data-readonly": dataAttr(props.readOnly ?? field?.readOnly), "data-loading": dataAttr(query.isLoading || mutation.isPending), "data-invalid": dataAttr(props.invalid ?? field?.invalid), 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: () => {
-                                    disclosure.setOpen(true);
-                                }, disabled: field?.disabled ||
-                                    field?.readOnly ||
+                                                    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: () => {
+                                    context.disclosure.setOpen(true);
+                                }, disabled: context.field?.disabled ||
+                                    context.field?.readOnly ||
+                                    context.query.isLoading ||
+                                    context.mutation.isPending ||
                                     props.disabled ||
-                                    props.readOnly ||
-                                    query.isLoading ||
-                                    mutation.isPending, "data-required": dataAttr(props.required ?? field?.required), "data-readonly": dataAttr(props.readOnly ?? field?.readOnly), "data-loading": dataAttr(query.isLoading || mutation.isPending), "data-invalid": dataAttr(props.invalid ?? field?.invalid), children: "Take a photo" })] })), query.data?.url && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: 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: () => {
-                                    setValue('');
-                                }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Dialog.Root, { open: disclosure.open, onOpenChange: (details) => {
-                    disclosure.setOpen(details.open);
-                }, onExitComplete: 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)] 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: [_jsxs("div", { className: twMerge('border-border-disabled relative w-full overflow-hidden rounded-md border bg-black lg:rounded-lg', !camera.data && !camera.error && !camera.loading
-                                                    ? 'block'
-                                                    : 'hidden'), children: [_jsx("video", { ...camera.videoProps }), _jsx(Mask, {})] }), camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", 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: camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
-                                                            camera.reopen();
-                                                        }, children: "Try again" })] })), camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), camera.data && (_jsx("div", { className: "border-border-disabled h-auto w-full overflow-hidden rounded-md border bg-black lg:rounded-lg", children: _jsx(Image, { src: camera.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "block h-auto w-full" }) }))] }), !camera.data && !camera.error && !camera.loading && (_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 lg:w-auto", onClick: () => {
-                                                const rect = guideRef.current?.getBoundingClientRect();
-                                                const crop = !rect
-                                                    ? undefined
-                                                    : {
-                                                        y: rect.y,
-                                                        x: rect.x,
-                                                        width: rect.width,
-                                                        height: rect.height,
-                                                    };
-                                                camera.snap({ crop });
-                                            }, children: [_jsx(Camera01Icon, { className: "size-5" }), "Capture"] }) })), camera.data && (_jsxs("div", { className: "mt-5 flex gap-3 lg:mt-10", children: [_jsxs(Button, { onClick: () => {
-                                                    const file = camera.data?.file;
-                                                    if (!file)
-                                                        return;
-                                                    mutation.mutate({ file });
-                                                    disclosure.setOpen(false);
-                                                }, children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                                    camera.reset();
-                                                }, children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) })] }));
+                                    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: () => {
+                                    context.setValue('');
+                                }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Camera, {})] }));
+}
+/**
+ * -------------------------------------
+ *  Camera
+ * -------------------------------------
+ */
+function Camera() {
+    const context = useIdDocumentFieldContext();
+    return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
+            context.disclosure.setOpen(details.open);
+        }, 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: [_jsxs("div", { className: twMerge('border-border-disabled relative w-full overflow-hidden rounded-md border bg-black lg:rounded-lg', !context.camera.data &&
+                                            !context.camera.error &&
+                                            !context.camera.loading
+                                            ? 'block'
+                                            : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx(Mask, {})] }), context.camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", 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: () => {
+                                                    context.camera.reopen();
+                                                }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), context.camera.data && (_jsx("div", { className: "border-border-disabled h-auto w-full overflow-hidden rounded-md border bg-black lg:rounded-lg", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 378.08, unoptimized: true, className: "block h-auto w-full" }) }))] }), !context.camera.data &&
+                                !context.camera.error &&
+                                !context.camera.loading && (_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 lg:w-auto", onClick: () => {
+                                        const rect = context.guideRef.current?.getBoundingClientRect();
+                                        const crop = !rect
+                                            ? undefined
+                                            : {
+                                                y: rect.y,
+                                                x: rect.x,
+                                                width: rect.width,
+                                                height: rect.height,
+                                            };
+                                        context.camera.snap({ crop });
+                                    }, children: [_jsx(Camera01Icon, { className: "size-5" }), "Capture"] }) })), context.camera.data && (_jsxs("div", { className: "mt-5 flex gap-3 lg:mt-10", children: [_jsxs(Button, { onClick: () => {
+                                            const file = context.camera.data?.file;
+                                            if (!file)
+                                                return;
+                                            context.mutation.mutate({ file });
+                                            context.disclosure.setOpen(false);
+                                        }, children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                                            context.camera.reset();
+                                        }, children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
 }
 /**
  * -------------------------------------
@@ -97,7 +108,7 @@ export function IdDocumentField(props) {
  */
 function Mask() {
     const id = useId();
-    const { guideRef, maskRef } = useIdDocumentFieldContext();
+    const context = useIdDocumentFieldContext();
     const [maskBox, setMaskBox] = useState({
         x: 0,
         y: 0,
@@ -106,8 +117,8 @@ function Mask() {
     });
     useLayoutEffect(() => {
         const update = () => {
-            const guide = guideRef.current;
-            const mask = maskRef.current;
+            const guide = context.guideRef.current;
+            const mask = context.maskRef.current;
             if (!guide || !mask)
                 return;
             const guideRect = guide.getBoundingClientRect();
@@ -126,19 +137,19 @@ function Mask() {
             }
         };
         const observer = new ResizeObserver(update);
-        if (guideRef.current)
-            observer.observe(guideRef.current);
-        if (maskRef.current)
-            observer.observe(maskRef.current);
+        if (context.guideRef.current)
+            observer.observe(context.guideRef.current);
+        if (context.maskRef.current)
+            observer.observe(context.maskRef.current);
         requestAnimationFrame(update);
         return () => observer.disconnect();
-    }, [guideRef, maskRef]);
-    return (_jsxs(_Fragment, { children: [_jsx("svg", { className: "pointer-events-none absolute h-full w-full", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", 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: maskRef, className: "absolute inset-0 bg-black/60 backdrop-blur-sm", style: {
+    }, [context.guideRef, context.maskRef]);
+    return (_jsxs(_Fragment, { children: [_jsx("svg", { className: "pointer-events-none absolute h-full w-full", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", 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-0 bg-black/60 backdrop-blur-sm", style: {
                     mask: `url(#${id})`,
                     WebkitMask: `url(#${id})`,
                     maskRepeat: 'no-repeat',
                     WebkitMaskRepeat: 'no-repeat',
-                } }), _jsx("div", { ref: 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" })] }));
+                } }), _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" })] }));
 }
 function useIdDocumentField(props) {
     const field = useFieldContext();

package/dist/components/shared/SelfieField.d.ts

@@ -1,13 +1,13 @@
-import { type CSSProperties, type Ref } from 'react';
+import '@mediapipe/face_detection';
+import '@tensorflow/tfjs-backend-webgl';
+import '@tensorflow/tfjs-core';
+import { type CSSProperties, type RefObject } from 'react';
 import { type ValidateFileError } from '../../utils/validateFile';
-export interface SelfieFieldProps {
-    ref?: Ref<HTMLDivElement>;
+export interface SelfieFieldProps extends UseSelfieFieldProps {
+    ref?: RefObject<HTMLDivElement | null>;
     id?: string;
     style?: CSSProperties;
     className?: string;
-    value?: string;
-    onChange?: (value: string) => void;
-    defaultValue?: string;
     invalid?: boolean;
     readOnly?: boolean;
     disabled?: boolean;
@@ -15,3 +15,9 @@ export interface SelfieFieldProps {
     onError?: (error: ValidateFileError) => void;
 }
 export declare function SelfieField(props: SelfieFieldProps): import("react/jsx-runtime").JSX.Element;
+interface UseSelfieFieldProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    defaultValue?: string;
+}
+export {};

package/dist/components/shared/SelfieField.js

@@ -1,9 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import '@mediapipe/face_detection';
+import * as faceDetection from '@tensorflow-models/face-detection';
+import '@tensorflow/tfjs-backend-webgl';
+import '@tensorflow/tfjs-core';
 import { useFieldContext } from '@ark-ui/react';
 import Image from 'next/image';
 import { useId, useLayoutEffect, useRef, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
+import { useInterval } from 'usehooks-ts';
 import { useCamera } from '../../client/hooks/useCamera.js';
 import { useControllableState } from '../../client/hooks/useControllableState.js';
 import { useDisclosure } from '../../client/hooks/useDisclosure.js';
@@ -21,12 +26,10 @@ import { XIcon } from '../../icons/XIcon.js';
 import { Button } from '../../ui/Button/index.js';
 import { Dialog } from '../../ui/Dialog/index.js';
 import { Portal } from '../../ui/Portal/index.js';
-import { dataAttr } from '../../utils/dataAttr.js';
 import { validateFile } from '../../utils/validateFile.js';
 export function SelfieField(props) {
     const context = useSelfieField(props);
-    const { field, setValue, query, mutation, camera, disclosure, inputRef, guideRef, } = context;
-    return (_jsxs(SelfieFieldProvider, { 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) => {
+    return (_jsxs(SelfieFieldProvider, { value: context, children: [_jsxs("div", { ref: props.ref, id: props.id, style: props.style, className: twMerge('group', 'border', 'border-border-primary', 'bg-bg-primary', 'relative', 'w-full', 'aspect-[352/180]', 'shrink-0', 'rounded-xl', 'p-xl', props.className), onDragOver: (e) => e.preventDefault(), onDragEnter: (e) => e.preventDefault(), onDragLeave: (e) => e.preventDefault(), onDrop: (e) => {
                     e.preventDefault();
                     const file = e.dataTransfer.files?.[0];
                     if (!file)
@@ -34,103 +37,123 @@ export function SelfieField(props) {
                     const error = validateFile(file);
                     if (error)
                         return props.onError?.(error);
-                    mutation.mutate({ file });
-                }, "data-invalid": dataAttr(props.invalid ?? field?.invalid), "data-readonly": dataAttr(props.readOnly ?? field?.readOnly), "data-disabled": dataAttr(props.disabled ?? field?.disabled), "data-required": dataAttr(props.required ?? field?.required), "data-loading": dataAttr(query.isLoading || mutation.isPending), "aria-describedby": field?.ariaDescribedby, children: [_jsx("input", { id: field?.ids?.control, ref: inputRef, type: "file", accept: "image/png, image/jpeg", onChange: (e) => {
+                    context.mutation.mutate({ file });
+                }, "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) => {
                             const file = e.target.files?.[0];
                             if (!file)
                                 return;
                             const error = validateFile(file);
                             if (error)
                                 return props.onError?.(error);
-                            mutation.mutate({ file });
-                        }, disabled: field?.disabled ||
-                            props.disabled ||
-                            query.isLoading ||
-                            mutation.isPending, readOnly: field?.readOnly || props.readOnly, required: field?.required || props.required, className: "sr-only" }), !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: () => {
-                                                    inputRef.current?.click();
-                                                }, disabled: field?.disabled ||
-                                                    field?.readOnly ||
+                            context.mutation.mutate({ file });
+                        }, disabled: context.field?.disabled ||
+                            context.query.isLoading ||
+                            context.mutation.isPending ||
+                            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: () => {
+                                                    context.inputRef.current?.click();
+                                                }, disabled: context.field?.disabled ||
+                                                    context.field?.readOnly ||
+                                                    context.query.isLoading ||
+                                                    context.mutation.isPending ||
                                                     props.disabled ||
-                                                    props.readOnly ||
-                                                    query.isLoading ||
-                                                    mutation.isPending, "data-required": dataAttr(props.required ?? field?.required), "data-readonly": dataAttr(props.readOnly ?? field?.readOnly), "data-loading": dataAttr(query.isLoading || mutation.isPending), "data-invalid": dataAttr(props.invalid ?? field?.invalid), 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: () => {
-                                    disclosure.setOpen(true);
-                                }, disabled: field?.disabled ||
-                                    field?.readOnly ||
+                                                    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: () => {
+                                    context.disclosure.setOpen(true);
+                                }, disabled: context.field?.disabled ||
+                                    context.field?.readOnly ||
+                                    context.query.isLoading ||
+                                    context.mutation.isPending ||
                                     props.disabled ||
-                                    props.readOnly ||
-                                    query.isLoading ||
-                                    mutation.isPending, "data-required": dataAttr(props.required ?? field?.required), "data-readonly": dataAttr(props.readOnly ?? field?.readOnly), "data-loading": dataAttr(query.isLoading || mutation.isPending), "data-invalid": dataAttr(props.invalid ?? field?.invalid), children: "Take a photo" })] })), query.data?.url && (_jsxs("div", { className: "relative", children: [_jsx(Image, { src: query.data.url, alt: "", width: 600, height: 600, 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: () => {
-                                    setValue('');
-                                }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Dialog.Root, { open: disclosure.open, onOpenChange: (details) => {
-                    disclosure.setOpen(details.open);
-                }, onExitComplete: 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)] 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 Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: "Make sure your face and ID are clearly visible, with no glare\u00A0or\u00A0blur." }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsxs("div", { className: twMerge('border-border-disabled relative w-full overflow-hidden rounded-md border bg-black lg:rounded-lg', !camera.data && !camera.error && !camera.loading
-                                                    ? 'block'
-                                                    : 'hidden'), children: [_jsx("video", { ...camera.videoProps }), _jsx(Mask, {})] }), camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", 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: camera.error.name }), _jsx("p", { className: "text-text-tertiary-600 mt-0.5 text-center text-xs lg:mt-1 lg:text-sm", children: camera.error.message }), _jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", fullWidth: false, className: "mt-4 lg:mt-5", onClick: () => {
-                                                            camera.reopen();
-                                                        }, children: "Try again" })] })), camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), camera.data && (_jsx("div", { className: "border-border-disabled h-auto w-full overflow-hidden rounded-md border bg-black lg:rounded-lg", children: _jsx(Image, { src: camera.data.url, alt: "", width: 600, height: 600, unoptimized: true, className: "block h-auto w-full" }) }))] }), !camera.data && !camera.error && !camera.loading && (_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 lg:w-auto", onClick: () => {
-                                                const rect = guideRef.current?.getBoundingClientRect();
-                                                const crop = !rect
-                                                    ? undefined
-                                                    : {
-                                                        y: rect.y,
-                                                        x: rect.x,
-                                                        width: rect.width,
-                                                        height: rect.height,
-                                                    };
-                                                camera.snap({ crop });
-                                            }, children: [_jsx(Camera01Icon, { className: "size-5" }), "Capture"] }) })), camera.data && (_jsxs("div", { className: "mt-5 flex gap-3 lg:mt-10", children: [_jsxs(Button, { onClick: () => {
-                                                    const file = camera.data?.file;
-                                                    if (!file)
-                                                        return;
-                                                    mutation.mutate({ file });
-                                                    disclosure.setOpen(false);
-                                                }, children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
-                                                    camera.reset();
-                                                }, children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) })] }));
+                                    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: 600, 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: () => {
+                                    context.setValue('');
+                                }, children: _jsx(XIcon, { className: "size-5" }) })] }))] }), _jsx(Camera, {})] }));
 }
 /**
+ * -------------------------------------
+ *  Camera
+ * -------------------------------------
+ */
+function Camera() {
+    const context = useSelfieFieldContext();
+    return (_jsx(Dialog.Root, { open: context.disclosure.open, onOpenChange: (details) => {
+            context.disclosure.setOpen(details.open);
+        }, 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 Selfie Holding Your ID" }), _jsx(Dialog.Description, { className: "text-text-tertiary-600 mt-md text-center text-xs lg:text-base", children: "Make sure your face and ID are clearly visible, with no glare\u00A0or\u00A0blur." }), _jsxs("div", { className: "relative mt-5 lg:mt-10 lg:px-3xl", children: [_jsxs("div", { className: twMerge('border-border-disabled relative w-full overflow-hidden rounded-md border bg-black lg:rounded-lg', !context.camera.data &&
+                                            !context.camera.error &&
+                                            !context.camera.loading
+                                            ? 'block'
+                                            : 'hidden'), children: [_jsx("video", { ...context.camera.videoProps }), _jsx(Mask, {})] }), context.camera.error && (_jsxs("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", 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: () => {
+                                                    context.camera.reopen();
+                                                }, children: "Try again" })] })), context.camera.loading && (_jsx("div", { className: "border-border-disabled flex aspect-[85.60/53.98] flex-col items-center justify-center rounded-md border bg-black px-4 lg:rounded-lg", children: _jsx(Spinner02Icon, { className: "text-text-placeholder size-8" }) })), context.camera.data && (_jsx("div", { className: "border-border-disabled h-auto w-full overflow-hidden rounded-md border bg-black lg:rounded-lg", children: _jsx(Image, { src: context.camera.data.url, alt: "", width: 600, height: 600, unoptimized: true, className: "block h-auto w-full" }) }))] }), !context.camera.data &&
+                                !context.camera.error &&
+                                !context.camera.loading && (_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 lg:w-auto", onClick: () => {
+                                        const rect = context.guideRef.current?.getBoundingClientRect();
+                                        const crop = !rect
+                                            ? undefined
+                                            : {
+                                                y: rect.y,
+                                                x: rect.x,
+                                                width: rect.width,
+                                                height: rect.height,
+                                            };
+                                        context.camera.snap({ crop });
+                                    }, disabled: !context.faceFound, children: [_jsx(Camera01Icon, { className: "size-5" }), "Capture"] }) })), context.camera.data && (_jsxs("div", { className: "mt-5 flex gap-3 lg:mt-10", children: [_jsxs(Button, { onClick: () => {
+                                            const file = context.camera.data?.file;
+                                            if (!file)
+                                                return;
+                                            context.mutation.mutate({ file });
+                                            context.disclosure.setOpen(false);
+                                        }, children: [_jsx(CheckCircleIcon, { className: "size-5" }), "Use Photo"] }), _jsxs(Button, { variant: "outline", colorScheme: "gray", onClick: () => {
+                                            context.camera.reset();
+                                        }, children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) }));
+}
+/*
  * -------------------------------------
  *  Mask
  * -------------------------------------
  */
 function Mask() {
     const id = useId();
-    const { guideRef, maskRef } = useSelfieFieldContext();
+    const context = useSelfieFieldContext();
     const [maskBox, setMaskBox] = useState({
-        cx: 0,
-        cy: 0,
-        r: 0,
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
     });
     useLayoutEffect(() => {
         const update = () => {
-            const guide = guideRef.current;
-            const mask = maskRef.current;
+            const guide = context.guideRef.current;
+            const mask = context.maskRef.current;
             if (!guide || !mask)
                 return;
             const guideRect = guide.getBoundingClientRect();
             const maskRect = mask.getBoundingClientRect();
-            const cx = guideRect.left + guideRect.width / 2 - maskRect.left;
-            const cy = guideRect.top + guideRect.height / 2 - maskRect.top;
-            const r = guideRect.width / 2;
-            setMaskBox({
-                cx,
-                cy,
-                r,
-            });
+            const x = guideRect.left - maskRect.left;
+            const y = guideRect.top - maskRect.top;
+            const width = guideRect.width;
+            const height = guideRect.height;
+            if (width && height) {
+                setMaskBox({
+                    x,
+                    y,
+                    width,
+                    height,
+                });
+            }
         };
-        update();
         const observer = new ResizeObserver(update);
-        if (guideRef.current)
-            observer.observe(guideRef.current);
-        if (maskRef.current)
-            observer.observe(maskRef.current);
+        if (context.guideRef.current)
+            observer.observe(context.guideRef.current);
+        if (context.maskRef.current)
+            observer.observe(context.maskRef.current);
+        requestAnimationFrame(update);
         return () => observer.disconnect();
-    }, [guideRef, maskRef]);
-    return (_jsxs(_Fragment, { children: [_jsx("svg", { className: "absolute h-full w-full", children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { width: "100%", height: "100%", fill: "white" }), _jsx("circle", { cx: maskBox.cx, cy: maskBox.cy, r: maskBox.r, fill: "black" })] }) }), _jsx("div", { ref: maskRef, className: "absolute inset-0 bg-black/60 backdrop-blur-sm", style: {
+    }, [context.guideRef, context.maskRef]);
+    return (_jsxs(_Fragment, { children: [_jsx("svg", { className: "pointer-events-none absolute h-full w-full", children: _jsx("defs", { children: _jsxs("mask", { id: id, maskUnits: "userSpaceOnUse", children: [_jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }), _jsx("rect", { x: maskBox.x, y: maskBox.y, width: maskBox.width, height: maskBox.height, fill: "black", rx: "8" /* change to 100% for circle */, ry: "8" /* change to 100% for circle */ })] }) }) }), _jsx("div", { ref: context.maskRef, className: "absolute inset-0 bg-black/60 backdrop-blur-sm", style: {
                     mask: `url(#${id})`,
                     WebkitMask: `url(#${id})`,
-                } }), _jsx("div", { ref: guideRef, className: "border-utility-warning-700 absolute left-1/2 top-1/2 z-20 aspect-square w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-dashed lg:w-[29.688rem]" })] }));
+                    maskRepeat: 'no-repeat',
+                    WebkitMaskRepeat: 'no-repeat',
+                } }), _jsx("div", { ref: context.guideRef, className: twMerge('border-utility-warning-700 absolute left-1/2 top-1/2 z-20 aspect-square w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-md border-2 border-dashed transition-all duration-200 lg:w-[24.688rem]', context.faceFound && 'border-utility-success-700 border-solid') })] }));
 }
 function useSelfieField(props) {
     const field = useFieldContext();
@@ -166,7 +189,22 @@ function useSelfieField(props) {
     const inputRef = useRef(null);
     const maskRef = useRef(null);
     const guideRef = useRef(null);
-    const camera = useCamera();
+    const camera = useCamera({
+        async validate(data) {
+            const face = await getFaceFromFile(data.file);
+            console.log(face);
+            /*
+             ⛏️ FIXME
+            if (!face) {
+              return {
+                name: 'FaceNotFoundError',
+                message: 'Please ensure your face is clearly visible in the photo.',
+              };
+            }
+             */
+            return null;
+        },
+    });
     const disclosure = useDisclosure({
         onOpenChange(open) {
             if (open) {
@@ -174,6 +212,37 @@ function useSelfieField(props) {
             }
         },
     });
+    const [faceFound, setFaceFound] = useState(false);
+    useInterval(async () => {
+        if (!camera.videoRef.current)
+            return setFaceFound(false);
+        if (!guideRef.current)
+            return setFaceFound(false);
+        const guide = guideRef.current;
+        const video = camera.videoRef.current;
+        const guideRect = guide.getBoundingClientRect();
+        const videoRect = video.getBoundingClientRect();
+        const face = await getFace(video);
+        if (!face)
+            return setFaceFound(false);
+        /* ⛏️ FIXME */
+        const scaleX = videoRect.width / video.videoWidth;
+        const scaleY = videoRect.height / video.videoHeight;
+        const offsetX = videoRect.left;
+        const offsetY = videoRect.top;
+        const faceBoxX = offsetX + face.box.xMin * video.videoWidth * scaleX;
+        const faceBoxY = offsetY + face.box.yMin * video.videoHeight * scaleY;
+        const faceBoxWidth = (face.box.xMax - face.box.xMin) * video.videoWidth * scaleX;
+        const faceBoxHeight = (face.box.yMax - face.box.yMin) * video.videoHeight * scaleY;
+        const faceIsInsideGuide = faceBoxX >= guideRect.left &&
+            faceBoxY >= guideRect.top &&
+            faceBoxX + faceBoxWidth <= guideRect.right &&
+            faceBoxY + faceBoxHeight <= guideRect.bottom;
+        console.log({ faceIsInsideGuide });
+        setFaceFound(true);
+    }, disclosure.open && !camera.data && !camera.error && !camera.loading
+        ? 1000
+        : null);
     return {
         field,
         value,
@@ -185,6 +254,53 @@ function useSelfieField(props) {
         inputRef,
         guideRef,
         maskRef,
+        faceFound,
     };
 }
 const [SelfieFieldProvider, useSelfieFieldContext] = createContext();
+/*
+ * -------------------------------------
+ *  Utils
+ * -------------------------------------
+ */
+let __face_detector__;
+async function getFaceDetector() {
+    if (__face_detector__)
+        return __face_detector__;
+    __face_detector__ = await faceDetection.createDetector(faceDetection.SupportedModels.MediaPipeFaceDetector, {
+        runtime: 'tfjs',
+        maxFaces: 1,
+    });
+    return __face_detector__;
+}
+async function getFace(video) {
+    if (!video || video.readyState < 2)
+        return null;
+    try {
+        const detector = await getFaceDetector();
+        const faces = await detector.estimateFaces(video);
+        return faces.at(0) ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+function fileToImage(file) {
+    return new Promise((resolve, reject) => {
+        const img = new globalThis.Image();
+        img.src = URL.createObjectURL(file);
+        img.onload = () => resolve(img);
+        img.onerror = () => reject('Failed to load image');
+    });
+}
+async function getFaceFromFile(file) {
+    try {
+        const detector = await getFaceDetector();
+        const image = await fileToImage(file);
+        const faces = await detector.estimateFaces(image);
+        return faces.at(0) ?? null;
+    }
+    catch {
+        return null;
+    }
+}

package/dist/next.config.js

@@ -48,6 +48,14 @@ export const config = {
     compiler: {
         removeConsole: process.env.NODE_ENV === 'production',
     },
+    webpack(config) {
+        config.resolve.fallback = {
+            fs: false,
+            path: false,
+            crypto: false,
+        };
+        return config;
+    },
 };
 export function extendConfig(userConfig) {
     return {