@opexa/portal-components 0.0.231 → 0.0.232

package/dist/client/hooks/useCamera.d.ts

@@ -28,6 +28,7 @@ export interface UseCameraReturn {
     data: CameraData | null;
     error: CameraError | null;
     loading: boolean;
+    videoRef: React.RefObject<HTMLVideoElement | null>;
     videoProps: ComponentPropsWithRef<'video'>;
 }
 export interface UseCameraOptions extends MediaStreamConstraints {

package/dist/client/hooks/useCamera.js

@@ -3,7 +3,7 @@ import { useCallback, useMemo, useRef, useState, } from 'react';
 import invariant from 'tiny-invariant';
 export function useCamera(options = {}) {
     const { validate, ...constraints } = options;
-    const ref = useRef(null);
+    const videoRef = useRef(null);
     const stream = useRef(null);
     const [data, setData] = useState(null);
     const [error, setError] = useState(null);
@@ -13,7 +13,7 @@ export function useCamera(options = {}) {
         setError(null);
         setLoading(true);
         await sleep();
-        const node = ref.current;
+        const node = videoRef.current;
         if (!node) {
             setLoading(false);
             setError({
@@ -74,18 +74,18 @@ export function useCamera(options = {}) {
         setError(null);
         return new Promise((resolve) => {
             stream.current?.getTracks().forEach((track) => track.stop());
-            ref.current?.pause();
+            videoRef.current?.pause();
             resolve();
         });
     }, [setData, setError]);
     const snap = useCallback(async (opts = {}) => {
         setData(null);
         setError(null);
-        const video = ref.current;
+        const video = videoRef.current;
         const canvas = document.createElement('canvas');
         const context = canvas.getContext('2d');
-        invariant(video);
-        invariant(context);
+        invariant(video, 'Could not find video element');
+        invariant(context, 'Could not get canvas context');
         video.currentTime = 1;
         const videoRect = video.getBoundingClientRect();
         const lowResolution = video.videoWidth < 640 || video.videoHeight < 480;
@@ -149,14 +149,18 @@ export function useCamera(options = {}) {
         await open();
     }, [close, open]);
     const videoProps = useMemo(() => ({
-        ref,
+        ref: videoRef,
         muted: true,
         autoPlay: true,
         playsInline: true,
+        preload: 'none',
         style: {
             width: '100%',
             height: 'auto',
             display: 'block',
+            position: 'relative',
+            boxSizing: 'border-box',
+            background: 'transparent',
         },
     }), []);
     return {
@@ -168,6 +172,7 @@ export function useCamera(options = {}) {
         data,
         error,
         loading,
+        videoRef,
         videoProps,
     };
 }

package/dist/client/hooks/useFeatureFlag.d.ts

@@ -1,5 +1,5 @@
 export declare const FEATURE_FLAG_KEY = "FEATURE_FLAG_ENABLED";
 export declare const useFeatureFlag: () => {
     featureFlagEnabled: boolean;
-    disableFeatureFlag: () => void;
+    setFeatureFlagEnabled: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };

package/dist/client/hooks/useFeatureFlag.js

@@ -1,34 +1,16 @@
 'use client';
-import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 export const FEATURE_FLAG_KEY = 'FEATURE_FLAG_ENABLED';
 export const useFeatureFlag = () => {
     const [featureFlagEnabled, setFeatureFlagEnabled] = useState(false);
-    const searchParams = useSearchParams();
-    const router = useRouter();
-    useEffect(() => {
-        const futureFlagParam = searchParams.get('future');
-        if (futureFlagParam !== null) {
-            const isEnabled = futureFlagParam === 'true';
-            setFeatureFlagEnabled(isEnabled);
-            localStorage.setItem(FEATURE_FLAG_KEY, isEnabled.toString());
-        }
-    }, [searchParams]);
     useEffect(() => {
         const storedFlag = localStorage.getItem(FEATURE_FLAG_KEY);
         if (storedFlag !== null) {
             setFeatureFlagEnabled(storedFlag === 'true');
         }
     }, []);
-    function disableFeatureFlag() {
-        setFeatureFlagEnabled(false);
-        localStorage.removeItem(FEATURE_FLAG_KEY);
-        const params = new URLSearchParams(searchParams.toString());
-        params.delete('future');
-        router.replace(`?${params.toString()}`, { scroll: false });
-    }
     return {
         featureFlagEnabled,
-        disableFeatureFlag,
+        setFeatureFlagEnabled,
     };
 };

package/dist/components/FeatureFlag/FeatureFlag.js

@@ -1,8 +1,27 @@
 'use client';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useFeatureFlag } from '../../client/hooks/useFeatureFlag.js';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+import { FEATURE_FLAG_KEY, useFeatureFlag, } from '../../client/hooks/useFeatureFlag.js';
 export function FeatureFlag() {
-    const { featureFlagEnabled, disableFeatureFlag } = useFeatureFlag();
+    const { featureFlagEnabled, setFeatureFlagEnabled } = useFeatureFlag();
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    useEffect(() => {
+        const futureFlagParam = searchParams.get('future');
+        if (futureFlagParam !== null) {
+            const isEnabled = futureFlagParam === 'true';
+            setFeatureFlagEnabled(isEnabled);
+            localStorage.setItem(FEATURE_FLAG_KEY, isEnabled.toString());
+        }
+    }, [searchParams, setFeatureFlagEnabled]);
+    function disableFeatureFlag() {
+        setFeatureFlagEnabled(false);
+        localStorage.removeItem(FEATURE_FLAG_KEY);
+        const params = new URLSearchParams(searchParams.toString());
+        params.delete('future');
+        router.replace(`?${params.toString()}`, { scroll: false });
+    }
     if (!featureFlagEnabled) {
         return null;
     }

package/dist/components/shared/IdDocumentField.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFieldContext } from '@ark-ui/react';
 import Image from 'next/image';
-import { useRef } from 'react';
+import { useId, useLayoutEffect, useRef, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useMediaQuery } from 'usehooks-ts';
 import { useCamera } from '../../client/hooks/useCamera.js';
@@ -10,6 +10,7 @@ import { useControllableState } from '../../client/hooks/useControllableState.js
 import { useDisclosure } from '../../client/hooks/useDisclosure.js';
 import { useFileQuery } from '../../client/hooks/useFileQuery.js';
 import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
+import { createContext } from '../../client/utils/createContext.js';
 import { toaster } from '../../client/utils/toaster.js';
 import { Camera01Icon } from '../../icons/Camera01Icon.js';
 import { CameraOffIcon } from '../../icons/CameraOffIcon.js';
@@ -24,52 +25,9 @@ import { Portal } from '../../ui/Portal/index.js';
 import { dataAttr } from '../../utils/dataAttr.js';
 import { validateFile } from '../../utils/validateFile.js';
 export function IdDocumentField(props) {
-    const field = useFieldContext();
-    const [value, setValue] = useControllableState({
-        value: props.value,
-        defaultValue: props.defaultValue ?? '',
-        onChange: props.onChange,
-    });
-    const query = useFileQuery(value, {
-        refetchInterval({ state }) {
-            return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
-        },
-    });
-    const mutation = useUploadImageFileMutation({
-        onSuccess(id) {
-            setValue(id);
-        },
-        onMutate() {
-            setValue('');
-        },
-        onError(error) {
-            toaster.error({
-                title: 'Upload Failed',
-                description: error.message,
-            });
-        },
-        onSettled() {
-            if (inputRef.current) {
-                inputRef.current.value = '';
-            }
-        },
-    });
-    const inputRef = useRef(null);
-    const guideRef = useRef(null);
-    const desktop = useMediaQuery('(min-width: 1024px)');
-    const camera = useCamera({
-        video: {
-            facingMode: desktop ? 'user' : 'environment',
-        },
-    });
-    const disclosure = useDisclosure({
-        onOpenChange(open) {
-            if (open) {
-                camera.open();
-            }
-        },
-    });
-    return (_jsxs(_Fragment, { 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) => {
+    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];
                     if (!file)
@@ -109,7 +67,7 @@ export function IdDocumentField(props) {
                     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("div", { ref: guideRef, className: "border-utility-warning-700 absolute left-1/2 top-1/2 aspect-[85.60/53.98] w-[calc(100%-1rem)] -translate-x-1/2 -translate-y-1/2 rounded-md border-2 border-dashed lg:w-[29.688rem]" })] }), 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: () => {
+                                                    : '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();
@@ -132,3 +90,114 @@ export function IdDocumentField(props) {
                                                     camera.reset();
                                                 }, children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) })] }));
 }
