@cuemath/leap 3.2.15-link.2 → 3.2.15-link.3

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 (16) hide show
  1. package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js +14 -27
  2. package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js.map +1 -1
  3. package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js +25 -24
  4. package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js.map +1 -1
  5. package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.js +10 -0
  6. package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.js.map +1 -0
  7. package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js +17 -0
  8. package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js.map +1 -0
  9. package/dist/features/ui/drawer/drawer-styled.js +34 -0
  10. package/dist/features/ui/drawer/drawer-styled.js.map +1 -0
  11. package/dist/features/ui/drawer/drawer.js +42 -0
  12. package/dist/features/ui/drawer/drawer.js.map +1 -0
  13. package/dist/index.d.ts +12 -0
  14. package/dist/index.js +329 -327
  15. package/dist/index.js.map +1 -1
  16. package/package.json +1 -1
package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js CHANGED
@@ -1,7 +1,6 @@
1
- import o, { keyframes as r, css as e } from "styled-components";
1
+ import r, { keyframes as a, css as t } from "styled-components";
2
2
  import s from "../../../ui/layout/flex-view.js";
3
- import a from "../../../ui/text/text.js";
4
- const m = o(s)``, i = r`
3
+ const c = r(s)``, e = a`
5
4
  from {
6
5
  opacity: 0;
7
6
  transform: scale(0.95);
@@ -10,7 +9,7 @@ const m = o(s)``, i = r`
10
9
  opacity: 1;
11
10
  transform: scale(1);
12
11
  }
13
- `, n = r`
12
+ `, i = a`
14
13
  from {
15
14
  opacity: 1;
16
15
  transform: scale(1);
@@ -19,47 +18,35 @@ const m = o(s)``, i = r`
19
18
  opacity: 0;
20
19
  transform: scale(0.95);
21
20
  }
22
- `, f = o(s)`
21
+ `, l = r(s)`
23
22
  position: relative;
24
23
  top: -8px;
25
24
  width: fit-content;
26
25
  max-width: 90%;
