@gustavo-valsechi/client 1.4.194 → 1.4.195

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 (5) hide show
  1. package/dist/src/components/types/modal/styles.js +45 -2
  2. package/dist/src/components/types/modal/styles.mjs +45 -2
  3. package/dist/src/contexts/modal/index.js +1 -1
  4. package/dist/src/contexts/modal/index.mjs +1 -1
  5. package/package.json +1 -1
package/dist/src/components/types/modal/styles.js CHANGED
@@ -45,11 +45,13 @@ const Container = import_styled_components.default.div`
45
45
  flex-direction: ${(props) => props.position === "left" ? "row-reverse" : "row"} !important;
46
46
  transform: ${(props) => props.toggle ? "translateX(0%)" : "translateX(100%)"};
47
47
  transition: ${(props) => props.toggle ? ".0s ease .0s" : ".3s ease .3s"};
48
+ animation: mainAnimation ease 0s;
48
49
 
49
50
  .modal-back {
50
51
  width: 100%;
51
52
  height: 100%;
52
53
  background: rgb(0, 0, 0, 0.3);
54
+ animation: backAnimation ease .3s;
53
55
  opacity: ${(props) => props.toggle ? "1" : "0"};
54
56
  transition: ease 0.3s;
55
57
  position: absolute;
@@ -68,7 +70,8 @@ const Container = import_styled_components.default.div`
68
70
  opacity: ${(props) => props.position === "center" && !props.toggle ? "0" : "1"};
69
71
  transition: ease 0.3s;
70
72
  position: absolute;
71
-
73
+ animation: containerAnimation ease .3s;
74
+
72
75
  ${(props) => props.position === "right" ? "right: 0;" : props.position === "left" ? "left: 0;" : "left: 50%; bottom: 50%;"}
73
76
 
74
77
  @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
@@ -76,7 +79,7 @@ const Container = import_styled_components.default.div`
76
79
  width: ${(props) => props.position !== "center" ? "18rem" : "100%"};
77
80
  max-width: 100%;
78
81
  padding-bottom: 3rem !important;
79
-
82
+ animation: containerMobileAnimation ease .3s;
80
83
  transform: ${(props) => props.toggle ? props.position === "right" || props.position === "left" ? "translateX(0rem)" : "translateX(-50%) translateY(0)" : props.position === "right" ? "translateX(18rem)" : props.position === "left" ? "translateX(-18rem)" : "translateX(-50%) translateY(50%)"};
81
84
 
82
85
  ${(props) => props.position === "right" ? "right: 0;" : props.position === "left" ? "left: 0;" : "left: 50%; bottom: 0;"}
@@ -161,6 +164,46 @@ const Container = import_styled_components.default.div`
161
164
  }
162
165
  }
163
166
  }
167
+
168
+ @keyframes mainAnimation {
169
+ 0% {
170
+ transform: translateX(100%);
171
+ }
172
+ 100% {
173
+ transform: translateX(0%);
174
+ }
175
+ }
176
+
177
+ @keyframes backAnimation {
178
+ 0% {
179
+ opacity: 0;
180
+ }
181
+ 100% {
182
+ opacity: 1;
183
+ }
184
+ }
185
+
186
+ @keyframes containerAnimation {
187
+ 0% {
188
+ transform: ${(props) => props.position === "right" ? "translateX(18rem)" : props.position === "left" ? "translateX(-18rem)" : "translateX(-50%) translateY(43%)"};
189
+ opacity: ${(props) => props.position === "center" ? "0" : "1"};
190
+ }
191
+ 100% {
192
+ transform: ${(props) => props.position === "right" || props.position === "left" ? "translateX(0rem)" : "translateX(-50%) translateY(50%)"};
193
+ opacity: 1;
194
+ }
195
+ }
196
+
197
+ @keyframes containerMobileAnimation {
198
+ 0% {
199
+ transform: ${(props) => props.position === "right" ? "translateX(18rem)" : props.position === "left" ? "translateX(-18rem)" : "translateX(-50%) translateY(50%)"};
200
+ opacity: ${(props) => props.position === "center" ? "0" : "1"};
201
+ }
202
+ 100% {
203
+ transform: ${(props) => props.position === "right" || props.position === "left" ? "translateX(0rem)" : "translateX(-50%) translateY(0)"};
204
+ opacity: 1;
205
+ }
206
+ }
164
207
  `;
165
208
  // Annotate the CommonJS export names for ESM import in node:
166
209
  0 && (module.exports = {
package/dist/src/components/types/modal/styles.mjs CHANGED
@@ -12,11 +12,13 @@ const Container = styled.div`
12
12
  flex-direction: ${(props) => props.position === "left" ? "row-reverse" : "row"} !important;
13
13
  transform: ${(props) => props.toggle ? "translateX(0%)" : "translateX(100%)"};
14
14
  transition: ${(props) => props.toggle ? ".0s ease .0s" : ".3s ease .3s"};
15
+ animation: mainAnimation ease 0s;
15
16
 
