@cuemath/leap 3.1.14 → 3.1.15-as1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/features/auth/login/identifier-otp-form/identifier-otp-form.js +1 -1
- package/dist/features/auth/login/identifier-otp-form/identifier-otp-form.js.map +1 -1
- package/dist/features/ui/modals/modal-provider.js +40 -37
- package/dist/features/ui/modals/modal-provider.js.map +1 -1
- package/dist/features/ui/modals/modal-styled.js +4 -3
- package/dist/features/ui/modals/modal-styled.js.map +1 -1
- package/dist/features/ui/modals/use-modal-actions.js +6 -6
- package/dist/features/ui/modals/use-modal-actions.js.map +1 -1
- package/dist/index.d.ts +8 -3
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"identifier-otp-form.js","sources":["../../../../../src/features/auth/login/identifier-otp-form/identifier-otp-form.tsx"],"sourcesContent":["import type { IIdentifierOtpFormProps } from './identifier-otp-form-types';\n\nimport React, { type ChangeEvent, memo, useCallback } from 'react';\n\nimport Button from '../../../ui/buttons/button/button';\nimport TextInput from '../../../ui/inputs/text-input/text-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport InputStatusIcon from '../../comps/input-status-icon/input-status-icon';\nimport ResendOTP from '../../comps/resend-otp/resend-otp';\nimport * as Styled from './identifier-otp-form-styled';\n\nconst IdentifierOtpForm: React.FC<IIdentifierOtpFormProps> = ({\n identifier,\n otp,\n errors,\n isOtpVerified,\n isLoading,\n isSubmitDisabled,\n showOtpInput,\n isAuthRedirecting,\n onChange,\n onSubmit,\n onSendOtp,\n}) => {\n const otpStatusVariant = isOtpVerified ? 'success-dark' : 'primary-dark';\n\n const handleIdentifierChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n onChange('identifier', e.target.value);\n },\n [onChange],\n );\n\n const handleOtpChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n onChange('otp', e.target.value);\n },\n [onChange],\n );\n\n return (\n <Styled.Container\n $gutterX={1.5}\n $gapX={1.5}\n $background=\"BLACK_2\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n <Styled.FormWrapper onSubmit={onSubmit}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n <TextInput\n renderAs={errors.identifier ? 'error-dark' : 'primary-dark'}\n autoFocus\n label=\"Email or Phone\"\n value={identifier}\n onChange={handleIdentifierChange}\n required\n width=\"100%\"\n shape=\"borderLess\"\n errorMessage={errors.identifier}\n disabled={showOtpInput}\n siblingElement={<InputStatusIcon isError={!!errors.identifier} />}\n />\n {showOtpInput && (\n <>\n <Separator height={36} />\n <TextInput\n type=\"password\"\n renderAs={errors.otp ? 'error-dark' : otpStatusVariant}\n label=\"Verification code\"\n value={otp}\n onChange={handleOtpChange}\n width=\"100%\"\n required\n autoFocus\n shape=\"borderLess\"\n errorMessage={errors.otp}\n disabled={isOtpVerified || (otp.length === 4 && isLoading)}\n siblingElement={\n <InputStatusIcon\n isLoading={isLoading}\n isValid={isOtpVerified}\n isError={!!errors.otp}\n />\n }\n />\n <Separator heightX={1.25} />\n <FlexView $alignItems=\"flex-end\" $width=\"100%\">\n <ResendOTP onResendOTP={onSendOtp} disabled={isOtpVerified} />\n </FlexView>\n <Separator heightX={2} />\n </>\n )}\n </FlexView>\n <Button\n size=\"small\"\n renderAs=\"secondary-dark\"\n type=\"submit\"\n label={showOtpInput ? 'Log In' : 'Get Verification Code'}\n width=\"100%\"\n busy={showOtpInput ? isAuthRedirecting : isLoading}\n disabled={isSubmitDisabled}\n />\n </Styled.FormWrapper>\n </Styled.Container>\n );\n};\n\nexport default memo(IdentifierOtpForm);\n"],"names":["IdentifierOtpForm","identifier","otp","errors","isOtpVerified","isLoading","isSubmitDisabled","showOtpInput","isAuthRedirecting","onChange","onSubmit","onSendOtp","otpStatusVariant","handleIdentifierChange","useCallback","e","handleOtpChange","jsx","Styled.Container","jsxs","Styled.FormWrapper","FlexView","TextInput","InputStatusIcon","Fragment","Separator","ResendOTP","Button","identifierOtpForm","memo"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAuD,CAAC;AAAA,EAC5D,YAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,
|
|
1
|
+
{"version":3,"file":"identifier-otp-form.js","sources":["../../../../../src/features/auth/login/identifier-otp-form/identifier-otp-form.tsx"],"sourcesContent":["import type { IIdentifierOtpFormProps } from './identifier-otp-form-types';\n\nimport React, { type ChangeEvent, memo, useCallback } from 'react';\n\nimport Button from '../../../ui/buttons/button/button';\nimport TextInput from '../../../ui/inputs/text-input/text-input';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport InputStatusIcon from '../../comps/input-status-icon/input-status-icon';\nimport ResendOTP from '../../comps/resend-otp/resend-otp';\nimport * as Styled from './identifier-otp-form-styled';\n\nconst IdentifierOtpForm: React.FC<IIdentifierOtpFormProps> = ({\n identifier,\n otp,\n errors,\n isOtpVerified,\n isLoading,\n isSubmitDisabled,\n showOtpInput,\n isAuthRedirecting = false,\n onChange,\n onSubmit,\n onSendOtp,\n}) => {\n const otpStatusVariant = isOtpVerified ? 'success-dark' : 'primary-dark';\n\n const handleIdentifierChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n onChange('identifier', e.target.value);\n },\n [onChange],\n );\n\n const handleOtpChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n onChange('otp', e.target.value);\n },\n [onChange],\n );\n\n return (\n <Styled.Container\n $gutterX={1.5}\n $gapX={1.5}\n $background=\"BLACK_2\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n >\n <Styled.FormWrapper onSubmit={onSubmit}>\n <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n <TextInput\n renderAs={errors.identifier ? 'error-dark' : 'primary-dark'}\n autoFocus\n label=\"Email or Phone\"\n value={identifier}\n onChange={handleIdentifierChange}\n required\n width=\"100%\"\n shape=\"borderLess\"\n errorMessage={errors.identifier}\n disabled={showOtpInput}\n siblingElement={<InputStatusIcon isError={!!errors.identifier} />}\n />\n {showOtpInput && (\n <>\n <Separator height={36} />\n <TextInput\n type=\"password\"\n renderAs={errors.otp ? 'error-dark' : otpStatusVariant}\n label=\"Verification code\"\n value={otp}\n onChange={handleOtpChange}\n width=\"100%\"\n required\n autoFocus\n shape=\"borderLess\"\n errorMessage={errors.otp}\n disabled={isOtpVerified || (otp.length === 4 && isLoading)}\n siblingElement={\n <InputStatusIcon\n isLoading={isLoading}\n isValid={isOtpVerified}\n isError={!!errors.otp}\n />\n }\n />\n <Separator heightX={1.25} />\n <FlexView $alignItems=\"flex-end\" $width=\"100%\">\n <ResendOTP onResendOTP={onSendOtp} disabled={isOtpVerified} />\n </FlexView>\n <Separator heightX={2} />\n </>\n )}\n </FlexView>\n <Button\n size=\"small\"\n renderAs=\"secondary-dark\"\n type=\"submit\"\n label={showOtpInput ? 'Log In' : 'Get Verification Code'}\n width=\"100%\"\n busy={showOtpInput ? isAuthRedirecting : isLoading}\n disabled={isSubmitDisabled}\n />\n </Styled.FormWrapper>\n </Styled.Container>\n );\n};\n\nexport default memo(IdentifierOtpForm);\n"],"names":["IdentifierOtpForm","identifier","otp","errors","isOtpVerified","isLoading","isSubmitDisabled","showOtpInput","isAuthRedirecting","onChange","onSubmit","onSendOtp","otpStatusVariant","handleIdentifierChange","useCallback","e","handleOtpChange","jsx","Styled.Container","jsxs","Styled.FormWrapper","FlexView","TextInput","InputStatusIcon","Fragment","Separator","ResendOTP","Button","identifierOtpForm","memo"],"mappings":"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"}
|
|
@@ -1,48 +1,51 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { memo as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { lockScroll as
|
|
6
|
-
const
|
|
7
|
-
const [o,
|
|
8
|
-
(
|
|
9
|
-
const
|
|
10
|
-
if (!
|
|
11
|
-
throw new Error(`Modal with name "${
|
|
12
|
-
if (
|
|
1
|
+
import { jsxs as x, jsx as y } from "react/jsx-runtime";
|
|
2
|
+
import { memo as D, useState as d, useRef as I, useCallback as f, useMemo as S, useEffect as w } from "react";
|
|
3
|
+
import b from "./modal.js";
|
|
4
|
+
import h from "./modal-context.js";
|
|
5
|
+
import { lockScroll as R, unlockScroll as T } from "./modal-helpers.js";
|
|
6
|
+
const $ = 500, g = D(({ children: p, modals: u, isUserAuthenticated: t }) => {
|
|
7
|
+
const [o, M] = d(null), [m, C] = d(void 0), [r, i] = d(!1), l = I(void 0), v = f(
|
|
8
|
+
(e, s, P) => {
|
|
9
|
+
const c = u.find((E) => E.name === e);
|
|
10
|
+
if (!c)
|
|
11
|
+
throw new Error(`Modal with name "${e}" not found`);
|
|
12
|
+
if (c.isPrivate && !t)
|
|
13
13
|
throw new Error(
|
|
14
|
-
`Access violation: Modal "${
|
|
14
|
+
`Access violation: Modal "${e}" is private and user is not authenticated`
|
|
15
15
|
);
|
|
16
|
-
|
|
16
|
+
l.current = P, i(!1), M(c), C(s), R();
|
|
17
17
|
},
|
|
18
|
-
[t,
|
|
19
|
-
),
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
},
|
|
23
|
-
}, []),
|
|
18
|
+
[t, u]
|
|
19
|
+
), n = f(() => {
|
|
20
|
+
i(!0), T(), setTimeout(() => {
|
|
21
|
+
M(null), i(!1);
|
|
22
|
+
}, $);
|
|
23
|
+
}, []), k = S(
|
|
24
24
|
() => ({
|
|
25
25
|
modal: o,
|
|
26
|
-
modalParams:
|
|
27
|
-
openModal:
|
|
28
|
-
closeModal:
|
|
29
|
-
isClosing:
|
|
26
|
+
modalParams: m,
|
|
27
|
+
openModal: v,
|
|
28
|
+
closeModal: n,
|
|
29
|
+
isClosing: r
|
|
30
30
|
}),
|
|
31
|
-
[o,
|
|
32
|
-
)
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}, [
|
|
36
|
-
|
|
37
|
-
|
|
31
|
+
[o, m, v, n, r]
|
|
32
|
+
), a = f(() => {
|
|
33
|
+
var e, s;
|
|
34
|
+
(o == null ? void 0 : o.isDismissable) !== !1 && !r && (n(), l.current && ((s = (e = l.current).onCloseModal) == null || s.call(e), l.current.onCloseModal = void 0));
|
|
35
|
+
}, [o, n, r]);
|
|
36
|
+
return w(() => {
|
|
37
|
+
!t && (o != null && o.isPrivate) && n();
|
|
38
|
+
}, [t, o, n]), w(() => {
|
|
39
|
+
const e = (s) => {
|
|
40
|
+
s.key === "Escape" && a();
|
|
38
41
|
};
|
|
39
|
-
return window.addEventListener("keydown",
|
|
40
|
-
}, [
|
|
41
|
-
|
|
42
|
-
o && /* @__PURE__ */
|
|
42
|
+
return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
|
|
43
|
+
}, [a]), /* @__PURE__ */ x(h.Provider, { value: k, children: [
|
|
44
|
+
p,
|
|
45
|
+
o && /* @__PURE__ */ y(b, { modal: o, isClosing: r, onClose: a })
|
|
43
46
|
] });
|
|
44
|
-
}),
|
|
47
|
+
}), K = g;
|
|
45
48
|
export {
|
|
46
|
-
|
|
49
|
+
K as default
|
|
47
50
|
};
|
|
48
51
|
//# sourceMappingURL=modal-provider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-provider.js","sources":["../../../../src/features/ui/modals/modal-provider.tsx"],"sourcesContent":["import type { IModal, IModalContext, IModalProviderProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport Modal from './modal';\nimport ModalContext from './modal-context';\nimport { lockScroll, unlockScroll } from './modal-helpers';\n\nconst ANIMATION_DURATION_MS = 500; // Match the animation duration in modal.tsx\n\n/**\n * Provider component that manages modal state and provides modal context to child components\n */\nconst ModalProvider: FC<IModalProviderProps> = memo(({ children, modals, isUserAuthenticated }) => {\n const [modal, setModal] = useState<IModal | null>(null);\n const [modalParams, setModalParams] = useState<Record<string, unknown> | undefined>(undefined);\n const [isClosing, setIsClosing] = useState(false);\n
|
|
1
|
+
{"version":3,"file":"modal-provider.js","sources":["../../../../src/features/ui/modals/modal-provider.tsx"],"sourcesContent":["import type { IModal, IModalCallbacks, IModalContext, IModalProviderProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport Modal from './modal';\nimport ModalContext from './modal-context';\nimport { lockScroll, unlockScroll } from './modal-helpers';\n\nconst ANIMATION_DURATION_MS = 500; // Match the animation duration in modal.tsx\n\n/**\n * Provider component that manages modal state and provides modal context to child components\n */\nconst ModalProvider: FC<IModalProviderProps> = memo(({ children, modals, isUserAuthenticated }) => {\n const [modal, setModal] = useState<IModal | null>(null);\n const [modalParams, setModalParams] = useState<Record<string, unknown> | undefined>(undefined);\n const [isClosing, setIsClosing] = useState(false);\n const callbackRefs = useRef<IModalCallbacks | undefined>(undefined);\n /**\n * Opens a modal by name with optional parameters\n * Handles authentication check for private modals\n */\n const openModal = useCallback<IModalContext['openModal']>(\n (modalName, newModalParams, callback) => {\n const newModal = modals.find(m => m.name === modalName);\n\n if (!newModal) {\n throw new Error(`Modal with name \"${modalName}\" not found`);\n }\n\n if (newModal.isPrivate && !isUserAuthenticated) {\n throw new Error(\n `Access violation: Modal \"${modalName}\" is private and user is not authenticated`,\n );\n }\n\n callbackRefs.current = callback;\n setIsClosing(false);\n setModal(newModal);\n setModalParams(newModalParams as unknown as Record<string, unknown> | undefined);\n lockScroll(); // Lock scroll while preserving scrollbar width\n },\n [isUserAuthenticated, modals],\n );\n\n const closeModal = useCallback(() => {\n setIsClosing(true);\n // Wait for the animation to complete before removing the modal\n unlockScroll();\n setTimeout(() => {\n setModal(null);\n setIsClosing(false);\n }, ANIMATION_DURATION_MS);\n }, []);\n\n const modalContent = useMemo<IModalContext>(\n () => ({\n modal,\n modalParams,\n openModal,\n closeModal,\n isClosing,\n }),\n [modal, modalParams, openModal, closeModal, isClosing],\n );\n\n const onModalDismiss = useCallback(() => {\n if (modal?.isDismissable !== false && !isClosing) {\n closeModal();\n if (callbackRefs.current) {\n callbackRefs.current.onCloseModal?.();\n callbackRefs.current.onCloseModal = undefined; // Clear callback reference\n }\n }\n }, [modal, closeModal, isClosing]);\n\n useEffect(() => {\n if (!isUserAuthenticated && modal?.isPrivate) {\n // If the modal is private and user is not authenticated, close it\n closeModal();\n }\n }, [isUserAuthenticated, modal, closeModal]);\n\n // Handle ESC key\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n onModalDismiss();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [onModalDismiss]);\n\n return (\n <ModalContext.Provider value={modalContent}>\n {children}\n {modal && <Modal modal={modal} isClosing={isClosing} onClose={onModalDismiss} />}\n </ModalContext.Provider>\n );\n});\n\nexport default ModalProvider;\n"],"names":["ANIMATION_DURATION_MS","ModalProvider","memo","children","modals","isUserAuthenticated","modal","setModal","useState","modalParams","setModalParams","isClosing","setIsClosing","callbackRefs","useRef","openModal","useCallback","modalName","newModalParams","callback","newModal","m","lockScroll","closeModal","unlockScroll","modalContent","useMemo","onModalDismiss","_b","_a","useEffect","handleKeyDown","e","jsxs","ModalContext","jsx","Modal","ModalProvider$1"],"mappings":";;;;;AASA,MAAMA,IAAwB,KAKxBC,IAAyCC,EAAK,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,qBAAAC,QAA0B;AACjG,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAwB,IAAI,GAChD,CAACC,GAAaC,CAAc,IAAIF,EAA8C,MAAS,GACvF,CAACG,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAC1CK,IAAeC,EAAoC,MAAS,GAK5DC,IAAYC;AAAA,IAChB,CAACC,GAAWC,GAAgBC,MAAa;AACvC,YAAMC,IAAWhB,EAAO,KAAK,CAAKiB,MAAAA,EAAE,SAASJ,CAAS;AAEtD,UAAI,CAACG;AACH,cAAM,IAAI,MAAM,oBAAoBH,CAAS,aAAa;AAGxD,UAAAG,EAAS,aAAa,CAACf;AACzB,cAAM,IAAI;AAAA,UACR,4BAA4BY,CAAS;AAAA,QAAA;AAIzC,MAAAJ,EAAa,UAAUM,GACvBP,EAAa,EAAK,GAClBL,EAASa,CAAQ,GACjBV,EAAeQ,CAAgE,GACpEI;IACb;AAAA,IACA,CAACjB,GAAqBD,CAAM;AAAA,EAAA,GAGxBmB,IAAaP,EAAY,MAAM;AACnC,IAAAJ,EAAa,EAAI,GAEJY,KACb,WAAW,MAAM;AACf,MAAAjB,EAAS,IAAI,GACbK,EAAa,EAAK;AAAA,OACjBZ,CAAqB;AAAA,EAC1B,GAAG,CAAE,CAAA,GAECyB,IAAeC;AAAA,IACnB,OAAO;AAAA,MACL,OAAApB;AAAA,MACA,aAAAG;AAAA,MACA,WAAAM;AAAA,MACA,YAAAQ;AAAA,MACA,WAAAZ;AAAA,IAAA;AAAA,IAEF,CAACL,GAAOG,GAAaM,GAAWQ,GAAYZ,CAAS;AAAA,EAAA,GAGjDgB,IAAiBX,EAAY,MAAM;;AACvC,KAAIV,KAAA,gBAAAA,EAAO,mBAAkB,MAAS,CAACK,MAC1BY,KACPV,EAAa,aACfe,KAAAC,IAAAhB,EAAa,SAAQ,iBAArB,QAAAe,EAAA,KAAAC,IACAhB,EAAa,QAAQ,eAAe;AAAA,EAGvC,GAAA,CAACP,GAAOiB,GAAYZ,CAAS,CAAC;AAEjC,SAAAmB,EAAU,MAAM;AACV,IAAA,CAACzB,MAAuBC,KAAA,QAAAA,EAAO,cAEtBiB;EAEZ,GAAA,CAAClB,GAAqBC,GAAOiB,CAAU,CAAC,GAG3CO,EAAU,MAAM;AACR,UAAAC,IAAgB,CAACC,MAAqB;AACtC,MAAAA,EAAE,QAAQ,YACGL;IACjB;AAGK,kBAAA,iBAAiB,WAAWI,CAAa,GAEzC,MAAM,OAAO,oBAAoB,WAAWA,CAAa;AAAA,EAAA,GAC/D,CAACJ,CAAc,CAAC,GAGhB,gBAAAM,EAAAC,EAAa,UAAb,EAAsB,OAAOT,GAC3B,UAAA;AAAA,IAAAtB;AAAA,IACAG,KAAU,gBAAA6B,EAAAC,GAAA,EAAM,OAAA9B,GAAc,WAAAK,GAAsB,SAASgB,GAAgB;AAAA,EAChF,EAAA,CAAA;AAEJ,CAAC,GAEDU,IAAepC;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import o from "styled-components";
|
|
2
2
|
const s = o.div(
|
|
3
|
-
({ theme: { colors: a }, $isClosing:
|
|
3
|
+
({ theme: { colors: a, zIndex: t }, $isClosing: i }) => `
|
|
4
4
|
position: fixed;
|
|
5
5
|
top: 0;
|
|
6
6
|
left: 0;
|
|
@@ -9,8 +9,9 @@ const s = o.div(
|
|
|
9
9
|
background-color: ${a.BLACK_T_60};
|
|
10
10
|
backdrop-filter: blur(40px);
|
|
11
11
|
display: flex;
|
|
12
|
-
animation: ${
|
|
13
|
-
|
|
12
|
+
animation: ${i ? "backdropFadeOut" : "backdropFadeIn"} 0.2s ease-out forwards;
|
|
13
|
+
z-index: ${t.MODAL};
|
|
14
|
+
|
|
14
15
|
@keyframes backdropFadeIn {
|
|
15
16
|
from {
|
|
16
17
|
opacity: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"modal-styled.js","sources":["../../../../src/features/ui/modals/modal-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst ModalContainer = styled.div<{ $isClosing?: boolean }>(\n ({ theme: { colors }, $isClosing }) => `\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${colors.BLACK_T_60};\n backdrop-filter: blur(40px);\n display: flex;\n animation: ${$isClosing ? 'backdropFadeOut' : 'backdropFadeIn'} 0.2s ease-out forwards;\n \n @keyframes backdropFadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n \n @keyframes backdropFadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n`,\n);\n\n/**\n * Base modal container with customizable width and animation state\n */\nconst BaseModal = styled.div<{\n $isClosing?: boolean;\n $width: string;\n}>(\n ({ theme: { colors }, $isClosing, $width }) => `\n position: relative;\n align-self: center;\n margin: 0 auto;\n width: ${$width};\n background-color: ${colors.WHITE_1};\n border: 1px solid ${colors.BLACK_1};\n transform-origin: center center;\n animation: ${\n $isClosing ? 'modalDisappear' : 'modalAppear'\n } 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;\n box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);\n \n /* Responsive behavior for smaller screens */\n @media (max-width: calc(${$width} + 80px)) {\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n border: none;\n }\n \n @keyframes modalAppear {\n 0% {\n opacity: 0;\n transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n }\n 100% {\n opacity: 1;\n transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n }\n }\n \n @keyframes modalDisappear {\n 0% {\n opacity: 1;\n transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n }\n 100% {\n opacity: 0;\n transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n }\n }\n`,\n);\n\n/**\n * Scrollable content container inside the modal\n */\nconst BaseModalContent = styled.div<{ $modalWidth: string }>(\n ({ $modalWidth }) => `\n max-height: calc(100vh - 142px);\n overflow-y: auto;\n\n @media (max-width: calc(${$modalWidth} + 80px)) {\n max-height: 100vh;\n }\n}`,\n);\n\n/**\n * Container for the close button with responsive positioning\n */\nconst CloseButtonContainer = styled.div<{ $modalWidth: string }>(\n ({ theme: { colors }, $modalWidth }) => `\n position: absolute;\n top: -56px;\n right: -40px;\n color: ${colors.WHITE_1};\n transition: all 0.2s ease;\n \n &:hover {\n transform: scale(1.05);\n }\n\n @media (max-width: calc(${$modalWidth} + 80px)) {\n top: 16px;\n right: 16px;\n color: ${colors.BLACK_1};\n }\n`,\n);\n\nconst spotlightWidth = 720;\nconst spotlightAnimationStartDuration = 800;\nconst spotlightAnimationEndDuration = 500;\n\nconst SpotlightModal = styled.div<{\n $isClosing?: boolean;\n}>(\n ({ $isClosing }) => `\n position: absolute;\n width: ${spotlightWidth}px;\n height: 100%;\n left: 50%;\n margin-left: ${-(spotlightWidth / 2)}px;\n clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);\n background: linear-gradient(\n 180deg,\n rgba(0, 0, 0, 1) 0%,\n rgba(0, 0, 0, 0) 100%\n );\n animation: openSpotlight;\n animation-duration: ${spotlightAnimationStartDuration}ms;\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n opacity: 0;\n ${\n $isClosing\n ? `\n animation: closeSpotlight;\n animation-duration: ${spotlightAnimationEndDuration}ms;\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n opacity: 1;\n `\n : ''\n }\n\n @keyframes openSpotlight {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes closeSpotlight {\n from {\n transform: rotateY(0);\n }\n to {\n transform: rotateY(90deg);\n }\n }\n`,\n);\n\nexport { ModalContainer, BaseModal, BaseModalContent, CloseButtonContainer, SpotlightModal };\n"],"names":["ModalContainer","styled","colors","$isClosing","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal"],"mappings":";AAEA,MAAMA,IAAiBC,EAAO;AAAA,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,YAAAC,
|
|
1
|
+
{"version":3,"file":"modal-styled.js","sources":["../../../../src/features/ui/modals/modal-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst ModalContainer = styled.div<{ $isClosing?: boolean }>(\n ({ theme: { colors, zIndex }, $isClosing }) => `\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: ${colors.BLACK_T_60};\n backdrop-filter: blur(40px);\n display: flex;\n animation: ${$isClosing ? 'backdropFadeOut' : 'backdropFadeIn'} 0.2s ease-out forwards;\n z-index: ${zIndex.MODAL};\n\n @keyframes backdropFadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n \n @keyframes backdropFadeOut {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n`,\n);\n\n/**\n * Base modal container with customizable width and animation state\n */\nconst BaseModal = styled.div<{\n $isClosing?: boolean;\n $width: string;\n}>(\n ({ theme: { colors }, $isClosing, $width }) => `\n position: relative;\n align-self: center;\n margin: 0 auto;\n width: ${$width};\n background-color: ${colors.WHITE_1};\n border: 1px solid ${colors.BLACK_1};\n transform-origin: center center;\n animation: ${\n $isClosing ? 'modalDisappear' : 'modalAppear'\n } 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;\n box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);\n \n /* Responsive behavior for smaller screens */\n @media (max-width: calc(${$width} + 80px)) {\n width: 100%;\n max-width: 100%;\n height: 100%;\n max-height: 100%;\n border: none;\n }\n \n @keyframes modalAppear {\n 0% {\n opacity: 0;\n transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n }\n 100% {\n opacity: 1;\n transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n }\n }\n \n @keyframes modalDisappear {\n 0% {\n opacity: 1;\n transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n }\n 100% {\n opacity: 0;\n transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n }\n }\n`,\n);\n\n/**\n * Scrollable content container inside the modal\n */\nconst BaseModalContent = styled.div<{ $modalWidth: string }>(\n ({ $modalWidth }) => `\n max-height: calc(100vh - 142px);\n overflow-y: auto;\n\n @media (max-width: calc(${$modalWidth} + 80px)) {\n max-height: 100vh;\n }\n}`,\n);\n\n/**\n * Container for the close button with responsive positioning\n */\nconst CloseButtonContainer = styled.div<{ $modalWidth: string }>(\n ({ theme: { colors }, $modalWidth }) => `\n position: absolute;\n top: -56px;\n right: -40px;\n color: ${colors.WHITE_1};\n transition: all 0.2s ease;\n \n &:hover {\n transform: scale(1.05);\n }\n\n @media (max-width: calc(${$modalWidth} + 80px)) {\n top: 16px;\n right: 16px;\n color: ${colors.BLACK_1};\n }\n`,\n);\n\nconst spotlightWidth = 720;\nconst spotlightAnimationStartDuration = 800;\nconst spotlightAnimationEndDuration = 500;\n\nconst SpotlightModal = styled.div<{\n $isClosing?: boolean;\n}>(\n ({ $isClosing }) => `\n position: absolute;\n width: ${spotlightWidth}px;\n height: 100%;\n left: 50%;\n margin-left: ${-(spotlightWidth / 2)}px;\n clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);\n background: linear-gradient(\n 180deg,\n rgba(0, 0, 0, 1) 0%,\n rgba(0, 0, 0, 0) 100%\n );\n animation: openSpotlight;\n animation-duration: ${spotlightAnimationStartDuration}ms;\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n opacity: 0;\n ${\n $isClosing\n ? `\n animation: closeSpotlight;\n animation-duration: ${spotlightAnimationEndDuration}ms;\n animation-timing-function: linear;\n animation-fill-mode: forwards;\n opacity: 1;\n `\n : ''\n }\n\n @keyframes openSpotlight {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n\n @keyframes closeSpotlight {\n from {\n transform: rotateY(0);\n }\n to {\n transform: rotateY(90deg);\n }\n }\n`,\n);\n\nexport { ModalContainer, BaseModal, BaseModalContent, CloseButtonContainer, SpotlightModal };\n"],"names":["ModalContainer","styled","colors","zIndex","$isClosing","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal"],"mappings":";AAEA,MAAMA,IAAiBC,EAAO;AAAA,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAAC,GAAQ,QAAAC,EAAO,GAAG,YAAAC,QAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAM3BF,EAAO,UAAU;AAAA;AAAA;AAAA,eAGxBE,IAAa,oBAAoB,gBAAgB;AAAA,aACnDD,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBzB,GAKME,IAAYJ,EAAO;AAAA,EAIvB,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAU,GAAA,YAAAE,GAAY,QAAAE,QAAa;AAAA;AAAA;AAAA;AAAA,WAItCA,CAAM;AAAA,sBACKJ,EAAO,OAAO;AAAA,sBACdA,EAAO,OAAO;AAAA;AAAA,eAGhCE,IAAa,mBAAmB,aAClC;AAAA;AAAA;AAAA;AAAA,4BAI0BE,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BlC,GAKMC,IAAmBN,EAAO;AAAA,EAC9B,CAAC,EAAE,aAAAO,EAAA,MAAkB;AAAA;AAAA;AAAA;AAAA,4BAIKA,CAAW;AAAA;AAAA;AAAA;AAIvC,GAKMC,IAAuBR,EAAO;AAAA,EAClC,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,aAAAM,EAAkB,MAAA;AAAA;AAAA;AAAA;AAAA,WAI/BN,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOGM,CAAW;AAAA;AAAA;AAAA,aAG1BN,EAAO,OAAO;AAAA;AAAA;AAG3B,GAEMQ,IAAiB,KACjBC,IAAkC,KAClCC,IAAgC,KAEhCC,IAAiBZ,EAAO;AAAA,EAG5B,CAAC,EAAE,YAAAG,EAAA,MAAiB;AAAA;AAAA,WAEXM,CAAc;AAAA;AAAA;AAAA,iBAGR,EAAEA,IAAiB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQdC,CAA+B;AAAA;AAAA;AAAA;AAAA,IAKnDP,IACI;AAAA;AAAA,4BAEoBQ,CAA6B;AAAA;AAAA;AAAA;AAAA,QAKjD,EACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBF;"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { useContext as
|
|
2
|
-
import
|
|
3
|
-
const
|
|
4
|
-
const { openModal: o, closeModal: t, isClosing: s } =
|
|
5
|
-
return { openModal: o, closeModal: t, isClosing: s };
|
|
6
|
-
}, c =
|
|
1
|
+
import { useContext as n } from "react";
|
|
2
|
+
import l from "./modal-context.js";
|
|
3
|
+
const a = () => {
|
|
4
|
+
const { openModal: o, closeModal: t, isClosing: s, modal: e } = n(l);
|
|
5
|
+
return { openModal: o, closeModal: t, isClosing: s, modal: e };
|
|
6
|
+
}, c = a;
|
|
7
7
|
export {
|
|
8
8
|
c as default
|
|
9
9
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-modal-actions.js","sources":["../../../../src/features/ui/modals/use-modal-actions.ts"],"sourcesContent":["import type { IUseModalActions } from './modal-types';\n\nimport { useContext } from 'react';\n\nimport ModalContext from './modal-context';\n\nconst useModalActions: IUseModalActions = () => {\n const { openModal, closeModal, isClosing } = useContext(ModalContext);\n\n return { openModal, closeModal, isClosing };\n};\n\nexport default useModalActions;\n"],"names":["useModalActions","openModal","closeModal","isClosing","useContext","ModalContext","useModalActions$1"],"mappings":";;AAMA,MAAMA,IAAoC,MAAM;AAC9C,QAAM,EAAE,WAAAC,GAAW,YAAAC,GAAY,WAAAC,
|
|
1
|
+
{"version":3,"file":"use-modal-actions.js","sources":["../../../../src/features/ui/modals/use-modal-actions.ts"],"sourcesContent":["import type { IUseModalActions } from './modal-types';\n\nimport { useContext } from 'react';\n\nimport ModalContext from './modal-context';\n\nconst useModalActions: IUseModalActions = () => {\n const { openModal, closeModal, isClosing, modal } = useContext(ModalContext);\n\n return { openModal, closeModal, isClosing, modal };\n};\n\nexport default useModalActions;\n"],"names":["useModalActions","openModal","closeModal","isClosing","modal","useContext","ModalContext","useModalActions$1"],"mappings":";;AAMA,MAAMA,IAAoC,MAAM;AAC9C,QAAM,EAAE,WAAAC,GAAW,YAAAC,GAAY,WAAAC,GAAW,OAAAC,MAAUC,EAAWC,CAAY;AAE3E,SAAO,EAAE,WAAAL,GAAW,YAAAC,GAAY,WAAAC,GAAW,OAAAC,EAAM;AACnD,GAEAG,IAAeP;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1531,7 +1531,7 @@ declare interface IIdentifierOtpFormProps {
|
|
|
1531
1531
|
isOtpVerified: boolean;
|
|
1532
1532
|
isLoading: boolean;
|
|
1533
1533
|
isSubmitDisabled: boolean;
|
|
1534
|
-
isAuthRedirecting
|
|
1534
|
+
isAuthRedirecting?: boolean;
|
|
1535
1535
|
showOtpInput: boolean;
|
|
1536
1536
|
onChange: (key: 'identifier' | 'otp', value: string) => void;
|
|
1537
1537
|
onSubmit: (e: FormEvent<HTMLFormElement>) => void;
|
|
@@ -2379,6 +2379,11 @@ export declare interface IModal {
|
|
|
2379
2379
|
modalWidth: string;
|
|
2380
2380
|
}
|
|
2381
2381
|
|
|
2382
|
+
declare interface IModalCallbacks {
|
|
2383
|
+
/** Callback when the modal is closed */
|
|
2384
|
+
onCloseModal?: () => void;
|
|
2385
|
+
}
|
|
2386
|
+
|
|
2382
2387
|
/**
|
|
2383
2388
|
* Context for managing modals throughout the application
|
|
2384
2389
|
*/
|
|
@@ -2388,7 +2393,7 @@ declare interface IModalContext {
|
|
|
2388
2393
|
/** Parameters passed to the modal when opened */
|
|
2389
2394
|
modalParams?: Record<string, unknown>;
|
|
2390
2395
|
/** Opens a modal by name with optional parameters */
|
|
2391
|
-
openModal: <T = undefined>(name: string, params?: T) => void;
|
|
2396
|
+
openModal: <T = undefined>(name: string, params?: T, callbacks?: IModalCallbacks) => void;
|
|
2392
2397
|
/** Closes the currently open modal */
|
|
2393
2398
|
closeModal: () => void;
|
|
2394
2399
|
/** Whether the modal is in the process of closing (for animation) */
|
|
@@ -3606,7 +3611,7 @@ declare interface IUseIsTabBlocked {
|
|
|
3606
3611
|
}
|
|
3607
3612
|
|
|
3608
3613
|
declare interface IUseModalActions {
|
|
3609
|
-
(): Pick<IModalContext, 'openModal' | 'closeModal' | 'isClosing'>;
|
|
3614
|
+
(): Pick<IModalContext, 'openModal' | 'closeModal' | 'isClosing' | 'modal'>;
|
|
3610
3615
|
}
|
|
3611
3616
|
|
|
3612
3617
|
declare interface IUseModalParams {
|