27
- border: 1px solid ${({ theme: t }) => t.colors.WHITE_T_15}
28
- opacity: ${({ isVisible: t }) => t ? 1 : 0};
29
- transform: ${({ isVisible: t }) => t ? "scale(1)" : "scale(0.95)"};
30
- animation: ${({ isVisible: t }) => t ? e`
26
+ border: 1px solid ${({ theme: o }) => o.colors.WHITE_T_15}
27
+ opacity: ${({ isVisible: o }) => o ? 1 : 0};
28
+ transform: ${({ isVisible: o }) => o ? "scale(1)" : "scale(0.95)"};
29
+ animation: ${({ isVisible: o }) => o ? t`
30
+ ${e} 0.4s ease forwards
31
+ ` : t`
31
32
  ${i} 0.4s ease forwards
32
- ` : e`
33
- ${n} 0.4s ease forwards
34
33
  `};
35
34
  transition: all 0.4s ease;
36
35
  &::before {
37
36
  content: '';
38
37
  position: absolute;
39
- left: -9px;
38
+ left: -8px;
40
39
  top: 50%;
41
40
  transform: translateY(-50%);
42
41
  width: 0;
43
42
  height: 0;
44
43
  border-top: 8px solid transparent;
45
44
  border-bottom: 8px solid transparent;
46
- border-right: 8px solid ${({ theme: t }) => t.colors.BLACK_5};
45
+ border-right: 8px solid ${({ theme: o }) => o.colors.BLACK_5};
47
46
  }
48
- `, p = r`
49
- from {
50
- width: 0;
51
- }
52
- to {
53
- width: 100%;
54
- }
55
- `, w = o(a)`
56
- animation: ${p} 500ms steps(30, end);
57
- overflow: hidden;
58
- white-space: nowrap;
59
47
  `;
60
48
  export {
61
- w as AnimatedText,
62
- f as MessageWrapper,
63
- m as Wrapper
49
+ l as MessageWrapper,
50
+ c as Wrapper
64
51
  };
65
52
  //# sourceMappingURL=animated-avatar-message-styled.js.map
package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"animated-avatar-message-styled.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nexport const Wrapper = styled(FlexView)``;\n\nconst fadeInScale = keyframes`\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n`;\n\nconst fadeOutScale = keyframes`\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n`;\n\nexport const MessageWrapper = styled(FlexView)<{ isVisible: boolean }>`\n position: relative;\n top: -8px;\n width: fit-content;\n max-width: 90%;\n border: 1px solid ${({ theme }) => theme.colors.WHITE_T_15}\n opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};\n transform: ${({ isVisible }) => (isVisible ? 'scale(1)' : 'scale(0.95)')};\n animation: ${({ isVisible }) =>\n isVisible\n ? css`\n ${fadeInScale} 0.4s ease forwards\n `\n : css`\n ${fadeOutScale} 0.4s ease forwards\n `};\n transition: all 0.4s ease;\n &::before {\n content: '';\n position: absolute;\n left: -9px;\n top: 50%;\n transform: translateY(-50%);\n width: 0;\n height: 0;\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-right: 8px solid ${({ theme }) => theme.colors.BLACK_5};\n }\n`;\n\nconst typewriter = keyframes`\n from {\n width: 0;\n }\n to {\n width: 100%;\n }\n`;\n\nexport const AnimatedText = styled(Text)`\n animation: ${typewriter} 500ms steps(30, end);\n overflow: hidden;\n white-space: nowrap;\n`;\n"],"names":["Wrapper","styled","FlexView","fadeInScale","keyframes","fadeOutScale","MessageWrapper","theme","isVisible","css","typewriter","AnimatedText","Text"],"mappings":";;;AAKa,MAAAA,IAAUC,EAAOC,CAAQ,KAEhCC,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWdC,IAAeD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWRE,IAAiBL,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKvB,CAAC,EAAE,OAAAK,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA,aAC/C,CAAC,EAAE,WAAAC,EAAA,MAAiBA,IAAY,IAAI,CAAE;AAAA,eACpC,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,aAAa,aAAc;AAAA,eAC3D,CAAC,EAAE,WAAAA,QACdA,IACIC;AAAA,YACIN,CAAW;AAAA,YAEfM;AAAA,YACIJ,CAAY;AAAA,SACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAYqB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,GAI3DG,IAAaN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASNO,IAAeV,EAAOW,CAAI;AAAA,eACxBF,CAAU;AAAA;AAAA;AAAA;"}
1
+ {"version":3,"file":"animated-avatar-message-styled.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message-styled.tsx"],"sourcesContent":["import styled, { keyframes, css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const Wrapper = styled(FlexView)``;\n\nconst fadeInScale = keyframes`\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n`;\n\nconst fadeOutScale = keyframes`\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n`;\n\nexport const MessageWrapper = styled(FlexView)<{ isVisible: boolean }>`\n position: relative;\n top: -8px;\n width: fit-content;\n max-width: 90%;\n border: 1px solid ${({ theme }) => theme.colors.WHITE_T_15}\n opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};\n transform: ${({ isVisible }) => (isVisible ? 'scale(1)' : 'scale(0.95)')};\n animation: ${({ isVisible }) =>\n isVisible\n ? css`\n ${fadeInScale} 0.4s ease forwards\n `\n : css`\n ${fadeOutScale} 0.4s ease forwards\n `};\n transition: all 0.4s ease;\n &::before {\n content: '';\n position: absolute;\n left: -8px;\n top: 50%;\n transform: translateY(-50%);\n width: 0;\n height: 0;\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-right: 8px solid ${({ theme }) => theme.colors.BLACK_5};\n }\n`;\n"],"names":["Wrapper","styled","FlexView","fadeInScale","keyframes","fadeOutScale","MessageWrapper","theme","isVisible","css"],"mappings":";;AAIa,MAAAA,IAAUC,EAAOC,CAAQ,KAEhCC,IAAcC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWdC,IAAeD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWRE,IAAiBL,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKvB,CAAC,EAAE,OAAAK,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA,aAC/C,CAAC,EAAE,WAAAC,EAAA,MAAiBA,IAAY,IAAI,CAAE;AAAA,eACpC,CAAC,EAAE,WAAAA,EAAA,MAAiBA,IAAY,aAAa,aAAc;AAAA,eAC3D,CAAC,EAAE,WAAAA,QACdA,IACIC;AAAA,YACIN,CAAW;AAAA,YAEfM;AAAA,YACIJ,CAAY;AAAA,SACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAYqB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;"}
package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js CHANGED
@@ -1,36 +1,37 @@
1
- import { jsxs as v, jsx as l } from "react/jsx-runtime";
2
- import { memo as y, useRef as $, useState as g, useEffect as o, useCallback as N, useImperativeHandle as R, useMemo as V } from "react";
1
+ import { jsxs as b, jsx as l } from "react/jsx-runtime";
2
+ import { memo as h, useRef as T, useState as $, useEffect as o, useCallback as N, useImperativeHandle as R, useMemo as V } from "react";
3
3
  import { LOTTIE as _ } from "../../../../assets/lottie/lottie.js";
4
- import E from "../../../ui/layout/flex-view.js";
4
+ import x from "../../../ui/layout/flex-view.js";
5
5
  import O from "../../../ui/lottie-animation/lottie-animation.js";