+/**
+ * -------------------------------------
+ *  Mask
+ * -------------------------------------
+ */
+function Mask() {
+    const id = useId();
+    const { guideRef, maskRef } = useIdDocumentFieldContext();
+    const [maskBox, setMaskBox] = useState({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    useLayoutEffect(() => {
+        const update = () => {
+            const guide = guideRef.current;
+            const mask = maskRef.current;
+            if (!guide || !mask)
+                return;
+            const guideRect = guide.getBoundingClientRect();
+            const maskRect = mask.getBoundingClientRect();
+            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,
+                });
+            }
+        };
+        const observer = new ResizeObserver(update);
+        if (guideRef.current)
+            observer.observe(guideRef.current);
+        if (maskRef.current)
+            observer.observe(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: {
+                    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" })] }));
+}
+function useIdDocumentField(props) {
+    const field = useFieldContext();
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? '',
+        onChange: props.onChange,
+    });
+    const query = useFileQuery(value, {
+        refetchInterval({ state }) {
+            return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
+        },
+    });
+    const mutation = useUploadImageFileMutation({
+        onSuccess(id) {
+            setValue(id);
+        },
+        onMutate() {
+            setValue('');
+        },
+        onError(error) {
+            toaster.error({
+                title: 'Upload Failed',
+                description: error.message,
+            });
+        },
+        onSettled() {
+            if (inputRef.current) {
+                inputRef.current.value = '';
+            }
+        },
+    });
+    const inputRef = useRef(null);
+    const maskRef = useRef(null);
+    const guideRef = useRef(null);
+    const desktop = useMediaQuery('(min-width: 1024px)');
+    const camera = useCamera({
+        video: {
+            facingMode: desktop ? 'user' : 'environment',
+        },
+    });
+    const disclosure = useDisclosure({
+        onOpenChange(open) {
+            if (open) {
+                camera.open();
+            }
+        },
+    });
+    return {
+        field,
+        value,
+        setValue,
+        query,
+        mutation,
+        camera,
+        disclosure,
+        inputRef,
+        guideRef,
+        maskRef,
+    };
+}
+const [IdDocumentFieldProvider, useIdDocumentFieldContext] = createContext();

package/dist/components/shared/SelfieField.js

@@ -2,13 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useFieldContext } from '@ark-ui/react';
 import Image from 'next/image';
