@opexa/portal-components 0.0.139 → 0.0.141

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 (14) hide show
  1. package/dist/components/AccountInfo/AccountInfo.js +1 -1
  2. package/dist/components/KYC/FileUpload.d.ts +10 -0
  3. package/dist/components/KYC/FileUpload.js +43 -0
  4. package/dist/components/KYC/IdentityVerification.js +89 -19
  5. package/dist/components/KYC/KYC.lazy.js +23 -0
  6. package/dist/components/KYC/useKYC.d.ts +1 -1
  7. package/dist/components/KYC/utils.d.ts +4 -0
  8. package/dist/components/KYC/utils.js +24 -0
  9. package/dist/components/SignUp/SignUpForm.js +28 -12
  10. package/dist/styles/theme.css +1 -1
  11. package/dist/ui/Tooltip/Tooltip.d.ts +30 -30
  12. package/dist/ui/Tooltip/tooltip.recipe.d.ts +5 -5
  13. package/dist/ui/Tooltip/tooltip.recipe.js +7 -1
  14. package/package.json +1 -1
package/dist/components/AccountInfo/AccountInfo.js CHANGED
@@ -87,7 +87,7 @@ function PersonalInfo() {
87
87
  ? data.birthDay
88
88
  : undefined,
89
89
  });
90
- }), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, children: [_jsx(Field.Label, { children: "Real name" }), _jsx(Field.Input, { ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
90
+ }), children: [_jsxs("div", { className: "px-4 py-5 lg:px-3xl lg:py-5", children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.realName, readOnly: !!account?.realName, children: [_jsx(Field.Label, { children: "Real name" }), _jsx(Field.Input, { ...form.register('realName') }), _jsx(Field.ErrorText, { children: form.formState.errors.realName?.message })] }), _jsxs(Field.Root, { className: "mt-6", invalid: !!form.formState.errors.birthDay, readOnly: !!account?.birthDay, children: [_jsx(Field.Label, { children: "Date of birth" }), _jsx(Field.Input, { type: "date", ...form.register('birthDay') }), _jsx(Field.ErrorText, { children: form.formState.errors.birthDay?.message })] })] }), form.formState.isDirty && (_jsxs("div", { className: "border-border-secondary flex justify-end gap-lg border-t px-xl py-lg lg:px-3xl lg:py-xl", children: [_jsx(Button, { size: "sm", variant: "outline", fullWidth: false, disabled: updateAccountMutation.isPending, onClick: () => form.reset(), children: "Cancel" }), _jsx(Button, { type: "submit", size: "sm", fullWidth: false, disabled: !form.formState.isValid || updateAccountMutation.isPending, children: "Save Changes" })] }))] })] }));
91
91
  }
