meticulous-ui 1.1.8 → 1.1.9

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 (3) hide show
  1. package/README.md +6 -4
  2. package/components/Toast/styles.js +77 -33
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -4,6 +4,10 @@ A lightweight, modern React component library designed for elegance and precisio
4
4
 
5
5
  ---
6
6
 
7
+ ## 🚀 Demo
8
+
9
+ <a href="https://meticulous-ui-dkim-xe3110s-projects.vercel.app" target="_blank">meticulous-ui</a>
10
+
7
11
  ## 🚀 Installation
8
12
 
9
13
  ```
@@ -41,10 +45,6 @@ function App() {
41
45
  export default App;
42
46
  ```
43
47
 
44
- ## 🚀 Demo
45
-
46
- <a href="https://meticulous-ui-dkim-xe3110s-projects.vercel.app" target="_blank">meticulous-ui</a>
47
-
48
48
  ## 📦 Components
49
49
 
50
50
  | Component | Description |
@@ -79,6 +79,7 @@ export default App;
79
79
  | `CartOutline` | Cart outline icon |
80
80
  | `CartPlusFilled` | Cart plus filled icon |
81
81
  | `CartPlusOutline` | Cart plus outline icon |
82
+ | `CheckDouble` | Check double icon |
82
83
  | `Check` | Check icon |
83
84
  | `ChevronLeft` | Left navigation icon |
84
85
  | `ChevronRight` | Right navigation icon |
@@ -136,6 +137,7 @@ export default App;
136
137
  | `ShareBoxOutline` | Share box outline icon |
137
138
  | `ShareFilled` | Share filled icon |
138
139
  | `ShareOutline` | Share outline icon |
140
+ | `ShareThickFilled` | Share thick filled icon |
139
141
  | `ShieldCheckFilled` | Shield check filled icon |
140
142
  | `ShieldCheckOutline` | Shield check outline icon |
141
143
  | `ShieldCrossFilled` | Shield cross filled icon |
package/components/Toast/styles.js CHANGED
@@ -1,9 +1,9 @@
1
- import o, { keyframes as s, css as e } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
1
+ import r, { keyframes as d, css as o } from "../../node_modules/styled-components/dist/styled-components.browser.esm.js";
2
2
  import i from "../../colors/white.js";
3
3
  import n from "../Icons/Close/Close.js";
4
- import a from "../../colors/grey.js";
5
- import { WARNING as d } from "./constants.js";
6
- const m = s`
4
+ import s from "../../colors/grey.js";
5
+ import { WARNING as a } from "./constants.js";
6
+ const m = d`
7
7
  from {
8
8
  opacity: 0;
9
9
  transform: translateX(100%); /* Start off-screen to the right */
@@ -12,7 +12,7 @@ const m = s`
12
12
  opacity: 1;
13
13
  transform: translateX(0); /* Move to its final position */
14
14
  }
15
- `, l = s`
15
+ `, h = d`
16
16
  from {
17
17
  opacity: 1;
18
18
  transform: translateX(0);
@@ -22,21 +22,21 @@ const m = s`
22
22
  transform: translateX(100%); /* Move off-screen to the right */
23
23
  }
24
24
  `;
25
- o.div`
25
+ r.div`
26
26
  position: fixed;
27
27
  top: 1rem;
28
- right: 2rem;
28
+ right: 1rem;
29
29
  z-index: 9999;
30
30
 
31
31
  display: flex;
32
32
  flex-direction: column;
33
33
  gap: 1rem;
34
34
  `;
35
- const u = o.div`
35
+ const w = r.div`
36
36
  display: flex;
37
37
  align-items: center;
38
38
  justify-content: space-between;
39
- background-color: ${({ $bg: t }) => t};
39
+ background-color: ${({ $bg: e }) => e};
40
40
  height: 4.8rem;
41
41
  width: 28rem;
42
42
  border-radius: 0.8rem;