-import { useRef } from 'react';
+import { useId, useLayoutEffect, useRef, useState, } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useCamera } from '../../client/hooks/useCamera.js';
 import { useControllableState } from '../../client/hooks/useControllableState.js';
 import { useDisclosure } from '../../client/hooks/useDisclosure.js';
 import { useFileQuery } from '../../client/hooks/useFileQuery.js';
 import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
+import { createContext } from '../../client/utils/createContext.js';
 import { toaster } from '../../client/utils/toaster.js';
 import { Camera01Icon } from '../../icons/Camera01Icon.js';
 import { CameraOffIcon } from '../../icons/CameraOffIcon.js';
@@ -23,47 +24,9 @@ import { Portal } from '../../ui/Portal/index.js';
 import { dataAttr } from '../../utils/dataAttr.js';
 import { validateFile } from '../../utils/validateFile.js';
 export function SelfieField(props) {
-    const field = useFieldContext();
-    const [value, setValue] = useControllableState({
-        value: props.value,
-        defaultValue: props.defaultValue ?? '',
-        onChange: props.onChange,
-    });
-    const query = useFileQuery(value, {
-        refetchInterval({ state }) {
-            return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
-        },
-    });
-    const mutation = useUploadImageFileMutation({
-        onSuccess(id) {
-            setValue(id);
-        },
-        onMutate() {
-            setValue('');
-        },
-        onError(error) {
-            toaster.error({
-                title: 'Upload Failed',
-                description: error.message,
-            });
-        },
-        onSettled() {
-            if (inputRef.current) {
-                inputRef.current.value = '';
-            }
-        },
-    });
-    const inputRef = useRef(null);
-    const guideRef = useRef(null);
-    const camera = useCamera();
-    const disclosure = useDisclosure({
-        onOpenChange(open) {
-            if (open) {
-                camera.open();
-            }
-        },
-    });
-    return (_jsxs(_Fragment, { 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) => {
+    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) => {
                     e.preventDefault();
                     const file = e.dataTransfer.files?.[0];
                     if (!file)
@@ -103,7 +66,7 @@ export function SelfieField(props) {
                     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("div", { ref: guideRef, className: "border-utility-warning-700 absolute left-1/2 top-1/2 aspect-square w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-dashed lg:w-[29.688rem]" })] }), 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: () => {
+                                                    : '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();
@@ -126,3 +89,102 @@ export function SelfieField(props) {
                                                     camera.reset();
                                                 }, children: [_jsx(RefreshCcw01Icon, { className: "size-5" }), " Retake"] })] }))] }) })] }) })] }));
 }