92
92
  function ContactInfo() {
93
93
  const localeInfo = useLocaleInfo();
package/dist/components/KYC/FileUpload.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import type { CaptureSubject } from './useKYC';
2
+ interface FileUploadProps {
3
+ name: string;
4
+ value: string;
5
+ hasDescription?: boolean;
6
+ onChange?: (id: string) => void;
7
+ captureObject: CaptureSubject;
8
+ }
9
+ declare function FileUpload({ value, name, hasDescription, onChange, captureObject, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
10
+ export default FileUpload;
package/dist/components/KYC/FileUpload.js ADDED
@@ -0,0 +1,43 @@
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
+ import Image from 'next/image';
4
+ import { twMerge } from 'tailwind-merge';
5
+ import { useFileQuery } from '../../client/hooks/useFileQuery.js';
6
+ import { useUploadImageFileMutation } from '../../client/hooks/useUploadImageFileMutation.js';
7
+ import { UploadCloud02Icon } from '../../icons/UploadCloud02Icon.js';
8
+ import { Button } from '../../ui/Button/index.js';
9
+ import { useKYCContext } from './KYCContext.js';
10
+ import { validateFile } from './utils.js';
11
+ function FileUpload({ value, name, hasDescription, onChange, captureObject, }) {
12
+ const kyc = useKYCContext();
13
+ const { mutate, isPending } = useUploadImageFileMutation();
14
+ const { data: uploadedImage, isSuccess: uploadedImageReady } = useFileQuery(value);
15
+ if (isPending) {
16
+ return (_jsx("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: _jsx("div", { className: "flex items-center justify-center", children: _jsx("span", { className: "text-text-secondary-700", children: "Uploading..." }) }) }));
17
+ }
18
+ function handleFileChange(event) {
19
+ const file = event.target.files?.[0];
20
+ if (!file) {
21
+ console.error('No file selected');
22
+ return;
23
+ }
24
+ const error = validateFile(file);
25
+ if (error) {
26
+ console.error(error);
27
+ return;
28
+ }
29
+ mutate({ file }, {
30
+ onSuccess: (id) => {
31
+ onChange?.(id);
32
+ },
33
+ });
34
+ }
35
+ function handleUploadClick() {
36
+ const fileInput = document.getElementById(`file-upload-${name}`);
37
+ if (fileInput) {
38
+ fileInput.click();
39
+ }
40
+ }
41
+ return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [uploadedImageReady ? (_jsxs("div", { className: "border-border-primary bg-bg-primary min-h-[9.25rem]", children: [_jsx(Image, { src: uploadedImage?.url ?? '', alt: "Uploaded", className: "w-full object-contain", width: 350, height: 350, draggable: false }), _jsx(Button, { size: "xs", variant: "outline", className: twMerge('mx-auto mt-4 w-fit', value && 'hidden'), type: "button", onClick: handleUploadClick, children: "Reupload" })] })) : hasDescription ? (_jsxs(_Fragment, { 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-quinary size-4" }) }), _jsxs("p", { className: "text-text-tertiary-600 text-center text-sm", children: [_jsx("span", { className: "text-button-secondary-fg cursor-pointer font-semibold", onClick: handleUploadClick, children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] })] })) : null, _jsx("input", { type: "file", id: `file-upload-${name}`, name: name, onChange: handleFileChange, accept: "image/png, image/jpg, image/jpeg", className: "hidden" }), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => kyc.setCapturing(captureObject), disabled: isPending, type: "button", children: value ? 'Retake Photo' : 'Take a Photo' })] }));
42
+ }
43
+ export default FileUpload;
package/dist/components/KYC/IdentityVerification.js CHANGED
@@ -1,37 +1,107 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
1
+ 'use client';
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { zodResolver } from '@hookform/resolvers/zod';
4
+ import { useEffect } from 'react';
5
+ import { useForm } from 'react-hook-form';
6
+ import { z } from 'zod';
2
7
  import { useShallow } from 'zustand/shallow';
8
+ import { useCreateMemberVerificationMutation } from '../../client/hooks/useCreateMemberVerificationMutation.js';
3
9
  import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
10
+ import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
11
+ import { useUpdateMemberVerificationMutation } from '../../client/hooks/useUpdateMemberVerificationMutation.js';
12
+ import { toaster } from '../../client/utils/toaster.js';
4
13
  import { HelpCircleIcon } from '../../icons/HelpCircleIcon.js';
5
- import { UploadCloud02Icon } from '../../icons/UploadCloud02Icon.js';
6
14
  import { Button } from '../../ui/Button/index.js';
7
15
  import { Dialog } from '../../ui/Dialog/index.js';
8
16
  import { Field } from '../../ui/Field/index.js';
9
17
  import { Portal } from '../../ui/Portal/index.js';
10
- import DisplayImage from './DisplayImage.js';
18
+ import FileUpload from './FileUpload.js';
11
19
  import { useKYCContext } from './KYCContext.js';
20
+ const formSchema = z.object({
21
+ selfieImage: z.string().min(1, 'Selfie image is required.'),
22
+ idFrontImage: z.string().min(1, 'Front image of ID is required.'),
23
+ });
12
24
  export function IdentityVerification() {
13
25
  const kyc = useKYCContext();
26
+ const { mutate: createMemberVerification, isPending: createPending } = useCreateMemberVerificationMutation({
27
+ onSuccess: () => {
28
+ toaster.success({
29
+ title: 'ID Front Image & Selfie Image uploaded successfully',
30
+ });
31
+ kyc.setStep(3);
32
+ },
33
+ onError: (error) => {
34
+ toaster.error({
35
+ title: 'Failed to upload ID Front Image & Selfie Image',
36
+ description: error.message,
37
+ });
38
+ },
39
+ });
40
+ const { mutate: updateMemberVerification, isPending: updatePending } = useUpdateMemberVerificationMutation({
41
+ onSuccess: () => {
42
+ toaster.success({
43
+ title: 'ID Front Image & Selfie Image updated successfully',
44
+ });
45
+ kyc.setStep(3);
46
+ },
47
+ onError: (error) => {
48
+ toaster.error({
49
+ title: 'Failed to upload ID Front Image & Selfie Image',
50
+ description: error.message,
51
+ });
52
+ },
53
+ });
54
+ const memberVerification = useMemberVerificationQuery();
55
+ const memberId = memberVerification.data?.id;
14
56
  const globalStore = useGlobalStore(useShallow((ctx) => ({
15
57
  kyc: ctx.kyc,
16
58
  })));
17
- return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center text-lg font-semibold", children: "Verify your identity" }), _jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Verify your details to confirm your identity and secure your access." }), _jsxs("div", { className: "border-border-primary bg-bg-primary text-text-placeholder mt-7 rounded-xl border p-lg text-xs leading-tight", children: [_jsx("h3", { className: "font-semibold", children: "Instructions" }), _jsxs("ol", { className: "mt-2 list-inside list-decimal", children: [_jsx("li", { children: "Upload a full photo of your ID." }), _jsx("li", { children: "Please ensure that all details in the uploaded image are legible." }), _jsx("li", { children: "Please ensure that the ID uploaded is within the validity period." })] })] }), _jsxs("form", { className: "mt-xl", onSubmit: (e) => {
18
- e.preventDefault();
19
- kyc.setStep(3);
20
- }, children: [_jsxs(Field.Root, { children: [_jsxs(Field.Label, { className: "flex items-center gap-1.5", children: [_jsx("span", { children: "Front of your ID" }), _jsx(HelpCircleIcon, { className: "text-text-quinary size-4" })] }), _jsx(UploadIdDocument, {})] }), _jsxs(Field.Root, { className: "mt-3", children: [_jsxs(Field.Label, { className: "flex items-center gap-1.5", children: [_jsx("span", { children: "Selfie holding your ID" }), _jsx(HelpCircleIcon, { className: "text-text-quinary size-4" })] }), _jsx(UploadSelfie, {})] }), _jsx(Button, { type: "submit", className: "mt-6", children: "Continue" }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "mt-lg", onClick: () => {
59
+ const form = useForm({
60
+ resolver: zodResolver(formSchema),
61
+ defaultValues: {
62
+ idFrontImage: '',
63
+ selfieImage: '',
64
+ },
65
+ });
66
+ function onSubmit(values) {
67
+ if (!memberId) {
68
+ createMemberVerification({
69
+ selfieImage: values.selfieImage,
70
+ idFrontImage: values.idFrontImage,
71
+ address: '',
72
+ nationality: '',
73
+ natureOfWork: '',
74
+ permanentAddress: '',
75
+ placeOfBirth: '',
76
+ sourceOfIncome: '',
77
+ });
78
+ }
79
+ else {
80
+ updateMemberVerification({
81
+ id: memberId,
82
+ data: {
83
+ selfieImage: values.selfieImage,
84
+ idFrontImage: values.idFrontImage,
85
+ },
86
+ });
87
+ }
88
+ }
89
+ useEffect(() => {
90
+ if (kyc.idFrontImageId) {
91
+ form.setValue('idFrontImage', kyc.idFrontImageId);
92
+ }
93
+ if (kyc.selfieImageId) {
94
+ form.setValue('selfieImage', kyc.selfieImageId);
95
+ }
96
+ }, [form, kyc]);
97
+ return (_jsxs("div", { children: [_jsx(Dialog.Title, { className: "text-center text-lg font-semibold", children: "Verify your identity" }), _jsx(Dialog.Description, { className: "text-text-secondary-700 mt-xs text-center text-sm", children: "Verify your details to confirm your identity and secure your access." }), _jsxs("div", { className: "border-border-primary bg-bg-primary text-text-placeholder mt-7 rounded-xl border p-lg text-xs leading-tight", children: [_jsx("h3", { className: "font-semibold", children: "Instructions" }), _jsxs("ol", { className: "mt-2 list-inside list-decimal", children: [_jsx("li", { children: "Upload a full photo of your ID." }), _jsx("li", { children: "Please ensure that all details in the uploaded image are legible." }), _jsx("li", { children: "Please ensure that the ID uploaded is within the validity period." })] })] }), _jsxs("form", { className: "mt-xl", onSubmit: form.handleSubmit(onSubmit), children: [_jsxs(Field.Root, { invalid: !!form.formState.errors.idFrontImage, children: [_jsxs(Field.Label, { className: "flex items-center gap-1.5", children: [_jsx("span", { children: "Front of your ID" }), _jsx(HelpCircleIcon, { className: "text-text-quinary size-4" })] }), _jsx(FileUpload, { value: kyc.idFrontImageId || '', hasDescription: true, name: "idFrontImage", captureObject: "ID_DOCUMENT", onChange: (file) => {
98
+ form.setValue('idFrontImage', file);
99
+ kyc.setFrontImageId(file);
100
+ } }, "id-front-image-upload"), _jsx(Field.ErrorText, { children: form.formState.errors.idFrontImage?.message })] }), _jsxs(Field.Root, { className: "mt-3", invalid: !!form.formState.errors.selfieImage, children: [_jsxs(Field.Label, { className: "flex items-center gap-1.5", children: [_jsx("span", { children: "Selfie holding your ID" }), _jsx(HelpCircleIcon, { className: "text-text-quinary size-4" })] }), _jsx(FileUpload, { value: kyc.selfieImageId || '', name: "selfieImage", captureObject: "SELFIE", onChange: (file) => {
101
+ form.setValue('selfieImage', file);
102
+ } }, "selfie-image-upload"), _jsx(Field.ErrorText, { children: form.formState.errors.selfieImage?.message })] }), _jsx(Button, { type: "submit", className: "mt-6", disabled: createPending || updatePending, children: "Continue" }), _jsx(Button, { variant: "outline", colorScheme: "gray", className: "mt-lg", type: "button", onClick: () => {
21
103
  kyc.setStep(3);
22
104
  kyc.setDone(true);
23
105
  globalStore.kyc.setOpen(false);
24
106
  }, children: "Skip for now" })] }), _jsx(Dialog.Root, { lazyMount: true, unmountOnExit: true, children: _jsxs(Portal, { children: [_jsx(Dialog.Backdrop, {}), _jsx(Dialog.Positioner, { children: _jsx(Dialog.Content, { className: "bg-bg-primary-alt mx-auto min-h-full w-full p-3xl lg:h-auto lg:w-[400px]" }) })] }) })] }));
25
107
  }
26
- function UploadIdDocument() {
27
- const kyc = useKYCContext();
28
- return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [kyc.idFrontImageId ? (_jsx(DisplayImage, { id: kyc.idFrontImageId })) : (_jsxs(_Fragment, { 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-quinary size-4" }) }), _jsxs("p", { className: "text-text-tertiary-600 text-center text-sm", children: [_jsx("span", { className: "text-button-secondary-fg font-semibold", children: "Click to upload" }), ' ', "or drag and drop", _jsx("br", {}), "PNG, JPG or JPEG (max. 10mb)", _jsx("br", {}), "or"] })] })), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => {
29
- kyc.setCapturing('ID_DOCUMENT');
30
- }, children: kyc.idFrontImageId ? 'Rekate Photo' : 'Take a Photo' })] }));
31
- }
32
- function UploadSelfie() {
33
- const kyc = useKYCContext();
34
- return (_jsxs("div", { className: "border-border-primary bg-bg-primary flex min-h-[11.25rem] flex-col justify-center gap-lg rounded-xl border px-3xl py-xl", children: [kyc.selfieImageId ? (_jsx(DisplayImage, { id: kyc.selfieImageId })) : (_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-quinary size-4" }) })), _jsx(Button, { size: "xs", variant: "outline", className: "mx-auto w-fit", onClick: () => {
35
- kyc.setCapturing('SELFIE');
36
- }, children: "Take a photo" })] }));
37
- }
package/dist/components/KYC/KYC.lazy.js CHANGED
@@ -1,7 +1,11 @@
1
+ 'use client';
1
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import Image from 'next/image';
4
+ import { useEffect } from 'react';
3
5
  import { useShallow } from 'zustand/shallow';
6
+ import { useAccountQuery } from '../../client/hooks/useAccountQuery.js';
4
7
  import { useGlobalStore } from '../../client/hooks/useGlobalStore.js';
8
+ import { useMemberVerificationQuery } from '../../client/hooks/useMemberVerificationQuery.js';
5
9
  import { XIcon } from '../../icons/XIcon.js';
6
10
  import { Dialog } from '../../ui/Dialog/index.js';
7
11
  import { Portal } from '../../ui/Portal/index.js';
@@ -15,6 +19,25 @@ import { PersonalInformation } from './PersonalInformation.js';
15
19
  import { useKYC } from './useKYC.js';
16
20
  export function KYC(props) {
17
21
  const kyc = useKYC();
22
+ const accountQuery = useAccountQuery();
23
+ const memberVerification = useMemberVerificationQuery();
24
+ const isBasicInfoVerified = Boolean(accountQuery.data?.realName) &&
25
+ Boolean(accountQuery.data?.birthDay);
26
+ const isMemberUploaded = Boolean(memberVerification.data?.idFrontImage) &&
27
+ Boolean(memberVerification.data?.selfieImage);
28
+ const memberStatus = memberVerification.data?.status;
29
+ //check steps
30
+ useEffect(() => {
31
+ if (!isBasicInfoVerified) {
32
+ kyc.setStep(1);
33
+ }
34
+ else if (memberStatus === 'REJECTED') {
35
+ kyc.setStep(2);
36
+ }
37
+ else if (isBasicInfoVerified) {
38
+ kyc.setStep(isMemberUploaded ? 3 : 2);
39
+ }
40
+ }, [isBasicInfoVerified, isMemberUploaded, memberStatus, kyc]);
18
41
  const globalStore = useGlobalStore(useShallow((ctx) => ({
19
42
  kyc: ctx.kyc,
20
43
  })));
package/dist/components/KYC/useKYC.d.ts CHANGED
@@ -7,7 +7,7 @@ type EventDetail = {
7
7
  };
8
8
  type UnsubscribeFn = () => void;
9
9
  type Subscriber = (detail: EventDetail) => UnsubscribeFn;
10
- type CaptureSubject = 'SELFIE' | 'ID_DOCUMENT';
10
+ export type CaptureSubject = 'SELFIE' | 'ID_DOCUMENT';
11
11
  export interface UseKYCReturn {
12
12
  step: number;
13
13
  setStep: (step: number) => void;
package/dist/components/KYC/utils.d.ts CHANGED
@@ -1,2 +1,6 @@
1
1
  export declare function dataURLtoBlob(dataURL: string): Blob;
2
2
  export declare const resizeFile: (file: File) => Promise<unknown>;
3
+ export declare const MAX_FILE_SIZE = 10;
4
+ export declare const MAX_NAME_LENGTH = 52;
5
+ export declare const SUPPORTED_FILES: string[];
6
+ export declare function validateFile(file: File): "File too large" | "File name too long" | "Unsupported file" | undefined;
package/dist/components/KYC/utils.js CHANGED
@@ -15,3 +15,27 @@ export const resizeFile = (file) => new Promise((resolve) => {
15
15
  resolve(uri);
16
16
  }, 'file');
17
17
  });
18
+ export const MAX_FILE_SIZE = 10; /* in MB */
19
+ export const MAX_NAME_LENGTH = 52;
20
+ export const SUPPORTED_FILES = [
21
+ /* add more supported ext */
22
+ 'image/png',
23
+ 'image/jpg',
24
+ 'image/jpeg',
25
+ ];
26
+ function removeFilenameExt(subject) {
27
+ const l = subject.split('.');
28
+ l.pop();
29
+ return l.join('.');
30
+ }
31
+ export function validateFile(file) {
32
+ const fileType = file.type;
33
+ const fileSize = file.size / (1024 * 1024);
34
+ const nameLength = removeFilenameExt(file.name).length;
35
+ if (fileSize > MAX_FILE_SIZE)
36
+ return 'File too large';
37
+ if (nameLength > MAX_NAME_LENGTH)
38
+ return 'File name too long';
39
+ if (!SUPPORTED_FILES.includes(fileType))
40
+ return 'Unsupported file';
41
+ }
package/dist/components/SignUp/SignUpForm.js CHANGED
@@ -5,7 +5,6 @@ import { useDialogContext } from '@ark-ui/react/dialog';
5
5
  import { zodResolver } from '@hookform/resolvers/zod';
6
6
  import { ObjectId } from '@opexa/object-id';
7
7
  import { differenceInYears, format } from 'date-fns';
8
- import { noop } from 'lodash-es';
9
8
  import Link from 'next/link';
10
9
  import { useSearchParams } from 'next/navigation';
11
10
  import { useRef, useState } from 'react';
@@ -29,6 +28,7 @@ import { CheckIcon } from '../../icons/CheckIcon.js';
29
28
  import { ChevronDownIcon } from '../../icons/ChevronDownIcon.js';
30
29
  import { ChevronLeftIcon } from '../../icons/ChevronLeftIcon.js';
31
30
  import { ChevronRightIcon } from '../../icons/ChevronRightIcon.js';
31
+ import { HelpCircleIcon } from '../../icons/HelpCircleIcon.js';
32
32
  import { ObjectType } from '../../services/ObjectType.js';
33
33
  import { Button } from '../../ui/Button/index.js';
34
34
  import { Checkbox } from '../../ui/Checkbox/index.js';
@@ -36,6 +36,7 @@ import { DatePicker } from '../../ui/DatePicker/index.js';
36
36
  import { Field } from '../../ui/Field/index.js';
37
37
  import { PinInput } from '../../ui/PinInput/index.js';
38
38
  import { Select } from '../../ui/Select/index.js';
39
+ import { Tooltip } from '../../ui/Tooltip/index.js';
39
40
  import { createPoll } from '../../utils/createPoll.js';
40
41
  import { useSignUpPropsContext } from './SignUpContext.js';
41
42
  const branchCollection = createListCollection({
@@ -167,7 +168,12 @@ export function SignUpForm() {
167
168
  }, collection: branchCollection, positioning: {
168
169
  sameWidth: true,
169
170
  placement: 'bottom',
170
- }, lazyMount: true, unmountOnExit: true, children: [_jsx(Select.Label, { children: "Branch" }), _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: branchCollection.items.map((item) => (_jsx(Select.Item, { item: item, children: branchCollection.stringifyItem(item) }, item.code))) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.branchCode?.message })] }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { className: "mt-2xl", invalid: o.fieldState.invalid, children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
171
+ }, lazyMount: true, unmountOnExit: true, children: [_jsxs(Select.Label, { className: "flex items-center gap-1", children: ["Branch", _jsxs(Tooltip.Root, { openDelay: 0, closeDelay: 100, lazyMount: true, unmountOnExit: true, positioning: {
172
+ placement: 'top',
173
+ }, children: [_jsx(Tooltip.Trigger, { children: _jsx(HelpCircleIcon, { className: "text-text-nav-item-button-icon size-4" }) }), _jsx(Tooltip.Positioner, { children: _jsxs(Tooltip.Content, { children: [_jsx(Tooltip.Arrow, { children: _jsx(Tooltip.ArrowTip, {}) }), "Choose branch closest to your residence."] }) })] })] }), _jsxs(Select.Trigger, { children: [_jsx(Select.ValueText, {}), _jsx(Select.Indicator, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }), _jsx(Select.Positioner, { children: _jsx(Select.Content, { children: branchCollection.items.map((item) => {
174
+ const label = branchCollection.stringifyItem(item) ?? '';
175
+ return (_jsx(Select.Item, { item: item, children: _jsx("div", { title: label, className: "line-clamp-1", children: label }) }, item.code));
176
+ }) }) })] }), _jsx(Field.ErrorText, { children: step1Form.formState.errors.branchCode?.message })] }), _jsx(Controller, { control: step1Form.control, name: "termsAccepted", render: (o) => (_jsxs(Field.Root, { className: "mt-2xl", invalid: o.fieldState.invalid, children: [_jsxs(Checkbox.Root, { checked: o.field.value, onCheckedChange: (details) => {
171
177
  o.field.onChange(details.checked);
172
178
  }, children: [_jsx(Checkbox.Control, { children: _jsx(Checkbox.Indicator, { asChild: true, children: _jsx(CheckIcon, {}) }) }), _jsxs(Checkbox.Label, { children: ["I am at least 21 years of age and I accept the", ' ', _jsx(Link, { href: signUpProps.termsAndConditionsUrl ??
173
179
  '/terms-and-conditions', onClick: () => {
@@ -189,7 +195,7 @@ export function SignUpForm() {
189
195
  });
190
196
  const name = mobileNumberParser.format(mobileNumber);
191
197
  const password = `${name}${id}`;
192
- const poll = createPoll(async () => {
198
+ const pollLogin = createPoll(async () => {
193
199
  try {
194
200
  await signInMutation.mutateAsync({
195
201
  type: 'NAME_AND_PASSWORD',
@@ -203,20 +209,30 @@ export function SignUpForm() {
203
209
  }
204
210
  }, {
205
211
  until: (ok) => ok,
206
- maxAttempt: 5,
212
+ maxAttempt: 3,
207
213
  });
208
- const ok = await poll();
214
+ const ok = await pollLogin();
209
215
  if (!ok) {
210
216
  signInStore.setOpen(true);
211
217
  }
212
218
  else {
213
- await updateAccountMutation
214
- .mutateAsync({
215
- branchCode: step1Form.getValues('branchCode'),
216
- realName: step1Form.getValues('realName'),
217
- birthDay: format(step1Form.getValues('birthDay'), 'yyyy-MM-dd'),
218
- })
219
- .catch(noop);
219
+ const pollUpdateAccount = createPoll(async () => {
220
+ try {
221
+ await updateAccountMutation.mutateAsync({
222
+ branchCode: step1Form.getValues('branchCode'),
223
+ realName: step1Form.getValues('realName'),
224
+ birthDay: format(step1Form.getValues('birthDay'), 'yyyy-MM-dd'),
225
+ });
226
+ return true;
227
+ }
228
+ catch {
229
+ return false;
230
+ }
231
+ }, {
232
+ until: (ok) => ok,
233
+ maxAttempt: 3,
234
+ });
235
+ await pollUpdateAccount();
220
236
  }
221
237
  dialog.setOpen(false);
222
238
  step1Form.reset();
package/dist/styles/theme.css CHANGED
@@ -657,7 +657,7 @@
657
657
  }
658
658
 
659
659
  @utility arrow-bg-* {
660
- --arrow-bg: --value(--color-\*, [color]);
660
+ --arrow-background: --value(--color-\*, [color]);
661
661
  }
662
662
 
663
663
  @utility arrow-size-* {
package/dist/ui/Tooltip/Tooltip.d.ts CHANGED
@@ -4,9 +4,9 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
4
4
  [key: string]: import("tailwind-variants").ClassValue | {
5
5
  content?: import("tailwind-variants").ClassValue;
6
6
  trigger?: import("tailwind-variants").ClassValue;
7
- positioner?: import("tailwind-variants").ClassValue;
8
7
  arrow?: import("tailwind-variants").ClassValue;
9
8
  arrowTip?: import("tailwind-variants").ClassValue;
9
+ positioner?: import("tailwind-variants").ClassValue;
10
10
  };
11
11
  };
12
12
  } | {
@@ -14,30 +14,30 @@ export declare const Root: import("react").ComponentType<import("@ark-ui/react")
14
14
  [x: string]: import("tailwind-variants").ClassValue | {
15
15
  content?: import("tailwind-variants").ClassValue;
16
16
  trigger?: import("tailwind-variants").ClassValue;
17
- positioner?: import("tailwind-variants").ClassValue;
18
17
  arrow?: import("tailwind-variants").ClassValue;
19
18
  arrowTip?: import("tailwind-variants").ClassValue;
19
+ positioner?: import("tailwind-variants").ClassValue;
20
20
  };
21
21
  };
22
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, {
22
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, {
23
23
  [key: string]: {
24
24
  [key: string]: import("tailwind-variants").ClassValue | {
25
25
  content?: import("tailwind-variants").ClassValue;
26
26
  trigger?: import("tailwind-variants").ClassValue;
27
- positioner?: import("tailwind-variants").ClassValue;
28
27
  arrow?: import("tailwind-variants").ClassValue;
29
28
  arrowTip?: import("tailwind-variants").ClassValue;
29
+ positioner?: import("tailwind-variants").ClassValue;
30
30
  };
31
31
  };
32
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
32
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
33
33
  export declare const Arrow: import("react").ComponentType<import("@ark-ui/react").Assign<Tooltip.ArrowProps & import("react").RefAttributes<HTMLDivElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
34
34
  [key: string]: {
35
35
  [key: string]: import("tailwind-variants").ClassValue | {
36
36
  content?: import("tailwind-variants").ClassValue;
37
37
  trigger?: import("tailwind-variants").ClassValue;
38
- positioner?: import("tailwind-variants").ClassValue;
39
38
  arrow?: import("tailwind-variants").ClassValue;
40
39
  arrowTip?: import("tailwind-variants").ClassValue;
40
+ positioner?: import("tailwind-variants").ClassValue;
41
41
  };
42
42
  };
43
43
  } | {
@@ -45,30 +45,30 @@ export declare const Arrow: import("react").ComponentType<import("@ark-ui/react"
45
45
  [x: string]: import("tailwind-variants").ClassValue | {
46
46
  content?: import("tailwind-variants").ClassValue;
47
47
  trigger?: import("tailwind-variants").ClassValue;
48
- positioner?: import("tailwind-variants").ClassValue;
49
48
  arrow?: import("tailwind-variants").ClassValue;
50
49
  arrowTip?: import("tailwind-variants").ClassValue;
50
+ positioner?: import("tailwind-variants").ClassValue;
51
51
  };
52
52
  };
53
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, {
53
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, {
54
54
  [key: string]: {
55
55
  [key: string]: import("tailwind-variants").ClassValue | {
56
56
  content?: import("tailwind-variants").ClassValue;
57
57
  trigger?: import("tailwind-variants").ClassValue;
58
- positioner?: import("tailwind-variants").ClassValue;
59
58
  arrow?: import("tailwind-variants").ClassValue;
60
59
  arrowTip?: import("tailwind-variants").ClassValue;
60
+ positioner?: import("tailwind-variants").ClassValue;
61
61
  };
62
62
  };
63
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
63
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
64
64
  export declare const ArrowTip: import("react").ComponentType<import("@ark-ui/react").Assign<Tooltip.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
65
65
  [key: string]: {
66
66
  [key: string]: import("tailwind-variants").ClassValue | {
67
67
  content?: import("tailwind-variants").ClassValue;
68
68
  trigger?: import("tailwind-variants").ClassValue;
69
- positioner?: import("tailwind-variants").ClassValue;
70
69
  arrow?: import("tailwind-variants").ClassValue;
71
70
  arrowTip?: import("tailwind-variants").ClassValue;
71
+ positioner?: import("tailwind-variants").ClassValue;
72
72
  };
73
73
  };
74
74
  } | {
@@ -76,30 +76,30 @@ export declare const ArrowTip: import("react").ComponentType<import("@ark-ui/rea
76
76
  [x: string]: import("tailwind-variants").ClassValue | {
77
77
  content?: import("tailwind-variants").ClassValue;
78
78
  trigger?: import("tailwind-variants").ClassValue;
79
- positioner?: import("tailwind-variants").ClassValue;
80
79
  arrow?: import("tailwind-variants").ClassValue;
81
80
  arrowTip?: import("tailwind-variants").ClassValue;
81
+ positioner?: import("tailwind-variants").ClassValue;
82
82
  };
83
83
  };
84
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, {
84
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, {
85
85
  [key: string]: {
86
86
  [key: string]: import("tailwind-variants").ClassValue | {
87
87
  content?: import("tailwind-variants").ClassValue;
88
88
  trigger?: import("tailwind-variants").ClassValue;
89
- positioner?: import("tailwind-variants").ClassValue;
90
89
  arrow?: import("tailwind-variants").ClassValue;
91
90
  arrowTip?: import("tailwind-variants").ClassValue;
91
+ positioner?: import("tailwind-variants").ClassValue;
92
92
  };
93
93
  };
94
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
94
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
95
95
  export declare const Content: import("react").ComponentType<import("@ark-ui/react").Assign<Tooltip.ContentProps & import("react").RefAttributes<HTMLDivElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
96
96
  [key: string]: {
97
97
  [key: string]: import("tailwind-variants").ClassValue | {
98
98
  content?: import("tailwind-variants").ClassValue;
99
99
  trigger?: import("tailwind-variants").ClassValue;
100
- positioner?: import("tailwind-variants").ClassValue;
101
100
  arrow?: import("tailwind-variants").ClassValue;
102
101
  arrowTip?: import("tailwind-variants").ClassValue;
102
+ positioner?: import("tailwind-variants").ClassValue;
103
103
  };
104
104
  };
105
105
  } | {
@@ -107,30 +107,30 @@ export declare const Content: import("react").ComponentType<import("@ark-ui/reac
107
107
  [x: string]: import("tailwind-variants").ClassValue | {
108
108
  content?: import("tailwind-variants").ClassValue;
109
109
  trigger?: import("tailwind-variants").ClassValue;
110
- positioner?: import("tailwind-variants").ClassValue;
111
110
  arrow?: import("tailwind-variants").ClassValue;
112
111
  arrowTip?: import("tailwind-variants").ClassValue;
112
+ positioner?: import("tailwind-variants").ClassValue;
113
113
  };
114
114
  };
115
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, {
115
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, {
116
116
  [key: string]: {
117
117
  [key: string]: import("tailwind-variants").ClassValue | {
118
118
  content?: import("tailwind-variants").ClassValue;
119
119
  trigger?: import("tailwind-variants").ClassValue;
120
- positioner?: import("tailwind-variants").ClassValue;
121
120
  arrow?: import("tailwind-variants").ClassValue;
122
121
  arrowTip?: import("tailwind-variants").ClassValue;
122
+ positioner?: import("tailwind-variants").ClassValue;
123
123
  };
124
124
  };
125
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
125
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
126
126
  export declare const Positioner: import("react").ComponentType<import("@ark-ui/react").Assign<Tooltip.PositionerProps & import("react").RefAttributes<HTMLDivElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
127
127
  [key: string]: {
128
128
  [key: string]: import("tailwind-variants").ClassValue | {
129
129
  content?: import("tailwind-variants").ClassValue;
130
130
  trigger?: import("tailwind-variants").ClassValue;
131
- positioner?: import("tailwind-variants").ClassValue;
132
131
  arrow?: import("tailwind-variants").ClassValue;
133
132
  arrowTip?: import("tailwind-variants").ClassValue;
133
+ positioner?: import("tailwind-variants").ClassValue;
134
134
  };
135
135
  };
136
136
  } | {
@@ -138,30 +138,30 @@ export declare const Positioner: import("react").ComponentType<import("@ark-ui/r
138
138
  [x: string]: import("tailwind-variants").ClassValue | {
139
139
  content?: import("tailwind-variants").ClassValue;
140
140
  trigger?: import("tailwind-variants").ClassValue;
141
- positioner?: import("tailwind-variants").ClassValue;
142
141
  arrow?: import("tailwind-variants").ClassValue;
143
142
  arrowTip?: import("tailwind-variants").ClassValue;
143
+ positioner?: import("tailwind-variants").ClassValue;
144
144
  };
145
145
  };
146
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, {
146
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, {
147
147
  [key: string]: {
148
148
  [key: string]: import("tailwind-variants").ClassValue | {
149
149
  content?: import("tailwind-variants").ClassValue;
150
150
  trigger?: import("tailwind-variants").ClassValue;
151
- positioner?: import("tailwind-variants").ClassValue;
152
151
  arrow?: import("tailwind-variants").ClassValue;
153
152
  arrowTip?: import("tailwind-variants").ClassValue;
153
+ positioner?: import("tailwind-variants").ClassValue;
154
154
  };
155
155
  };
156
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
156
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
157
157
  export declare const Trigger: import("react").ComponentType<import("@ark-ui/react").Assign<Tooltip.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, import("tailwind-variants").VariantProps<import("tailwind-variants").TVReturnType<{
158
158
  [key: string]: {
159
159
  [key: string]: import("tailwind-variants").ClassValue | {
160
160
  content?: import("tailwind-variants").ClassValue;
161
161
  trigger?: import("tailwind-variants").ClassValue;
162
- positioner?: import("tailwind-variants").ClassValue;
163
162
  arrow?: import("tailwind-variants").ClassValue;
164
163
  arrowTip?: import("tailwind-variants").ClassValue;
164
+ positioner?: import("tailwind-variants").ClassValue;
165
165
  };
166
166
  };
167
167
  } | {
@@ -169,20 +169,20 @@ export declare const Trigger: import("react").ComponentType<import("@ark-ui/reac
169
169
  [x: string]: import("tailwind-variants").ClassValue | {
170
170
  content?: import("tailwind-variants").ClassValue;
171
171
  trigger?: import("tailwind-variants").ClassValue;
172
- positioner?: import("tailwind-variants").ClassValue;
173
172
  arrow?: import("tailwind-variants").ClassValue;
174
173
  arrowTip?: import("tailwind-variants").ClassValue;
174
+ positioner?: import("tailwind-variants").ClassValue;
175
175
  };
176
176
  };
177
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, {
177
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, {
178
178
  [key: string]: {
179
179
  [key: string]: import("tailwind-variants").ClassValue | {
180
180
  content?: import("tailwind-variants").ClassValue;
181
181
  trigger?: import("tailwind-variants").ClassValue;
182
- positioner?: import("tailwind-variants").ClassValue;
183
182
  arrow?: import("tailwind-variants").ClassValue;
184
183
  arrowTip?: import("tailwind-variants").ClassValue;
184
+ positioner?: import("tailwind-variants").ClassValue;
185
185
  };
186
186
  };
187
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
187
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, unknown, unknown, undefined>>>>>;
188
188
  export declare const Context: (props: Tooltip.ContextProps) => import("react").ReactNode;
package/dist/ui/Tooltip/tooltip.recipe.d.ts CHANGED
@@ -3,9 +3,9 @@ export declare const tooltipRecipe: import("tailwind-variants").TVReturnType<{
3
3
  [key: string]: import("tailwind-variants").ClassValue | {
4
4
  content?: import("tailwind-variants").ClassValue;
5
5
  trigger?: import("tailwind-variants").ClassValue;
6
- positioner?: import("tailwind-variants").ClassValue;
7
6
  arrow?: import("tailwind-variants").ClassValue;
8
7
  arrowTip?: import("tailwind-variants").ClassValue;
8
+ positioner?: import("tailwind-variants").ClassValue;
9
9
  };
10
10
  };
11
11
  } | {
@@ -13,19 +13,19 @@ export declare const tooltipRecipe: import("tailwind-variants").TVReturnType<{
13
13
  [x: string]: import("tailwind-variants").ClassValue | {
14
14
  content?: import("tailwind-variants").ClassValue;
15
15
  trigger?: import("tailwind-variants").ClassValue;
16
- positioner?: import("tailwind-variants").ClassValue;
17
16
  arrow?: import("tailwind-variants").ClassValue;
18
17
  arrowTip?: import("tailwind-variants").ClassValue;
18
+ positioner?: import("tailwind-variants").ClassValue;
19
19
  };
20
20
  };
21
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, {
21
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, {
22
22
  [key: string]: {
23
23
  [key: string]: import("tailwind-variants").ClassValue | {
24
24
  content?: import("tailwind-variants").ClassValue;
25
25
  trigger?: import("tailwind-variants").ClassValue;
26
- positioner?: import("tailwind-variants").ClassValue;
27
26
  arrow?: import("tailwind-variants").ClassValue;
28
27
  arrowTip?: import("tailwind-variants").ClassValue;
28
+ positioner?: import("tailwind-variants").ClassValue;
29
29
  };
30
30
  };
31
- } | {}, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "positioner" | "arrow" | "arrowTip", string | string[]>, undefined, unknown, unknown, undefined>>;
31
+ } | {}, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, import("tailwind-variants").TVReturnType<unknown, Record<"content" | "trigger" | "arrow" | "arrowTip" | "positioner", string | string[]>, undefined, unknown, unknown, undefined>>;
package/dist/ui/Tooltip/tooltip.recipe.js CHANGED
@@ -2,5 +2,11 @@ import { tooltipAnatomy } from '@ark-ui/react/tooltip';
2
2
  import { tv } from 'tailwind-variants';
3
3
  import { anatomyToRecipeSlots } from '../../utils/anatomyToRecipeSlots.js';
4
4
  export const tooltipRecipe = tv({
5
- slots: anatomyToRecipeSlots(tooltipAnatomy),
5
+ slots: anatomyToRecipeSlots(tooltipAnatomy, {
6
+ content: [
7
+ 'ui-placement-top:ui-open:animate-popover-in-top ui-placement-top-end:ui-open:animate-popover-in-top ui-placement-top-start:ui-open:animate-popover-in-top ui-placement-top:ui-closed:animate-popover-out-top ui-placement-top-end:ui-closed:animate-popover-out-top ui-placement-top-start:ui-closed:animate-popover-out-top ui-placement-bottom:ui-open:animate-popover-in-bottom ui-placement-bottom-start:ui-open:animate-popover-in-bottom ui-placement-bottom-end:ui-open:animate-popover-in-bottom ui-placement-bottom:ui-closed:animate-popover-out-bottom ui-placement-bottom-start:ui-closed:animate-popover-out-bottom ui-placement-bottom-end:ui-closed:animate-popover-out-bottom ui-placement-left:ui-open:animate-popover-in-left ui-placement-left-start:ui-open:animate-popover-in-left ui-placement-left-end:ui-open:animate-popover-in-left ui-placement-left:ui-closed:animate-popover-out-left ui-placement-left-start:ui-closed:animate-popover-out-left ui-placement-left-end:ui-closed:animate-popover-out-left ui-placement-right:ui-open:animate-popover-in-right ui-placement-right-start:ui-open:animate-popover-in-right ui-placement-right-end:ui-open:animate-popover-in-right ui-placement-right:ui-closed:animate-popover-out-right ui-placement-right-start:ui-closed:animate-popover-out-right ui-placement-right-end:ui-closed:animate-popover-out-right bg-bg-quaternary z-tooltip rounded-md px-2.5 py-2',
8
+ ],
9
+ arrow: 'arrow-bg-bg-quaternary arrow-size-3',
10
+ positioner: 'z-tooltip',
11
+ }),
6
12
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opexa/portal-components",
3
- "version": "0.0.139",
3
+ "version": "0.0.141",
4
4
  "exports": {
5
5
  "./ui/*": {
6
6
  "types": "./dist/ui/*/index.d.ts",