@axos-web-dev/shared-components 2.2.10 → 2.2.11
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.
|
@@ -1,3 +1,8 @@
|
|
|
1
1
|
export declare const angle: `var(--${string})`;
|
|
2
|
+
export declare const offsetVar: `var(--${string})`;
|
|
2
3
|
export declare const gradientBorder: string;
|
|
4
|
+
export declare const gradientBorderUfb: string;
|
|
5
|
+
export declare const inputFocusKeyframes: string;
|
|
3
6
|
export declare const gradientFocus: string;
|
|
7
|
+
export declare const focusAnimation: string;
|
|
8
|
+
export declare const shadowAnimation: string;
|
|
@@ -4,10 +4,20 @@ import '../assets/Chatbot/AnimatedGradientBorder.css';import '../assets/themes/v
|
|
|
4
4
|
/* empty css */
|
|
5
5
|
/* empty css */
|
|
6
6
|
var angle = "var(--angle)";
|
|
7
|
-
var
|
|
8
|
-
var
|
|
7
|
+
var offsetVar = "var(--offset)";
|
|
8
|
+
var gradientBorder = "ic6iil2";
|
|
9
|
+
var gradientBorderUfb = "ic6iil3";
|
|
10
|
+
var inputFocusKeyframes = "ic6iil4";
|
|
11
|
+
var gradientFocus = "ic6iil5";
|
|
12
|
+
var focusAnimation = "ic6iil6";
|
|
13
|
+
var shadowAnimation = "ic6iil8";
|
|
9
14
|
export {
|
|
10
15
|
angle,
|
|
16
|
+
focusAnimation,
|
|
11
17
|
gradientBorder,
|
|
12
|
-
|
|
18
|
+
gradientBorderUfb,
|
|
19
|
+
gradientFocus,
|
|
20
|
+
inputFocusKeyframes,
|
|
21
|
+
offsetVar,
|
|
22
|
+
shadowAnimation
|
|
13
23
|
};
|
package/dist/Chatbot/Bubble.js
CHANGED
|
@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { vars } from "../themes/axos.css.js";
|
|
4
4
|
import clsx from "clsx";
|
|
5
5
|
import { AnimatePresence, motion } from "framer-motion";
|
|
6
|
-
import {
|
|
6
|
+
import { shadowAnimation } from "./AnimatedGradientBorder.css.js";
|
|
7
7
|
import { inner, svgFill, bubbleText, bubbleButton, bubbleWrapper } from "./Bubble.css.js";
|
|
8
8
|
import { useOpenChat } from "./store/chat.js";
|
|
9
9
|
const Bubble = ({
|
|
@@ -12,20 +12,11 @@ const Bubble = ({
|
|
|
12
12
|
}
|
|
13
13
|
}) => {
|
|
14
14
|
const isOpen = useOpenChat((state) => state.isOpen);
|
|
15
|
-
return /* @__PURE__ */ jsx("div", { className: clsx(bubbleWrapper,
|
|
15
|
+
return /* @__PURE__ */ jsx("div", { className: clsx(bubbleWrapper, shadowAnimation), children: /* @__PURE__ */ jsx("div", { className: inner, children: /* @__PURE__ */ jsxs("button", { className: clsx(bubbleButton, inner), onClick, children: [
|
|
16
16
|
/* @__PURE__ */ jsx(AnimatePresence, { children: !isOpen ? /* @__PURE__ */ jsx("div", { className: "bubble-circle", children: /* @__PURE__ */ jsxs(
|
|
17
|
-
|
|
17
|
+
"svg",
|
|
18
18
|
{
|
|
19
19
|
xmlns: "http://www.w3.org/2000/svg",
|
|
20
|
-
initial: { scale: 0.1, opacity: 0 },
|
|
21
|
-
animate: {
|
|
22
|
-
scale: 1,
|
|
23
|
-
opacity: 1,
|
|
24
|
-
transition: {
|
|
25
|
-
default: { type: "spring" },
|
|
26
|
-
opacity: { ease: [0, 0.71, 0.2, 1.01] }
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
20
|
width: "24",
|
|
30
21
|
height: "24",
|
|
31
22
|
viewBox: "0 0 24 24",
|
|
@@ -44,6 +44,7 @@ const GlobalContextProvider = ({
|
|
|
44
44
|
(url) => {
|
|
45
45
|
const resolved = findMoreAxosDomains(url, domains);
|
|
46
46
|
if (!currentSearch || !url) return resolved;
|
|
47
|
+
if (resolved.startsWith("#")) return resolved;
|
|
47
48
|
try {
|
|
48
49
|
const resolvedUrl = new URL(resolved, window.location.origin);
|
|
49
50
|
const existingParams = new URLSearchParams(resolvedUrl.search);
|
|
@@ -4,6 +4,23 @@
|
|
|
4
4
|
initial-value: 90deg;
|
|
5
5
|
}
|
|
6
6
|
@keyframes ic6iil0 {
|
|
7
|
+
0% {
|
|
8
|
+
transform: translate(-50%, -50%) scale(1.4) rotate(0);
|
|
9
|
+
}
|
|
10
|
+
50% {
|
|
11
|
+
transform: translate(-50%, -50%) scale(1.4) rotate(.5turn);
|
|
12
|
+
}
|
|
13
|
+
55% {
|
|
14
|
+
transform: translate(-50%, -50%) scale(1.4) rotate(.6turn);
|
|
15
|
+
}
|
|
16
|
+
95% {
|
|
17
|
+
transform: translate(-50%, -50%) scale(1.4) rotate(1turn);
|
|
18
|
+
}
|
|
19
|
+
100% {
|
|
20
|
+
transform: translate(-50%, -50%) scale(1.4) rotate(1turn);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
@keyframes ic6iil1 {
|
|
7
24
|
from {
|
|
8
25
|
--angle: 0deg;
|
|
9
26
|
}
|
|
@@ -11,28 +28,98 @@
|
|
|
11
28
|
--angle: 360deg;
|
|
12
29
|
}
|
|
13
30
|
}
|
|
14
|
-
|
|
31
|
+
@keyframes ic6iil4 {
|
|
32
|
+
0% {
|
|
33
|
+
box-shadow: px -4px 12px -6px var(--_1073cm817);
|
|
34
|
+
}
|
|
35
|
+
50% {
|
|
36
|
+
box-shadow: 0px -10px 14px -6px var(--_1073cm817);
|
|
37
|
+
}
|
|
38
|
+
100% {
|
|
39
|
+
box-shadow: 0px -4px 12px -6px var(--_1073cm817);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
@keyframes ic6iil7 {
|
|
43
|
+
0% {
|
|
44
|
+
box-shadow: 0 20px 25px 0 rgba(0, 0, 0, 0.10), 0 10px 10px 0 rgba(0, 0, 0, 0.04);
|
|
45
|
+
}
|
|
46
|
+
50% {
|
|
47
|
+
box-shadow: 0 0 16px 4px var(--_1073cm817),
|
|
48
|
+
0 20px 25px 0 rgba(0, 0, 0, 0.10),
|
|
49
|
+
0 10px 10px 0 rgba(0, 0, 0, 0.04);
|
|
50
|
+
}
|
|
51
|
+
100% {
|
|
52
|
+
box-shadow: 0 20px 25px 0 rgba(0, 0, 0, 0.10), 0 10px 10px 0 rgba(0, 0, 0, 0.04);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
.ic6iil2 {
|
|
56
|
+
--offset: 3px;
|
|
57
|
+
background: var(--_1073cm813);
|
|
58
|
+
max-width: 100%;
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
border-width: 3px;
|
|
61
|
+
border: var(--_1073cm813);
|
|
62
|
+
border-style: solid;
|
|
63
|
+
}
|
|
64
|
+
.ic6iil3 {
|
|
15
65
|
border: 2px solid var(--_1073cm813);
|
|
16
66
|
background: var(--_1073cm815);
|
|
17
|
-
animation:
|
|
67
|
+
animation: ic6iil1 2s ease-in-out infinite;
|
|
18
68
|
}
|
|
19
|
-
.
|
|
69
|
+
.ic6iil5 {
|
|
20
70
|
--angle: 90deg;
|
|
21
|
-
border:
|
|
22
|
-
animation: ic6iil0 3s ease-in-out infinite;
|
|
71
|
+
border: 1px solid var(--_1073cm81d);
|
|
23
72
|
border-radius: 12px;
|
|
24
73
|
background: linear-gradient(white) padding-box, var(--_1073cm815) border-box;
|
|
25
74
|
}
|
|
26
|
-
.
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
75
|
+
.ic6iil5:focus-within {
|
|
76
|
+
border: 1px solid #404040;
|
|
77
|
+
}
|
|
78
|
+
.ic6iil6 {
|
|
79
|
+
width: 80%;
|
|
80
|
+
border-radius: 50%;
|
|
81
|
+
animation: ic6iil4 2s ease-in-out infinite;
|
|
82
|
+
}
|
|
83
|
+
.ic6iil8 {
|
|
84
|
+
box-shadow: 0 20px 25px 0 rgba(0, 0, 0, 0.10), 0 10px 10px 0 rgba(0, 0, 0, 0.04);
|
|
85
|
+
}
|
|
86
|
+
@media screen and (max-width:768px) {
|
|
87
|
+
.ic6iil2 {
|
|
88
|
+
border: none;
|
|
89
|
+
}
|
|
31
90
|
}
|
|
32
91
|
@media screen and (min-width:768px) {
|
|
33
|
-
.
|
|
92
|
+
.ic6iil2 {
|
|
93
|
+
width: 164px;
|
|
94
|
+
height: 42px;
|
|
95
|
+
border-radius: 50px;
|
|
96
|
+
}
|
|
97
|
+
.ic6iil2:hover::before {
|
|
98
|
+
content: "";
|
|
99
|
+
background: conic-gradient(transparent 320deg, white, white);
|
|
100
|
+
position: absolute;
|
|
101
|
+
top: 50%;
|
|
102
|
+
left: 50%;
|
|
103
|
+
transform: translate(-50%, -50%);
|
|
104
|
+
aspect-ratio: 1;
|
|
105
|
+
width: 100%;
|
|
106
|
+
animation: ic6iil0 1.7s linear infinite;
|
|
107
|
+
}
|
|
108
|
+
.ic6iil2:hover::after {
|
|
109
|
+
content: "";
|
|
110
|
+
border-radius: inherit;
|
|
111
|
+
background: var(--_1073cm813);
|
|
112
|
+
position: absolute;
|
|
113
|
+
inset: var(--offset);
|
|
114
|
+
height: calc(100% - 2 * var(--offset));
|
|
115
|
+
width: calc(100% - 2 * var(--offset));
|
|
116
|
+
}
|
|
117
|
+
.ic6iil3:hover {
|
|
34
118
|
--angle: 270deg;
|
|
35
119
|
border: 2px solid transparent;
|
|
36
|
-
background: linear-gradient(
|
|
120
|
+
background: linear-gradient(var(--_1073cm813)) padding-box, linear-gradient(var(--angle), var(--_1073cm815)) border-box;
|
|
121
|
+
}
|
|
122
|
+
.ic6iil8:hover {
|
|
123
|
+
animation: ic6iil7 2.5s linear;
|
|
37
124
|
}
|
|
38
125
|
}
|