+/**
+ * -------------------------------------
+ *  Mask
+ * -------------------------------------
+ */
+function Mask() {
+    const id = useId();
+    const { guideRef, maskRef } = useSelfieFieldContext();
+    const [maskBox, setMaskBox] = useState({
+        cx: 0,
+        cy: 0,
+        r: 0,
+    });
+    useLayoutEffect(() => {
+        const update = () => {
+            const guide = guideRef.current;
+            const mask = 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,
+            });
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        if (guideRef.current)
+            observer.observe(guideRef.current);
+        if (maskRef.current)
+            observer.observe(maskRef.current);
+        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: {
+                    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]" })] }));
+}
+function useSelfieField(props) {
+    const field = useFieldContext();
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue ?? '',
+        onChange: props.onChange,
+    });
+    const query = useFileQuery(value, {
+        refetchInterval({ state }) {
+            return !state.data || state.data.status === 'UPLOADING' ? 1000 : false;
+        },
+    });
+    const mutation = useUploadImageFileMutation({
+        onSuccess(id) {
+            setValue(id);
+        },
+        onMutate() {
+            setValue('');
+        },
+        onError(error) {
+            toaster.error({
+                title: 'Upload Failed',
+                description: error.message,
+            });
+        },
+        onSettled() {
+            if (inputRef.current) {
+                inputRef.current.value = '';
+            }
+        },
+    });
+    const inputRef = useRef(null);
+    const maskRef = useRef(null);
+    const guideRef = useRef(null);
+    const camera = useCamera();
+    const disclosure = useDisclosure({
+        onOpenChange(open) {
+            if (open) {
+                camera.open();
+            }
+        },
+    });
+    return {
+        field,
+        value,
+        setValue,
+        query,
+        mutation,
+        camera,
+        disclosure,
+        inputRef,
+        guideRef,
+        maskRef,
+    };
+}
+const [SelfieFieldProvider, useSelfieFieldContext] = createContext();

package/dist/utils/validateFile.js

@@ -1,11 +1,14 @@
 export function validateFile(file, options) {
     const maxFileSize = options?.maxFileSize ?? 10;
     const maxFileName = options?.maxFileName ?? 48;
-    const supportedFiles = options?.supportedFiles ?? [
-        'image/png',
-        'image/jpg',
-        'image/jpeg',
-    ];
+    const supportedFiles = options?.supportedFiles?.length
+        ? options.supportedFiles
+        : [
+            /**/
+            'image/png',
+            'image/jpg',
+            'image/jpeg',
+        ];
     if (!supportedFiles.includes(file.type)) {
         return {
             name: 'FILE_TYPE_NOT_SUPPORTED',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opexa/portal-components",
-  "version": "0.0.231",
+  "version": "0.0.232",
   "exports": {
     "./ui/*": {
       "types": "./dist/ui/*/index.d.ts",
@@ -81,6 +81,9 @@
     "@date-fns/tz": "^1.2.0",
     "@next/third-parties": "^15.3.4",
     "@tailwindcss/typography": "^0.5.16",
+    "@tensorflow-models/face-detection": "^1.0.3",
+    "@tensorflow/tfjs": "^4.22.0",
+    "@tensorflow/tfjs-backend-webgl": "^4.22.0",
     "date-fns": "^4.1.0",
     "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",