@cuemath/leap 3.2.17-j1 → 3.2.17-j2
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/comps/pill-button/pill-button-styled.js +11 -11
- package/dist/features/auth/comps/pill-button/pill-button-styled.js.map +1 -1
- package/dist/features/auth/comps/pill-button/pill-button.js +28 -29
- package/dist/features/auth/comps/pill-button/pill-button.js.map +1 -1
- package/package.json +1 -1
@@ -1,10 +1,10 @@
|
|
1
|
-
import n, { css as
|
2
|
-
import
|
1
|
+
import n, { css as p } from "styled-components";
|
2
|
+
import a from "../../../ui/layout/flex-view.js";
|
3
3
|
import $ from "../../../ui/text/text.js";
|
4
4
|
const T = n.button`
|
5
|
-
${({ selected: o, disabled: r, width:
|
6
|
-
const c = r ?
|
7
|
-
return
|
5
|
+
${({ selected: o, disabled: r, width: t, height: l, borderColor: s, theme: i }) => {
|
6
|
+
const c = r ? i.colors.WHITE_T_10 : o ? i.colors.WHITE_1 : i.colors.BLACK_1, e = r ? i.colors.WHITE_T_15 : s;
|
7
|
+
return p`
|
8
8
|
position: relative;
|
9
9
|
display: inline-flex;
|
10
10
|
align-items: center;
|
@@ -13,16 +13,16 @@ const T = n.button`
|
|
13
13
|
transition: all 0.3s ease;
|
14
14
|
padding: 7.5px 16px;
|
15
15
|
border-radius: 40px;
|
16
|
-
border: 1px solid ${
|
17
|
-
width: ${
|
16
|
+
border: 1px solid ${e};
|
17
|
+
width: ${t ? `${t}` : "auto"}${typeof t == "number" ? "px" : ""};
|
18
18
|
height: ${l ? `${l}px` : "auto"};
|
19
19
|
background-color: ${c};
|
20
20
|
&:hover {
|
21
|
-
background-color: ${!o && !r ?
|
21
|
+
background-color: ${!o && !r ? i.colors.WHITE_T_10 : void 0};
|
22
22
|
}
|
23
23
|
`;
|
24
24
|
}}
|
25
|
-
`, d = n(
|
25
|
+
`, d = n(a)`
|
26
26
|
visibility: ${({ $showLottie: o }) => o ? "visible" : "hidden"};
|
27
27
|
`, f = n($)`
|
28
28
|
transition: all 0.3s ease-in-out;
|
@@ -32,8 +32,8 @@ const T = n.button`
|
|
32
32
|
left: ${o ? "0" : "-10px"};
|
33
33
|
`};
|
34
34
|
|
35
|
-
${({ selected: o, disabled: r, theme:
|
36
|
-
color: ${r ?
|
35
|
+
${({ selected: o, disabled: r, theme: t, textColor: l }) => `
|
36
|
+
color: ${r ? t.colors.WHITE_T_38 : o ? t.colors.BLACK_1 : l};
|
37
37
|
`};
|
38
38
|
`;
|
39
39
|
export {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"pill-button-styled.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button-styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nexport const Wrapper = styled.button<{\n selected: boolean;\n disabled: boolean;\n width?: number;\n height?: number;\n borderColor?: string;\n}>`\n ${({ selected, disabled, width, height, borderColor, theme }) => {\n const defaultBgColor = disabled\n ? theme.colors.WHITE_T_10\n : selected\n ? theme.colors.WHITE_1\n : theme.colors.BLACK_1;\n\n const borderColorVal = disabled ? theme.colors.WHITE_T_15 : borderColor;\n\n return css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n transition: all 0.3s ease;\n padding: 7.5px 16px;\n border-radius: 40px;\n border: 1px solid ${borderColorVal};\n width: ${width ? `${width}
|
1
|
+
{"version":3,"file":"pill-button-styled.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button-styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nexport const Wrapper = styled.button<{\n selected: boolean;\n disabled: boolean;\n width?: number | string;\n height?: number;\n borderColor?: string;\n}>`\n ${({ selected, disabled, width, height, borderColor, theme }) => {\n const defaultBgColor = disabled\n ? theme.colors.WHITE_T_10\n : selected\n ? theme.colors.WHITE_1\n : theme.colors.BLACK_1;\n\n const borderColorVal = disabled ? theme.colors.WHITE_T_15 : borderColor;\n\n return css`\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n transition: all 0.3s ease;\n padding: 7.5px 16px;\n border-radius: 40px;\n border: 1px solid ${borderColorVal};\n width: ${width ? `${width}` : 'auto'}${typeof width === 'number' ? 'px' : ''};\n height: ${height ? `${height}px` : 'auto'};\n background-color: ${defaultBgColor};\n &:hover {\n background-color: ${!selected && !disabled ? theme.colors.WHITE_T_10 : undefined};\n }\n `;\n }}\n`;\n\nexport const IconWrapper = styled(FlexView)<{\n $showLottie: boolean;\n}>`\n visibility: ${({ $showLottie }) => ($showLottie ? 'visible' : 'hidden')};\n`;\n\nexport const Label = styled(Text)<{\n selected: boolean;\n disabled: boolean;\n shouldOffsetLabel: boolean;\n textColor: string;\n}>`\n transition: all 0.3s ease-in-out;\n position: relative;\n\n ${({ shouldOffsetLabel }) => `\n left: ${shouldOffsetLabel ? '0' : '-10px'};\n `};\n\n ${({ selected, disabled, theme, textColor }) => `\n color: ${disabled ? theme.colors.WHITE_T_38 : selected ? theme.colors.BLACK_1 : textColor};\n `};\n`;\n"],"names":["Wrapper","styled","selected","disabled","width","height","borderColor","theme","defaultBgColor","borderColorVal","css","IconWrapper","FlexView","$showLottie","Label","Text","shouldOffsetLabel","textColor"],"mappings":";;;AAKO,MAAMA,IAAUC,EAAO;AAAA,IAO1B,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,QAAAC,GAAQ,aAAAC,GAAa,OAAAC,QAAY;AACzD,QAAAC,IAAiBL,IACnBI,EAAM,OAAO,aACbL,IACEK,EAAM,OAAO,UACbA,EAAM,OAAO,SAEbE,IAAiBN,IAAWI,EAAM,OAAO,aAAaD;AAErD,SAAAI;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKKP,IAAW,gBAAgB,SAAS;AAAA;AAAA;AAAA;AAAA,0BAI1BM,CAAc;AAAA,eACzBL,IAAQ,GAAGA,CAAK,KAAK,MAAM,GAAG,OAAOA,KAAU,WAAW,OAAO,EAAE;AAAA,gBAClEC,IAAS,GAAGA,CAAM,OAAO,MAAM;AAAA,0BACrBG,CAAc;AAAA;AAAA,4BAEZ,CAACN,KAAY,CAACC,IAAWI,EAAM,OAAO,aAAa,MAAS;AAAA;AAAA;AAGtF,CAAC;AAAA,GAGUI,IAAcV,EAAOW,CAAQ;AAAA,gBAG1B,CAAC,EAAE,aAAAC,EAAA,MAAmBA,IAAc,YAAY,QAAS;AAAA,GAG5DC,IAAQb,EAAOc,CAAI;AAAA;AAAA;AAAA;AAAA,IAS5B,CAAC,EAAE,mBAAAC,EAAA,MAAwB;AAAA,YACnBA,IAAoB,MAAM,OAAO;AAAA,GAC1C;AAAA;AAAA,IAEC,CAAC,EAAE,UAAAd,GAAU,UAAAC,GAAU,OAAAI,GAAO,WAAAU,EAAgB,MAAA;AAAA,aACrCd,IAAWI,EAAM,OAAO,aAAaL,IAAWK,EAAM,OAAO,UAAUU,CAAS;AAAA,GAC1F;AAAA;"}
|
@@ -1,15 +1,15 @@
|
|
1
|
-
import { jsx as o, jsxs as
|
2
|
-
import { memo as
|
3
|
-
import { useTheme as
|
4
|
-
import
|
5
|
-
import
|
6
|
-
import
|
7
|
-
import { Wrapper as
|
8
|
-
const
|
1
|
+
import { jsx as o, jsxs as b } from "react/jsx-runtime";
|
2
|
+
import { memo as H, useState as L, useCallback as l, useEffect as M } from "react";
|
3
|
+
import { useTheme as R } from "styled-components";
|
4
|
+
import _ from "../../../ui/arrow-tooltip/arrow-tooltip.js";
|
5
|
+
import j from "../../../ui/layout/flex-view.js";
|
6
|
+
import y from "../../../ui/lottie-animation/lottie-animation.js";
|
7
|
+
import { Wrapper as B, IconWrapper as O, Label as P } from "./pill-button-styled.js";
|
8
|
+
const X = {
|
9
9
|
autoplay: !0,
|
10
10
|
loop: !0,
|
11
11
|
renderer: "canvas"
|
12
|
-
},
|
12
|
+
}, k = ({
|
13
13
|
id: i,
|
14
14
|
label: d,
|
15
15
|
selected: t = !1,
|
@@ -18,46 +18,45 @@ const k = {
|
|
18
18
|
icon: r,
|
19
19
|
onClick: a,
|
20
20
|
tooltip: c,
|
21
|
-
width:
|
21
|
+
width: A
|
22
22
|
}) => {
|
23
|
-
const [
|
23
|
+
const [g, f] = L(!1), [n, v] = L(!1), { colors: h } = R(), s = !!u, $ = l(() => {
|
24
24
|
a(i);
|
25
25
|
}, [i, a]);
|
26
|
-
|
26
|
+
M(() => {
|
27
27
|
if (!s || e) return;
|
28
28
|
const T = setInterval(() => {
|
29
|
-
|
29
|
+
v((W) => !W);
|
30
30
|
}, 1e3);
|
31
31
|
return () => clearInterval(T);
|
32
32
|
}, [e, s]);
|
33
|
-
const
|
34
|
-
|
33
|
+
const C = l(() => f(!0), []), E = l(() => f(!1), []), m = !!r && !e && (s || t || g), I = h[n ? "YELLOW_4" : "WHITE_1"], w = h[n && !t ? "YELLOW_4" : "WHITE_1"], p = n ? u : d, x = /* @__PURE__ */ o(
|
34
|
+
B,
|
35
35
|
{
|
36
36
|
selected: t,
|
37
37
|
disabled: e,
|
38
38
|
onClick: $,
|
39
|
-
onMouseEnter:
|
40
|
-
onMouseLeave:
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
B,
|
39
|
+
onMouseEnter: C,
|
40
|
+
onMouseLeave: E,
|
41
|
+
width: A,
|
42
|
+
borderColor: I,
|
43
|
+
children: /* @__PURE__ */ b(
|
44
|
+
j,
|
46
45
|
{
|
47
46
|
$flexDirection: "row",
|
48
47
|
$alignItems: "center",
|
49
48
|
$justifyContent: "center",
|
50
49
|
$flexColumnGapX: 0.25,
|
51
50
|
children: [
|
52
|
-
r && /* @__PURE__ */ o(
|
51
|
+
r && /* @__PURE__ */ o(O, { $widthX: 1, $heightX: 1, $showLottie: m, children: /* @__PURE__ */ o(y, { src: r, settings: X }) }),
|
53
52
|
/* @__PURE__ */ o(
|
54
|
-
|
53
|
+
P,
|
55
54
|
{
|
56
55
|
shouldOffsetLabel: m || !r,
|
57
56
|
selected: t,
|
58
57
|
disabled: e,
|
59
|
-
$renderAs:
|
60
|
-
textColor:
|
58
|
+
$renderAs: n ? t ? "ub3-bold" : "ub3" : t ? "ub2-bold" : "ub2",
|
59
|
+
textColor: w,
|
61
60
|
children: p
|
62
61
|
},
|
63
62
|
p
|
@@ -67,9 +66,9 @@ const k = {
|
|
67
66
|
)
|
68
67
|
}
|
69
68
|
);
|
70
|
-
return e && c ? /* @__PURE__ */ o(
|
71
|
-
},
|
69
|
+
return e && c ? /* @__PURE__ */ o(_, { renderAs: "primary", tooltipItem: c, position: "top", children: x }) : x;
|
70
|
+
}, K = H(k);
|
72
71
|
export {
|
73
|
-
|
72
|
+
K as default
|
74
73
|
};
|
75
74
|
//# sourceMappingURL=pill-button.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"pill-button.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button.tsx"],"sourcesContent":["import type { IPillButtonProps } from './pill-button-types';\n\nimport { useCallback, useEffect, useState, type FC, memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './pill-button-styled';\n\nconst lottieSettings = {\n autoplay: true,\n loop: true,\n renderer: 'canvas',\n};\n\nconst PillButton: FC<IPillButtonProps> = ({\n id,\n label,\n selected = false,\n disabled = false,\n animatedLabel = '',\n icon,\n onClick,\n tooltip,\n width,\n}) => {\n const [isHovered, setHovered] = useState(false);\n const [highlightPhase, setHighlightPhase] = useState(false);\n const { colors } = useTheme();\n const shouldAnimate = !!animatedLabel;\n\n const handleClick = useCallback(() => {\n onClick(id);\n }, [id, onClick]);\n\n useEffect(() => {\n if (!shouldAnimate || disabled) return;\n\n const interval = setInterval(() => {\n setHighlightPhase(prev => !prev);\n }, 1000);\n\n return () => clearInterval(interval);\n }, [disabled, shouldAnimate]);\n\n const handleMouseEnter = useCallback(() => setHovered(true), []);\n const handleMouseLeave = useCallback(() => setHovered(false), []);\n\n const showLottie = !!icon && !disabled && (shouldAnimate || selected || isHovered);\n\n const borderColor = colors[highlightPhase ? 'YELLOW_4' : 'WHITE_1'];\n const textColor = colors[highlightPhase && !selected ? 'YELLOW_4' : 'WHITE_1'];\n const currentLabel = highlightPhase ? animatedLabel : label;\n const defaultTextRenderAs = selected ? 'ub2-bold' : 'ub2';\n const textRenderAs = highlightPhase ? (selected ? 'ub3-bold' : 'ub3') : defaultTextRenderAs;\n\n const ButtonContent = (\n <Styled.Wrapper\n selected={selected}\n disabled={disabled}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n
|
1
|
+
{"version":3,"file":"pill-button.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button.tsx"],"sourcesContent":["import type { IPillButtonProps } from './pill-button-types';\n\nimport { useCallback, useEffect, useState, type FC, memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './pill-button-styled';\n\nconst lottieSettings = {\n autoplay: true,\n loop: true,\n renderer: 'canvas',\n};\n\nconst PillButton: FC<IPillButtonProps> = ({\n id,\n label,\n selected = false,\n disabled = false,\n animatedLabel = '',\n icon,\n onClick,\n tooltip,\n width,\n}) => {\n const [isHovered, setHovered] = useState(false);\n const [highlightPhase, setHighlightPhase] = useState(false);\n const { colors } = useTheme();\n const shouldAnimate = !!animatedLabel;\n\n const handleClick = useCallback(() => {\n onClick(id);\n }, [id, onClick]);\n\n useEffect(() => {\n if (!shouldAnimate || disabled) return;\n\n const interval = setInterval(() => {\n setHighlightPhase(prev => !prev);\n }, 1000);\n\n return () => clearInterval(interval);\n }, [disabled, shouldAnimate]);\n\n const handleMouseEnter = useCallback(() => setHovered(true), []);\n const handleMouseLeave = useCallback(() => setHovered(false), []);\n\n const showLottie = !!icon && !disabled && (shouldAnimate || selected || isHovered);\n\n const borderColor = colors[highlightPhase ? 'YELLOW_4' : 'WHITE_1'];\n const textColor = colors[highlightPhase && !selected ? 'YELLOW_4' : 'WHITE_1'];\n const currentLabel = highlightPhase ? animatedLabel : label;\n const defaultTextRenderAs = selected ? 'ub2-bold' : 'ub2';\n const textRenderAs = highlightPhase ? (selected ? 'ub3-bold' : 'ub3') : defaultTextRenderAs;\n\n const ButtonContent = (\n <Styled.Wrapper\n selected={selected}\n disabled={disabled}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n width={width}\n borderColor={borderColor}\n >\n <FlexView\n $flexDirection=\"row\"\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $flexColumnGapX={0.25}\n >\n {icon && (\n <Styled.IconWrapper $widthX={1} $heightX={1} $showLottie={showLottie}>\n <LottieAnimation src={icon} settings={lottieSettings} />\n </Styled.IconWrapper>\n )}\n <Styled.Label\n key={currentLabel}\n shouldOffsetLabel={showLottie || !icon}\n selected={selected}\n disabled={disabled}\n $renderAs={textRenderAs}\n textColor={textColor}\n >\n {currentLabel}\n </Styled.Label>\n </FlexView>\n </Styled.Wrapper>\n );\n\n return disabled && tooltip ? (\n <ArrowTooltip renderAs=\"primary\" tooltipItem={tooltip} position=\"top\">\n {ButtonContent}\n </ArrowTooltip>\n ) : (\n ButtonContent\n );\n};\n\nexport default memo(PillButton);\n"],"names":["lottieSettings","PillButton","id","label","selected","disabled","animatedLabel","icon","onClick","tooltip","width","isHovered","setHovered","useState","highlightPhase","setHighlightPhase","colors","useTheme","shouldAnimate","handleClick","useCallback","useEffect","interval","prev","handleMouseEnter","handleMouseLeave","showLottie","borderColor","textColor","currentLabel","ButtonContent","jsx","Styled.Wrapper","jsxs","FlexView","Styled.IconWrapper","LottieAnimation","Styled.Label","ArrowTooltip","pillButton","memo"],"mappings":";;;;;;;AAUA,MAAMA,IAAiB;AAAA,EACrB,UAAU;AAAA,EACV,MAAM;AAAA,EACN,UAAU;AACZ,GAEMC,IAAmC,CAAC;AAAA,EACxC,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAU,IAAIC,EAAS,EAAK,GACxC,CAACC,GAAgBC,CAAiB,IAAIF,EAAS,EAAK,GACpD,EAAE,QAAAG,MAAWC,KACbC,IAAgB,CAAC,CAACZ,GAElBa,IAAcC,EAAY,MAAM;AACpC,IAAAZ,EAAQN,CAAE;AAAA,EAAA,GACT,CAACA,GAAIM,CAAO,CAAC;AAEhB,EAAAa,EAAU,MAAM;AACV,QAAA,CAACH,KAAiBb,EAAU;AAE1B,UAAAiB,IAAW,YAAY,MAAM;AACf,MAAAP,EAAA,CAAAQ,MAAQ,CAACA,CAAI;AAAA,OAC9B,GAAI;AAEA,WAAA,MAAM,cAAcD,CAAQ;AAAA,EAAA,GAClC,CAACjB,GAAUa,CAAa,CAAC;AAE5B,QAAMM,IAAmBJ,EAAY,MAAMR,EAAW,EAAI,GAAG,CAAA,CAAE,GACzDa,IAAmBL,EAAY,MAAMR,EAAW,EAAK,GAAG,CAAA,CAAE,GAE1Dc,IAAa,CAAC,CAACnB,KAAQ,CAACF,MAAaa,KAAiBd,KAAYO,IAElEgB,IAAcX,EAAOF,IAAiB,aAAa,SAAS,GAC5Dc,IAAYZ,EAAOF,KAAkB,CAACV,IAAW,aAAa,SAAS,GACvEyB,IAAef,IAAiBR,IAAgBH,GAIhD2B,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAA5B;AAAA,MACA,UAAAC;AAAA,MACA,SAASc;AAAA,MACT,cAAcK;AAAA,MACd,cAAcC;AAAA,MACd,OAAAf;AAAA,MACA,aAAAiB;AAAA,MAEA,UAAA,gBAAAM;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,gBAAe;AAAA,UACf,aAAY;AAAA,UACZ,iBAAgB;AAAA,UAChB,iBAAiB;AAAA,UAEhB,UAAA;AAAA,YAAA3B,uBACE4B,GAAA,EAAmB,SAAS,GAAG,UAAU,GAAG,aAAaT,GACxD,4BAACU,GAAgB,EAAA,KAAK7B,GAAM,UAAUP,EAAgB,CAAA,GACxD;AAAA,YAEF,gBAAA+B;AAAA,cAACM;AAAAA,cAAA;AAAA,gBAEC,mBAAmBX,KAAc,CAACnB;AAAA,gBAClC,UAAAH;AAAA,gBACA,UAAAC;AAAA,gBACA,WA5BaS,IAAkBV,IAAW,aAAa,QADnCA,IAAW,aAAa;AAAA,gBA8B5C,WAAAwB;AAAA,gBAEC,UAAAC;AAAA,cAAA;AAAA,cAPIA;AAAA,YAQP;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIG,SAAAxB,KAAYI,IACjB,gBAAAsB,EAACO,GAAa,EAAA,UAAS,WAAU,aAAa7B,GAAS,UAAS,OAC7D,UAAAqB,EAAA,CACH,IAEAA;AAEJ,GAEeS,IAAAC,EAAKvC,CAAU;"}
|