16
17
  .modal-back {
17
18
  width: 100%;
18
19
  height: 100%;
19
20
  background: rgb(0, 0, 0, 0.3);
21
+ animation: backAnimation ease .3s;
20
22
  opacity: ${(props) => props.toggle ? "1" : "0"};
21
23
  transition: ease 0.3s;
22
24
  position: absolute;
@@ -35,7 +37,8 @@ const Container = styled.div`
35
37
  opacity: ${(props) => props.position === "center" && !props.toggle ? "0" : "1"};
36
38
  transition: ease 0.3s;
37
39
  position: absolute;
38
-
40
+ animation: containerAnimation ease .3s;
41
+
39
42
  ${(props) => props.position === "right" ? "right: 0;" : props.position === "left" ? "left: 0;" : "left: 50%; bottom: 50%;"}
40
43
 
41
44
  @media(max-width: ${({ theme }) => theme.mobileMaxWidth}) {
@@ -43,7 +46,7 @@ const Container = styled.div`
43
46
  width: ${(props) => props.position !== "center" ? "18rem" : "100%"};
44
47
  max-width: 100%;
45
48
  padding-bottom: 3rem !important;
46
-
49
+ animation: containerMobileAnimation ease .3s;
47
50
  transform: ${(props) => props.toggle ? props.position === "right" || props.position === "left" ? "translateX(0rem)" : "translateX(-50%) translateY(0)" : props.position === "right" ? "translateX(18rem)" : props.position === "left" ? "translateX(-18rem)" : "translateX(-50%) translateY(50%)"};
48
51
 
49
52
  ${(props) => props.position === "right" ? "right: 0;" : props.position === "left" ? "left: 0;" : "left: 50%; bottom: 0;"}
@@ -128,6 +131,46 @@ const Container = styled.div`
128
131
  }
129
132
  }
130
133
  }
134
+
135
+ @keyframes mainAnimation {
136
+ 0% {
137
+ transform: translateX(100%);
138
+ }
139
+ 100% {
140
+ transform: translateX(0%);
141
+ }
142
+ }
143
+
144
+ @keyframes backAnimation {
145
+ 0% {
146
+ opacity: 0;
147
+ }
148
+ 100% {
149
+ opacity: 1;
150
+ }
151
+ }
152
+
153
+ @keyframes containerAnimation {
154
+ 0% {
155
+ transform: ${(props) => props.position === "right" ? "translateX(18rem)" : props.position === "left" ? "translateX(-18rem)" : "translateX(-50%) translateY(43%)"};
156
+ opacity: ${(props) => props.position === "center" ? "0" : "1"};
157
+ }
158
+ 100% {
159
+ transform: ${(props) => props.position === "right" || props.position === "left" ? "translateX(0rem)" : "translateX(-50%) translateY(50%)"};
160
+ opacity: 1;
161
+ }
162
+ }
163
+
164
+ @keyframes containerMobileAnimation {
165
+ 0% {
166
+ transform: ${(props) => props.position === "right" ? "translateX(18rem)" : props.position === "left" ? "translateX(-18rem)" : "translateX(-50%) translateY(50%)"};
167
+ opacity: ${(props) => props.position === "center" ? "0" : "1"};
168
+ }
169
+ 100% {
170
+ transform: ${(props) => props.position === "right" || props.position === "left" ? "translateX(0rem)" : "translateX(-50%) translateY(0)"};
171
+ opacity: 1;
172
+ }
173
+ }
131
174
  `;
132
175
  export {
133
176
  Container
package/dist/src/contexts/modal/index.js CHANGED
@@ -83,7 +83,7 @@ const ModalProviderContainer = ({ children }) => {
83
83
  var _a;
84
84
  const content = import_lodash.default.find(memory, (modal) => modal.name === modalName);
85
85
  if (!content) return;
86
- setProps(modalName, { toggle: !((_a = content == null ? void 0 : content.props) == null ? void 0 : _a.toggle) });
86
+ setProps(modalName, { toggle: !((_a = content == null ? void 0 : content.props) == null ? void 0 : _a.toggle), content: {} });
87
87
  };
88
88
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
89
89
  ModalContext.Provider,
package/dist/src/contexts/modal/index.mjs CHANGED
@@ -49,7 +49,7 @@ const ModalProviderContainer = ({ children }) => {
49
49
  var _a;
50
50
  const content = _.find(memory, (modal) => modal.name === modalName);
51
51
  if (!content) return;
52
- setProps(modalName, { toggle: !((_a = content == null ? void 0 : content.props) == null ? void 0 : _a.toggle) });
52
+ setProps(modalName, { toggle: !((_a = content == null ? void 0 : content.props) == null ? void 0 : _a.toggle), content: {} });
53
53
  };
54
54
  return /* @__PURE__ */ jsxs(
55
55
  ModalContext.Provider,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gustavo-valsechi/client",
3
- "version": "1.4.194",
3
+ "version": "1.4.195",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",