@@ -51,42 +51,77 @@ const u = o.div`
51
51
 
52
52
  &.fade-out {
53
53
  opacity: 0;
54
- animation: ${l} 0.5s ease-in forwards; /* slide right */
54
+ animation: ${h} 0.5s ease-in forwards; /* slide right */
55
55
  }
56
- `, b = o.div`
56
+
57
+ @media screen and (max-width: 768px) {
58
+ height: 3.6rem;
59
+ width: 21rem;
60
+ border-radius: 0.6rem;
61
+ padding: 0.3rem 0.8rem;
62
+ }
63
+ `, x = r.div`
57
64
  position: absolute;
58
65
  top: 50%;
59
66
  left: 50%;
60
67
  transform: translate(-50%, -50%);
61
68
  background-color: ${i};
62
69
 
63
- ${({ type: t, $main: r }) => t === d ? e`
70
+ ${({ type: e, $main: t }) => e === a ? o`
64
71
  top: 48%;
65
- border-color: ${r} ${r} ${i} ${r};
72
+ border-color: ${t} ${t} ${i} ${t};
66
73
  border-style: solid;
67
74
  border-width: 0 0.9rem 1.4rem 0.9rem;
68
75
  height: 0;
69
76
  width: 0;
70
- ` : e`
77
+ ` : o`
71
78
  top: 50%;
72
79
  width: 1.8rem;
73
80
  height: 1.8rem;
74
81
  border-radius: 50%;
75
82
  `}
76
- `, w = o.div`
83
+
84
+ @media screen and (max-width: 768px) {
85
+ ${({ type: e, $main: t }) => e === a ? o`
86
+ top: 48%;
87
+ border-color: ${t} ${t} ${i} ${t};
88
+ border-style: solid;
89
+ border-width: 0 0.7rem 1.05rem 0.68rem;
90
+ height: 0;
91
+ width: 0;
92
+ ` : o`
93
+ top: 50%;
94
+ width: 1.35rem;
95
+ height: 1.35rem;
96
+ border-radius: 50%;
97
+ `}
98
+ }
99
+ `, b = r.div`
77
100
  position: relative;
78
101
  width: 4rem;
79
102
  height: 4rem;
80
103
  border-radius: 50%;
81
- background-color: ${({ $side: t }) => t};
82
- `, y = o.div`
104
+ background-color: ${({ $side: e }) => e};
105
+
106
+ @media screen and (max-width: 768px) {
107
+ width: 3rem;
108
+ height: 3rem;
109
+ }
110
+ `, u = r.div`
83
111
  position: absolute;
84
112
  top: 50%;
85
113
  left: 50%;
86
114
  transform: translate(-50%, -50%);
87
- width: ${({ size: t }) => t}rem;
88
- height: ${({ size: t }) => t}rem;
89
- `, $ = o.div`
115
+ width: ${({ size: e }) => e}rem;
116
+ height: ${({ size: e }) => e}rem;
117
+
118
+ @media screen and (max-width: 768px) {
119
+ top: 42.8%;
120
+ left: 42.8%;
121
+ transform: translate(-42.8%, -42.8%);
122
+ scale: 0.75;
123
+ }
124
+ `, $ = r.div`
90
125
  position: absolute;
91
126
  top: 50%;
92
127
  left: 50%;
@@ -94,31 +129,40 @@ const u = o.div`
94
129
  width: 3rem;
95
130
  height: 3rem;
96
131
  border-radius: 50%;
97
- background-color: ${({ $main: t }) => t};
98
- `, v = o(n)`
132
+ background-color: ${({ $main: e }) => e};
133
+
134
+ @media screen and (max-width: 768px) {
135
+ width: 2.25rem;
136
+ height: 2.25rem;
137
+ }
138
+ `, y = r(n)`
99
139
  cursor: pointer;
100
- `, x = o.div`
140
+ `, v = r.div`
101
141
  font-weight: 600;
102
142
  font-size: 1.2rem;
103
- color: ${a.m800};
104
- `, k = o.div`
143
+ color: ${s.m800};
144
+ `, k = r.div`
105
145
  display: flex;
106
146
  flex-direction: column;
107
147
  gap: 0.2rem;
108
148
  width: 21rem;
109
- `, C = o.div`
149
+
150
+ @media screen and (max-width: 768px) {
151
+ width: 15rem;
152
+ }
153
+ `, C = r.div`
110
154
  font-weight: 400;
111
155
  font-size: 1rem;
112
- color: ${a.m700};
156
+ color: ${s.m700};
113
157
  `;
114
158
  export {
115
- v as CloseWrapper,
116
- y as Icon,
117
- b as LogoContainer,
159
+ y as CloseWrapper,
160
+ u as Icon,
161
+ x as LogoContainer,
118
162
  k as Message,
119
- w as Outer,
163
+ b as Outer,
120
164
  $ as OuterChild,
121
165
  C as Subtitle,
122
- x as Title,
123
- u as ToastWrapper
166
+ v as Title,
167
+ w as ToastWrapper
124
168
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meticulous-ui",
3
- "version": "1.1.8",
3
+ "version": "1.1.9",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "repository": {