6
- import { ANIMATION_SEGMENTS as x, FADE_TIMEOUT as L } from "./animated-avatar-message-constants.js";
7
- import { Wrapper as j, MessageWrapper as C, AnimatedText as D } from "./animated-avatar-message-styled.js";
6
+ import { ANIMATION_SEGMENTS as E, FADE_TIMEOUT as L } from "./animated-avatar-message-constants.js";
7
+ import { Wrapper as j, MessageWrapper as C } from "./animated-avatar-message-styled.js";
8
+ import D from "./animated-text/animated-text.js";
8
9
  const F = {
9
10
  autoplay: !1,
10
11
  loop: !1,
11
12
  renderer: "canvas"
12
- }, S = ({
13
- message: u,
13
+ }, X = ({
14
+ message: n,
14
15
  confirmationMessage: e,
15
16
  onShowContent: t,
16
17
  confirmationFrames: c,
17
18
  isConfirmationVisible: m,
18
19
  ref: M
19
20
  }) => {
20
- const r = $(null), n = $(null), [p, i] = g(!1), [f, d] = g(m);
21
+ const r = T(null), u = T(null), [p, i] = $(!1), [f, d] = $(m);
21
22
  o(() => () => {
22
- n.current && clearTimeout(n.current);
23
+ u.current && clearTimeout(u.current);
23
24
  }, []), o(() => {
24
25
  d(m);
25
26
  }, [m]), o(() => {
26
27
  i(!0), t(!0);
27
- }, [u, t]);
28
- const h = N(() => {
28
+ }, [n, t]);
29
+ const v = N(() => {
29
30
  var a, A;
30
- (a = r.current) == null || a.playSegments(x.INITIAL, !0);
31
+ (a = r.current) == null || a.playSegments(E.INITIAL, !0);
31
32
  const s = () => {
32
- var I, T;
33
- (I = r.current) == null || I.removeEventListener("complete", s), i(!0), t(!0), (T = r.current) == null || T.playSegments(x.FINAL, !0);
33
+ var g, I;
34
+ (g = r.current) == null || g.removeEventListener("complete", s), i(!0), t(!0), (I = r.current) == null || I.playSegments(E.FINAL, !0);
34
35
  };
35
36
  (A = r.current) == null || A.addEventListener("complete", s);
36
37
  }, [t]);
@@ -38,21 +39,21 @@ const F = {
38
39
  M,
39
40
  () => ({
40
41
  fadeOutMessage: () => new Promise((s) => {
41
- t(!1), n.current = setTimeout(() => {
42
+ t(!1), u.current = setTimeout(() => {
42
43
  i(!1), s();
43
44
  }, L);
44
45
  }),
45
46
  playConfirmationFrames: () => new Promise((s) => {
46
47
  var a;
47
- (a = r.current) == null || a.playSegments(c, !0), e && i(!1), n.current = setTimeout(() => {
48
+ (a = r.current) == null || a.playSegments(c, !0), e && i(!1), u.current = setTimeout(() => {
48
49
  e && d(!0), i(!0), s();
49
50
  }, L);
50
51
  })
51
52
  }),
52
53
  [c, e, t]
53
54
  );
54
- const b = V(() => f && e ? e : u, [f, e, u]);
55
- return /* @__PURE__ */ v(
55
+ const y = V(() => f && e ? e : n, [f, e, n]);
56
+ return /* @__PURE__ */ b(
56
57
  j,
57
58
  {
58
59
  $flexDirection: "row",
@@ -60,18 +61,18 @@ const F = {
60
61
  $alignItems: "center",
61
62
  $flexColumnGapX: 0.5,
62
63
  children: [
63
- /* @__PURE__ */ l(E, { $width: 80, $height: 80, children: /* @__PURE__ */ l(
64
+ /* @__PURE__ */ l(x, { $width: 80, $height: 80, children: /* @__PURE__ */ l(
64
65
  O,
65
66
  {
66
67
  width: 80,
67
68
  height: 80,
68
69
  src: _.ANIMATED_AVATAR,
69
70
  ref: r,
70
- onRender: h,
71
+ onRender: v,
71
72
  settings: F
72
73
  }
73
74
  ) }),
74
- p && /* @__PURE__ */ l(E, { $flex: 1, children: /* @__PURE__ */ l(
75
+ p && /* @__PURE__ */ l(x, { $flex: 1, children: /* @__PURE__ */ l(
75
76
  C,
76
77
  {
77
78
  $gutterX: 1,
@@ -79,14 +80,14 @@ const F = {
79
80
  $background: "BLACK_3",
80
81
  $borderColor: "BLACK_5",
81
82
  isVisible: p,
82
- children: /* @__PURE__ */ l(D, { $renderAs: "ab2", $color: "WHITE", $whiteSpace: "pre-line", children: b })
83
+ children: /* @__PURE__ */ l(D, { text: y, speed: 20 })
83
84
  }
84
85
  ) })
85
86
  ]
86
87
  }
87
88
  );
88
- }, K = y(S);
89
+ }, H = h(X);
89
90
  export {
90
- K as default
91
+ H as default
91
92
  };
92
93
  //# sourceMappingURL=animated-avatar-message.js.map
package/dist/features/auth/comps/animated-avatar-message/animated-avatar-message.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"animated-avatar-message.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { IAnimatedAvatarMessageProps } from './animated-avatar-message-types';\n\nimport {\n useCallback,\n useImperativeHandle,\n useRef,\n useState,\n useEffect,\n type FC,\n useMemo,\n memo,\n} from 'react';\n\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport { ANIMATION_SEGMENTS, FADE_TIMEOUT } from './animated-avatar-message-constants';\nimport * as Styled from './animated-avatar-message-styled';\n\nconst animationSettings = {\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n};\n\nconst AnimatedAvatarMessage: FC<IAnimatedAvatarMessageProps> = ({\n message,\n confirmationMessage,\n onShowContent,\n confirmationFrames,\n isConfirmationVisible,\n ref,\n}) => {\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const [isMessageVisible, setIsMessageVisible] = useState(false);\n const [isConfirmationMessageVisible, setIsConfirmationMessageVisible] =\n useState(isConfirmationVisible);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, []);\n\n useEffect(() => {\n setIsConfirmationMessageVisible(isConfirmationVisible);\n }, [isConfirmationVisible]);\n\n useEffect(() => {\n setIsMessageVisible(true);\n onShowContent(true);\n }, [message, onShowContent]);\n\n const handleLottieRender = useCallback(() => {\n animationRef.current?.playSegments(ANIMATION_SEGMENTS.INITIAL, true);\n const onComplete = () => {\n animationRef.current?.removeEventListener('complete', onComplete);\n setIsMessageVisible(true);\n onShowContent(true);\n\n animationRef.current?.playSegments(ANIMATION_SEGMENTS.FINAL, true);\n };\n\n animationRef.current?.addEventListener('complete', onComplete);\n }, [onShowContent]);\n\n useImperativeHandle(\n ref,\n () => ({\n fadeOutMessage: () =>\n new Promise<void>(resolve => {\n onShowContent(false);\n timeoutRef.current = setTimeout(() => {\n setIsMessageVisible(false);\n resolve();\n }, FADE_TIMEOUT);\n }),\n\n playConfirmationFrames: () =>\n new Promise<void>(resolve => {\n animationRef.current?.playSegments(confirmationFrames, true);\n if (confirmationMessage) {\n setIsMessageVisible(false);\n }\n timeoutRef.current = setTimeout(() => {\n if (confirmationMessage) {\n setIsConfirmationMessageVisible(true);\n }\n setIsMessageVisible(true);\n resolve();\n }, FADE_TIMEOUT);\n }),\n }),\n [confirmationFrames, confirmationMessage, onShowContent],\n );\n\n const displayMessage = useMemo(() => {\n return isConfirmationMessageVisible && confirmationMessage ? confirmationMessage : message;\n }, [isConfirmationMessageVisible, confirmationMessage, message]);\n\n return (\n <Styled.Wrapper\n $flexDirection=\"row\"\n $justifyContent=\"flex-start\"\n $alignItems=\"center\"\n $flexColumnGapX={0.5}\n >\n <FlexView $width={80} $height={80}>\n <LottieAnimation\n width={80}\n height={80}\n src={LOTTIE.ANIMATED_AVATAR}\n ref={animationRef}\n onRender={handleLottieRender}\n settings={animationSettings}\n />\n </FlexView>\n {isMessageVisible && (\n <FlexView $flex={1}>\n <Styled.MessageWrapper\n $gutterX={1}\n $gapX={0.5}\n $background=\"BLACK_3\"\n $borderColor=\"BLACK_5\"\n isVisible={isMessageVisible}\n >\n <Styled.AnimatedText $renderAs=\"ab2\" $color=\"WHITE\" $whiteSpace=\"pre-line\">\n {displayMessage}\n </Styled.AnimatedText>\n </Styled.MessageWrapper>\n </FlexView>\n )}\n </Styled.Wrapper>\n );\n};\n\nexport default memo(AnimatedAvatarMessage);\n"],"names":["animationSettings","AnimatedAvatarMessage","message","confirmationMessage","onShowContent","confirmationFrames","isConfirmationVisible","ref","animationRef","useRef","timeoutRef","isMessageVisible","setIsMessageVisible","useState","isConfirmationMessageVisible","setIsConfirmationMessageVisible","useEffect","handleLottieRender","useCallback","_a","ANIMATION_SEGMENTS","onComplete","_b","useImperativeHandle","resolve","FADE_TIMEOUT","displayMessage","useMemo","jsxs","Styled.Wrapper","jsx","FlexView","LottieAnimation","LOTTIE","Styled.MessageWrapper","Styled.AnimatedText","animatedAvatarMessage","memo"],"mappings":"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"}
1
+ {"version":3,"file":"animated-avatar-message.js","sources":["../../../../../src/features/auth/comps/animated-avatar-message/animated-avatar-message.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { IAnimatedAvatarMessageProps } from './animated-avatar-message-types';\n\nimport {\n useCallback,\n useImperativeHandle,\n useRef,\n useState,\n useEffect,\n type FC,\n useMemo,\n memo,\n} from 'react';\n\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport { ANIMATION_SEGMENTS, FADE_TIMEOUT } from './animated-avatar-message-constants';\nimport * as Styled from './animated-avatar-message-styled';\nimport AnimatedText from './animated-text/animated-text';\n\nconst animationSettings = {\n autoplay: false,\n loop: false,\n renderer: 'canvas',\n};\n\nconst AnimatedAvatarMessage: FC<IAnimatedAvatarMessageProps> = ({\n message,\n confirmationMessage,\n onShowContent,\n confirmationFrames,\n isConfirmationVisible,\n ref,\n}) => {\n const animationRef = useRef<ILottieAnimationRef | null>(null);\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n const [isMessageVisible, setIsMessageVisible] = useState(false);\n const [isConfirmationMessageVisible, setIsConfirmationMessageVisible] =\n useState(isConfirmationVisible);\n\n useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current);\n }\n };\n }, []);\n\n useEffect(() => {\n setIsConfirmationMessageVisible(isConfirmationVisible);\n }, [isConfirmationVisible]);\n\n useEffect(() => {\n setIsMessageVisible(true);\n onShowContent(true);\n }, [message, onShowContent]);\n\n const handleLottieRender = useCallback(() => {\n animationRef.current?.playSegments(ANIMATION_SEGMENTS.INITIAL, true);\n const onComplete = () => {\n animationRef.current?.removeEventListener('complete', onComplete);\n setIsMessageVisible(true);\n onShowContent(true);\n\n animationRef.current?.playSegments(ANIMATION_SEGMENTS.FINAL, true);\n };\n\n animationRef.current?.addEventListener('complete', onComplete);\n }, [onShowContent]);\n\n useImperativeHandle(\n ref,\n () => ({\n fadeOutMessage: () =>\n new Promise<void>(resolve => {\n onShowContent(false);\n timeoutRef.current = setTimeout(() => {\n setIsMessageVisible(false);\n resolve();\n }, FADE_TIMEOUT);\n }),\n\n playConfirmationFrames: () =>\n new Promise<void>(resolve => {\n animationRef.current?.playSegments(confirmationFrames, true);\n if (confirmationMessage) {\n setIsMessageVisible(false);\n }\n timeoutRef.current = setTimeout(() => {\n if (confirmationMessage) {\n setIsConfirmationMessageVisible(true);\n }\n setIsMessageVisible(true);\n resolve();\n }, FADE_TIMEOUT);\n }),\n }),\n [confirmationFrames, confirmationMessage, onShowContent],\n );\n\n const displayMessage = useMemo(() => {\n return isConfirmationMessageVisible && confirmationMessage ? confirmationMessage : message;\n }, [isConfirmationMessageVisible, confirmationMessage, message]);\n\n return (\n <Styled.Wrapper\n $flexDirection=\"row\"\n $justifyContent=\"flex-start\"\n $alignItems=\"center\"\n $flexColumnGapX={0.5}\n >\n <FlexView $width={80} $height={80}>\n <LottieAnimation\n width={80}\n height={80}\n src={LOTTIE.ANIMATED_AVATAR}\n ref={animationRef}\n onRender={handleLottieRender}\n settings={animationSettings}\n />\n </FlexView>\n {isMessageVisible && (\n <FlexView $flex={1}>\n <Styled.MessageWrapper\n $gutterX={1}\n $gapX={0.5}\n $background=\"BLACK_3\"\n $borderColor=\"BLACK_5\"\n isVisible={isMessageVisible}\n >\n <AnimatedText text={displayMessage} speed={20} />\n </Styled.MessageWrapper>\n </FlexView>\n )}\n </Styled.Wrapper>\n );\n};\n\nexport default memo(AnimatedAvatarMessage);\n"],"names":["animationSettings","AnimatedAvatarMessage","message","confirmationMessage","onShowContent","confirmationFrames","isConfirmationVisible","ref","animationRef","useRef","timeoutRef","isMessageVisible","setIsMessageVisible","useState","isConfirmationMessageVisible","setIsConfirmationMessageVisible","useEffect","handleLottieRender","useCallback","_a","ANIMATION_SEGMENTS","onComplete","_b","useImperativeHandle","resolve","FADE_TIMEOUT","displayMessage","useMemo","jsxs","Styled.Wrapper","jsx","FlexView","LottieAnimation","LOTTIE","Styled.MessageWrapper","AnimatedText","animatedAvatarMessage","memo"],"mappings":"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"}
package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.js ADDED
@@ -0,0 +1,10 @@
1
+ import r from "styled-components";
2
+ import e from "../../../../ui/text/text.js";
3
+ const p = r(e)`
4
+ white-space: pre-wrap;
5
+ word-break: break-word;
6
+ `;
7
+ export {
8
+ p as AnimatedText
9
+ };
10
+ //# sourceMappingURL=animated-text-styled.js.map
package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"animated-text-styled.js","sources":["../../../../../../src/features/auth/comps/animated-avatar-message/animated-text/animated-text-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport Text from '../../../../ui/text/text';\n\nexport const AnimatedText = styled(Text)`\n white-space: pre-wrap;\n word-break: break-word;\n`;\n"],"names":["AnimatedText","styled","Text"],"mappings":";;AAIa,MAAAA,IAAeC,EAAOC,CAAI;AAAA;AAAA;AAAA;"}
package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js ADDED
@@ -0,0 +1,17 @@
1
+ import { jsx as i } from "react/jsx-runtime";
2
+ import { memo as o, useState as l, useEffect as m } from "react";
3
+ import { AnimatedText as c } from "./animated-text-styled.js";
4
+ const f = ({ text: e, speed: r = 30 }) => {
5
+ const [s, n] = l(0);
6
+ return m(() => {
7
+ n(0);
8
+ const a = setInterval(() => {
9
+ n((t) => t >= e.length ? (clearInterval(a), t) : t + 1);
10
+ }, r);
11
+ return () => clearInterval(a);
12
+ }, [e, r]), /* @__PURE__ */ i(c, { $renderAs: "ab2", $color: "WHITE", children: e.slice(0, s) });
13
+ }, T = o(f);
14
+ export {
15
+ T as default
16
+ };
17
+ //# sourceMappingURL=animated-text.js.map
package/dist/features/auth/comps/animated-avatar-message/animated-text/animated-text.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"animated-text.js","sources":["../../../../../../src/features/auth/comps/animated-avatar-message/animated-text/animated-text.tsx"],"sourcesContent":["import type { IAnimatedTextProps } from './animated-text-types';\n\nimport React, { useEffect, useState, memo } from 'react';\n\nimport * as Styled from './animated-text-styled';\n\nconst AnimatedText: React.FC<IAnimatedTextProps> = ({ text, speed = 30 }) => {\n const [visibleChars, setVisibleChars] = useState(0);\n\n useEffect(() => {\n setVisibleChars(0);\n\n const interval = setInterval(() => {\n setVisibleChars(prev => {\n if (prev >= text.length) {\n clearInterval(interval);\n\n return prev;\n }\n\n return prev + 1;\n });\n }, speed);\n\n return () => clearInterval(interval);\n }, [text, speed]);\n\n return (\n <Styled.AnimatedText $renderAs=\"ab2\" $color=\"WHITE\">\n {text.slice(0, visibleChars)}\n </Styled.AnimatedText>\n );\n};\n\nexport default memo(AnimatedText);\n"],"names":["AnimatedText","text","speed","visibleChars","setVisibleChars","useState","useEffect","interval","prev","jsx","Styled.AnimatedText","AnimatedText$1","memo"],"mappings":";;;AAMA,MAAMA,IAA6C,CAAC,EAAE,MAAAC,GAAM,OAAAC,IAAQ,SAAS;AAC3E,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAS,CAAC;AAElD,SAAAC,EAAU,MAAM;AACd,IAAAF,EAAgB,CAAC;AAEX,UAAAG,IAAW,YAAY,MAAM;AACjC,MAAAH,EAAgB,CAAQI,MAClBA,KAAQP,EAAK,UACf,cAAcM,CAAQ,GAEfC,KAGFA,IAAO,CACf;AAAA,OACAN,CAAK;AAED,WAAA,MAAM,cAAcK,CAAQ;AAAA,EAAA,GAClC,CAACN,GAAMC,CAAK,CAAC,GAGb,gBAAAO,EAAAC,GAAA,EAAoB,WAAU,OAAM,QAAO,SACzC,UAAKT,EAAA,MAAM,GAAGE,CAAY,EAC7B,CAAA;AAEJ,GAEeQ,IAAAC,EAAKZ,CAAY;"}
package/dist/features/ui/drawer/drawer-styled.js ADDED
@@ -0,0 +1,34 @@
1
+ import o from "styled-components";
2
+ import e from "../layout/flex-view.js";
3
+ const a = o.div`
4
+ position: fixed;
5
+ top: 0;
6
+ bottom: 0;
7
+ left: ${({ $position: t }) => t === "left" ? 0 : "auto"};
8
+ right: ${({ $position: t }) => t === "right" ? 0 : "auto"};
9
+ width: 100%;
10
+ height: 100%;
11
+ z-index: ${({ $zIndex: t }) => t ?? 999};
12
+ pointer-events: ${({ $isOpen: t }) => t ? "auto" : "none"};
13
+ `, s = o(e)`
14
+ position: absolute;
15
+ top: 0;
16
+ bottom: 0;
17
+ ${({ $position: t }) => t === "left" ? "left: 0;" : "right: 0;"}
18
+ width: ${({ $drawerWidth: t }) => typeof t == "number" ? `${t}px` : t};
19
+ transform: ${({ $isOpen: t, $position: i }) => t ? "translateX(0)" : i === "left" ? "translateX(-100%)" : "translateX(100%)"};
20
+ transition: transform 0.3s ease-in-out;
21
+ height: 100%;
22
+ `, p = o(e)`
23
+ position: absolute;
24
+ inset: 0;
25
+ backdrop-filter: blur(40px);
26
+ opacity: ${({ $isOpen: t }) => t ? 1 : 0};
27
+ transition: opacity 0.3s ease-in-out;
28
+ `;
29
+ export {
30
+ p as DrawerBackdrop,
31
+ a as DrawerContainer,
32
+ s as DrawerPanel
33
+ };
34
+ //# sourceMappingURL=drawer-styled.js.map
package/dist/features/ui/drawer/drawer-styled.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"drawer-styled.js","sources":["../../../../src/features/ui/drawer/drawer-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\n\ninterface DrawerContainerProps {\n $isOpen: boolean;\n $position: 'left' | 'right';\n $zIndex?: number;\n}\n\ninterface DrawerPanelProps extends DrawerContainerProps {\n $drawerWidth: number | string;\n}\n\nexport const DrawerContainer = styled.div<DrawerContainerProps>`\n position: fixed;\n top: 0;\n bottom: 0;\n left: ${({ $position }) => ($position === 'left' ? 0 : 'auto')};\n right: ${({ $position }) => ($position === 'right' ? 0 : 'auto')};\n width: 100%;\n height: 100%;\n z-index: ${({ $zIndex }) => $zIndex ?? 999};\n pointer-events: ${({ $isOpen }) => ($isOpen ? 'auto' : 'none')};\n`;\n\nexport const DrawerPanel = styled(FlexView)<DrawerPanelProps>`\n position: absolute;\n top: 0;\n bottom: 0;\n ${({ $position }) => ($position === 'left' ? 'left: 0;' : 'right: 0;')}\n width: ${({ $drawerWidth }) =>\n typeof $drawerWidth === 'number' ? `${$drawerWidth}px` : $drawerWidth};\n transform: ${({ $isOpen, $position }) =>\n $isOpen ? 'translateX(0)' : $position === 'left' ? 'translateX(-100%)' : 'translateX(100%)'};\n transition: transform 0.3s ease-in-out;\n height: 100%;\n`;\n\nexport const DrawerBackdrop = styled(FlexView)<{ $isOpen: boolean }>`\n position: absolute;\n inset: 0;\n backdrop-filter: blur(40px);\n opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};\n transition: opacity 0.3s ease-in-out;\n`;\n"],"names":["DrawerContainer","styled","$position","$zIndex","$isOpen","DrawerPanel","FlexView","$drawerWidth","DrawerBackdrop"],"mappings":";;AAcO,MAAMA,IAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA,UAI5B,CAAC,EAAE,WAAAC,QAAiBA,MAAc,SAAS,IAAI,MAAO;AAAA,WACrD,CAAC,EAAE,WAAAA,QAAiBA,MAAc,UAAU,IAAI,MAAO;AAAA;AAAA;AAAA,aAGrD,CAAC,EAAE,SAAAC,QAAcA,KAAW,GAAG;AAAA,oBACxB,CAAC,EAAE,SAAAC,EAAA,MAAeA,IAAU,SAAS,MAAO;AAAA,GAGnDC,IAAcJ,EAAOK,CAAQ;AAAA;AAAA;AAAA;AAAA,IAItC,CAAC,EAAE,WAAAJ,QAAiBA,MAAc,SAAS,aAAa,WAAY;AAAA,WAC7D,CAAC,EAAE,cAAAK,EACV,MAAA,OAAOA,KAAiB,WAAW,GAAGA,CAAY,OAAOA,CAAY;AAAA,eAC1D,CAAC,EAAE,SAAAH,GAAS,WAAAF,QACvBE,IAAU,kBAAkBF,MAAc,SAAS,sBAAsB,kBAAkB;AAAA;AAAA;AAAA,GAKlFM,IAAiBP,EAAOK,CAAQ;AAAA;AAAA;AAAA;AAAA,aAIhC,CAAC,EAAE,SAAAF,EAAA,MAAeA,IAAU,IAAI,CAAE;AAAA;AAAA;"}
package/dist/features/ui/drawer/drawer.js ADDED
@@ -0,0 +1,42 @@
1
+ import { jsxs as s, jsx as c } from "react/jsx-runtime";
2
+ import { memo as $, useRef as w, useEffect as k } from "react";
3
+ import { DrawerContainer as D, DrawerBackdrop as _, DrawerPanel as p } from "./drawer-styled.js";
4
+ const E = $(
5
+ ({ isOpen: r, onClose: e, children: i, drawerWidth: o = 300, position: n = "left", zIndex: u, theme: m = "dark" }) => {
6
+ const t = w(null);
7
+ k(() => {
8
+ const d = (f) => {
9
+ t.current && !t.current.contains(f.target) && (e == null || e());
10
+ };
11
+ return r && document.addEventListener("mousedown", d), () => {
12
+ document.removeEventListener("mousedown", d);
13
+ };
14
+ }, [r, e]);
15
+ const a = m === "dark";
16
+ return /* @__PURE__ */ s(D, { $isOpen: r, $position: n, $zIndex: u, children: [
17
+ /* @__PURE__ */ c(
18
+ _,
19
+ {
20
+ $isOpen: r,
21
+ onClick: e,
22
+ $background: a ? "WHITE_T_10" : "BLACK_T_38"
23
+ }
24
+ ),
25
+ /* @__PURE__ */ c(
26
+ p,
27
+ {
28
+ ref: t,
29
+ $isOpen: r,
30
+ $position: n,
31
+ $drawerWidth: o,
32
+ $background: a ? "BLACK_3" : "WHITE_3",
33
+ children: i
34
+ }
35
+ )
36
+ ] });
37
+ }
38
+ ), L = E;
39
+ export {
40
+ L as default
41
+ };
42
+ //# sourceMappingURL=drawer.js.map
package/dist/features/ui/drawer/drawer.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"drawer.js","sources":["../../../../src/features/ui/drawer/drawer.tsx"],"sourcesContent":["import type { IDrawerProps } from './drawer-types';\nimport type { FC } from 'react';\n\nimport { memo, useEffect, useRef } from 'react';\n\nimport * as Styled from './drawer-styled';\n\nconst Drawer: FC<IDrawerProps> = memo(\n ({ isOpen, onClose, children, drawerWidth = 300, position = 'left', zIndex, theme = 'dark' }) => {\n const drawerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const handleClickOutside = (e: MouseEvent) => {\n if (drawerRef.current && !drawerRef.current.contains(e.target as Node)) {\n onClose?.();\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n }\n\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [isOpen, onClose]);\n\n const isDarkTheme = theme === 'dark';\n\n return (\n <Styled.DrawerContainer $isOpen={isOpen} $position={position} $zIndex={zIndex}>\n <Styled.DrawerBackdrop\n $isOpen={isOpen}\n onClick={onClose}\n $background={isDarkTheme ? 'WHITE_T_10' : 'BLACK_T_38'}\n />\n <Styled.DrawerPanel\n ref={drawerRef}\n $isOpen={isOpen}\n $position={position}\n $drawerWidth={drawerWidth}\n $background={isDarkTheme ? 'BLACK_3' : 'WHITE_3'}\n >\n {children}\n </Styled.DrawerPanel>\n </Styled.DrawerContainer>\n );\n },\n);\n\nexport default Drawer;\n"],"names":["Drawer","memo","isOpen","onClose","children","drawerWidth","position","zIndex","theme","drawerRef","useRef","useEffect","handleClickOutside","e","isDarkTheme","jsxs","Styled.DrawerContainer","jsx","Styled.DrawerBackdrop","Styled.DrawerPanel","Drawer$1"],"mappings":";;;AAOA,MAAMA,IAA2BC;AAAA,EAC/B,CAAC,EAAE,QAAAC,GAAQ,SAAAC,GAAS,UAAAC,GAAU,aAAAC,IAAc,KAAK,UAAAC,IAAW,QAAQ,QAAAC,GAAQ,OAAAC,IAAQ,OAAA,MAAa;AACzF,UAAAC,IAAYC,EAAuB,IAAI;AAE7C,IAAAC,EAAU,MAAM;AACR,YAAAC,IAAqB,CAACC,MAAkB;AACxC,QAAAJ,EAAU,WAAW,CAACA,EAAU,QAAQ,SAASI,EAAE,MAAc,MACzDV,KAAA,QAAAA;AAAA,MACZ;AAGF,aAAID,KACO,SAAA,iBAAiB,aAAaU,CAAkB,GAGpD,MAAM;AACF,iBAAA,oBAAoB,aAAaA,CAAkB;AAAA,MAAA;AAAA,IAC9D,GACC,CAACV,GAAQC,CAAO,CAAC;AAEpB,UAAMW,IAAcN,MAAU;AAG5B,WAAA,gBAAAO,EAACC,GAAA,EAAuB,SAASd,GAAQ,WAAWI,GAAU,SAASC,GACrE,UAAA;AAAA,MAAA,gBAAAU;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,SAAShB;AAAA,UACT,SAASC;AAAA,UACT,aAAaW,IAAc,eAAe;AAAA,QAAA;AAAA,MAC5C;AAAA,MACA,gBAAAG;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,KAAKV;AAAA,UACL,SAASP;AAAA,UACT,WAAWI;AAAA,UACX,cAAcD;AAAA,UACd,aAAaS,IAAc,YAAY;AAAA,UAEtC,UAAAV;AAAA,QAAA;AAAA,MACH;AAAA,IACF,EAAA,CAAA;AAAA,EAEJ;AACF,GAEAgB,IAAepB;"}
package/dist/index.d.ts CHANGED
@@ -364,6 +364,8 @@ export declare const DraftIcon: React.FC<React.SVGProps<SVGSVGElement>>;
364
364
 
365
365
  export declare const DragIcon: React.FC<React.SVGProps<SVGSVGElement>>;
366
366
 
367
+ export declare const Drawer: FC<IDrawerProps>;
368
+
367
369
  export declare const DynamicPreviewWorksheet: FC<IDynamicWorksheetPreview>;
368
370
 
369
371
  export declare enum EClassTimeAlertLevel {
@@ -1399,6 +1401,16 @@ declare interface IDigitalMeterProps {
1399
1401
  actAsTimer?: boolean;
1400
1402
  }
1401
1403
 
1404
+ declare interface IDrawerProps {
1405
+ isOpen: boolean;
1406
+ onClose?: () => void;
1407
+ children: ReactNode;
1408
+ drawerWidth?: number | string;
1409
+ position?: 'left' | 'right';
1410
+ zIndex?: number;
1411
+ theme: 'light' | 'dark';
1412
+ }
1413
+
1402
1414
  declare interface IDynamicWorksheetPreview {
1403
1415
  studentId: string;
1404
1416
  userNodeId: string;