meticulous-ui 3.0.3 → 3.0.5

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.
@@ -0,0 +1,4 @@
1
+ import a from "./WarningTriangleFilled.js";
2
+ export {
3
+ a as default
4
+ };
@@ -1,17 +1,19 @@
1
- import { jsxs as c, jsx as e } from "react/jsx-runtime";
2
- import { ERROR as t, SUCCESS as i } from "./constants.js";
3
- import f from "../Icons/Close/Close.js";
4
- import m from "../Icons/Check/Check.js";
1
+ import { jsxs as s, jsx as i } from "react/jsx-runtime";
2
+ import { WARNING as e, ERROR as t, SUCCESS as n } from "./constants.js";
3
+ import c from "../Icons/Close/Close.js";
4
+ import l from "../Icons/Check/Check.js";
5
5
  import u from "../Icons/Info/Info.js";
6
- import { Outer as g, OuterChild as l, LogoContainer as C, Icon as d } from "./styles.js";
7
- const h = (o, r) => o === t ? /* @__PURE__ */ e(f, { size: 16, color: r }) : o === i ? /* @__PURE__ */ e(m, { size: 18, color: r }) : /* @__PURE__ */ e(u, { size: 22, color: r }), z = (o) => o === t ? 1.6 : o === i ? 1.76 : 2.08, R = ({ type: o, $main: r, $side: n }) => {
8
- const s = h(o, r);
9
- return /* @__PURE__ */ c(g, { "aria-hidden": "true", $side: n, children: [
10
- /* @__PURE__ */ e(l, { $main: r }),
11
- /* @__PURE__ */ e(C, { $main: r, type: o }),
12
- /* @__PURE__ */ e(d, { size: z(o), children: s })
6
+ import g from "../Icons/WarningTriangleFilled/WarningTriangleFilled.js";
7
+ import C from "../../colors/white.js";
8
+ import { Outer as d, OuterChild as h, LogoContainer as z, Icon as I } from "./styles.js";
9
+ const L = (r, o) => r === t ? /* @__PURE__ */ i(c, { size: 16, color: o }) : r === n ? /* @__PURE__ */ i(l, { size: 18, color: o }) : r === e ? /* @__PURE__ */ i(g, { size: 28, color: C }) : /* @__PURE__ */ i(u, { size: 22, color: o }), R = (r) => r === t ? 1.6 : r === n ? 1.76 : r === e ? 2.8 : 2.08, W = ({ type: r, $main: o, $side: f }) => {
10
+ const m = L(r, o);
11
+ return /* @__PURE__ */ s(d, { "aria-hidden": "true", $side: f, children: [
12
+ /* @__PURE__ */ i(h, { $main: o }),
13
+ r !== e && /* @__PURE__ */ i(z, { $main: o, type: r }),
14
+ /* @__PURE__ */ i(I, { size: R(r), children: m })
13
15
  ] });
14
16
  };
15
17
  export {
16
- R as Logo
18
+ W as Logo
17
19
  };
@@ -1,15 +1,14 @@
1
- import t, { keyframes as o, css as i } from "styled-components";
1
+ import t, { keyframes as r } from "styled-components";
2
2
  import s from "../../colors/white.js";
3
- import m from "../Icons/Close/Close.js";
4
- import d from "../../colors/grey.js";
5
- import { WARNING as n } from "./constants.js";
6
- const l = o`
3
+ import n from "../Icons/Close/Close.js";
4
+ import i from "../../colors/grey.js";
5
+ const a = r`
7
6
  from { transform: scale(0); }
8
7
  to { transform: scale(1); }
9
- `, c = o`
8
+ `, d = r`
10
9
  from { transform: translate(-50%, -50%) scale(0); }
11
10
  to { transform: translate(-50%, -50%) scale(1); }
12
- `, h = o`
11
+ `, m = r`
13
12
  from {
14
13
  opacity: 0;
15
14
  transform: translateX(100%); /* Start off-screen to the right */
@@ -18,7 +17,7 @@ const l = o`
18
17
  opacity: 1;
19
18
  transform: translateX(0); /* Move to its final position */
20
19
  }
21
- `, f = o`
20
+ `, c = r`
22
21
  from {
23
22
  opacity: 1;
24
23
  transform: translateX(0);
@@ -27,7 +26,7 @@ const l = o`
27
26
  opacity: 0;
28
27
  transform: translateX(100%); /* Move off-screen to the right */
29
28
  }
30
- `, $ = t.div`
29
+ `, u = t.div`
31
30
  position: fixed;
32
31
  top: 1.6rem;
33
32
  right: 1.6rem;
@@ -36,7 +35,7 @@ const l = o`
36
35
  display: flex;
37
36
  flex-direction: column;
38
37
  gap: 1.6rem;
39
- `, y = t.div`
38
+ `, w = t.div`
40
39
  display: flex;
41
40
  align-items: center;
42
41
  justify-content: space-between;
@@ -50,12 +49,12 @@ const l = o`
50
49
 
51
50
  &.fade-in {
52
51
  opacity: 1;
53
- animation: ${h} 0.5s ease-out forwards; /* slide down + fade */
52
+ animation: ${m} 0.5s ease-out forwards; /* slide down + fade */
54
53
  }
55
54
 
56
55
  &.fade-out {
57
56
  opacity: 0;
58
- animation: ${f} 0.5s ease-in forwards; /* slide right */
57
+ animation: ${c} 0.5s ease-in forwards; /* slide right */
59
58
  }
60
59
 
61
60
  @media screen and (max-width: 768px) {
@@ -64,61 +63,42 @@ const l = o`
64
63
  border-radius: 0.96rem;
65
64
  padding: 0.48rem 1.28rem;
66
65
  }
67
- `, v = t.div`
66
+ `, x = t.div`
68
67
  position: absolute;
69
68
  top: 50%;
70
69
  left: 50%;
71
70
  transform: translate(-50%, -50%);
72
71
  background-color: ${s};
73
-
74
- ${({ type: e, $main: r }) => e === n ? i`
75
- top: 48%;
76
- border-color: ${r} ${r} ${s} ${r};
77
- border-style: solid;
78
- border-width: 0 1.44rem 2.24rem 1.44rem;
79
- height: 0;
80
- width: 0;
81
- ` : i`
82
- top: 50%;
83
- width: 2.88rem;
84
- height: 2.88rem;
85
- border-radius: 50%;
86
- `}
72
+ width: 2.88rem;
73
+ height: 2.88rem;
74
+ border-radius: 50%;
87
75
 
88
76
  @media screen and (max-width: 768px) {
89
- ${({ type: e, $main: r }) => e === n ? i`
90
- top: 48%;
91
- border-color: ${r} ${r} ${s} ${r};
92
- border-style: solid;
93
- border-width: 0 1.12rem 1.68rem 1.088rem;
94
- height: 0;
95
- width: 0;
96
- ` : i`
97
- top: 50%;
98
- width: 2.16rem;
99
- height: 2.16rem;
100
- border-radius: 50%;
101
- `}
77
+ width: 2.16rem;
78
+ height: 2.16rem;
102
79
  }
103
- `, k = t.div`
80
+ `, b = t.div`
104
81
  position: relative;
105
82
  width: 6.4rem;
106
83
  height: 6.4rem;
107
84
  border-radius: 50%;
108
85
  background-color: ${({ $side: e }) => e};
109
- animation: ${l} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
86
+ animation: ${a} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
110
87
 
111
88
  @media screen and (max-width: 768px) {
112
89
  width: 4.8rem;
113
90
  height: 4.8rem;
114
91
  }
115
- `, C = t.div`
92
+ `, y = t.div`
116
93
  position: absolute;
117
94
  top: 50%;
118
95
  left: 50%;
119
96
  transform: translate(-50%, -50%);
120
97
  width: ${({ size: e }) => e}rem;
121
98
  height: ${({ size: e }) => e}rem;
99
+ display: flex;
100
+ align-items: center;
101
+ justify-content: center;
122
102
 
123
103
  @media screen and (max-width: 768px) {
124
104
  top: 42.8%;
@@ -126,7 +106,7 @@ const l = o`
126
106
  transform: translate(-42.8%, -42.8%);
127
107
  scale: 0.75;
128
108
  }
129
- `, R = t.div`
109
+ `, $ = t.div`
130
110
  position: absolute;
131
111
  top: 50%;
132
112
  left: 50%;
@@ -135,16 +115,16 @@ const l = o`
135
115
  height: 4.8rem;
136
116
  border-radius: 50%;
137
117
  background-color: ${({ $main: e }) => e};
138
- animation: ${c} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
118
+ animation: ${d} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
139
119
 
140
120
  @media screen and (max-width: 768px) {
141
121
  width: 3.6rem;
142
122
  height: 3.6rem;
143
123
  }
144
- `, a = 75.4, p = o`
145
- from { stroke-dashoffset: ${a}; }
124
+ `, o = 75.4, l = r`
125
+ from { stroke-dashoffset: ${o}; }
146
126
  to { stroke-dashoffset: 0; }
147
- `, z = t.div`
127
+ `, v = t.div`
148
128
  position: relative;
149
129
  display: inline-flex;
150
130
  align-items: center;
@@ -152,7 +132,7 @@ const l = o`
152
132
  flex-shrink: 0;
153
133
  width: 2.8rem;
154
134
  height: 2.8rem;
155
- `, I = t.svg`
135
+ `, k = t.svg`
156
136
  position: absolute;
157
137
  inset: 0;
158
138
  transform: rotate(-90deg);
@@ -163,7 +143,7 @@ const l = o`
163
143
  stroke: ${({ $color: e }) => e};
164
144
  stroke-width: 2;
165
145
  stroke-linecap: round;
166
- stroke-dasharray: ${a};
146
+ stroke-dasharray: ${o};
167
147
  }
168
148
 
169
149
  circle:first-child {
@@ -172,17 +152,17 @@ const l = o`
172
152
  }
173
153
 
174
154
  circle:last-child {
175
- stroke-dashoffset: ${a};
176
- animation: ${p} ${({ $duration: e }) => e - 0.5}s linear forwards;
155
+ stroke-dashoffset: ${o};
156
+ animation: ${l} ${({ $duration: e }) => e - 0.5}s linear forwards;
177
157
  animation-play-state: ${({ $paused: e }) => e ? "paused" : "running"};
178
158
  }
179
- `, G = t(m)`
159
+ `, C = t(n)`
180
160
  cursor: pointer;
181
- `, M = t.div`
161
+ `, R = t.div`
182
162
  font-weight: 600;
183
163
  font-size: 1.92rem;
184
- color: ${d.m800};
185
- `, N = t.div`
164
+ color: ${i.m800};
165
+ `, z = t.div`
186
166
  display: flex;
187
167
  flex-direction: column;
188
168
  gap: 0.32rem;
@@ -191,22 +171,22 @@ const l = o`
191
171
  @media screen and (max-width: 768px) {
192
172
  width: 24rem;
193
173
  }
194
- `, X = t.div`
174
+ `, I = t.div`
195
175
  font-weight: 400;
196
176
  font-size: 1.6rem;
197
- color: ${d.m700};
177
+ color: ${i.m700};
198
178
  `;
199
179
  export {
200
- z as CloseButtonContainer,
201
- G as CloseWrapper,
202
- C as Icon,
203
- v as LogoContainer,
204
- N as Message,
205
- k as Outer,
206
- R as OuterChild,
207
- I as ProgressRing,
208
- X as Subtitle,
209
- M as Title,
210
- y as ToastWrapper,
211
- $ as ToastsContainer
180
+ v as CloseButtonContainer,
181
+ C as CloseWrapper,
182
+ y as Icon,
183
+ x as LogoContainer,
184
+ z as Message,
185
+ b as Outer,
186
+ $ as OuterChild,
187
+ k as ProgressRing,
188
+ I as Subtitle,
189
+ R as Title,
190
+ w as ToastWrapper,
191
+ u as ToastsContainer
212
192
  };
@@ -0,0 +1,16 @@
1
+ import o from "./H1.js";
2
+ import r from "./H2.js";
3
+ import m from "./H3.js";
4
+ import t from "./H4.js";
5
+ import f from "./H5.js";
6
+ import i from "./H6.js";
7
+ const s = { H1: o, H2: r, H3: m, H4: t, H5: f, H6: i };
8
+ export {
9
+ o as H1,
10
+ r as H2,
11
+ m as H3,
12
+ t as H4,
13
+ f as H5,
14
+ i as H6,
15
+ s as default
16
+ };
package/index.js CHANGED
@@ -1,61 +1,51 @@
1
1
  import { default as a } from "./components/Pagination/Pagination.js";
2
2
  import { default as r, ToastContainer as f } from "./components/Toast/Toast.js";
3
3
  import { default as d } from "./components/Spinner/Spinner.js";
4
- import { default as m } from "./components/Loader/Loader.js";
4
+ import { default as s } from "./components/Loader/Loader.js";
5
5
  import { default as u } from "./components/PageLoader/PageLoader.js";
6
6
  import { default as n } from "./components/OtpInput/OtpInput.js";
7
- import { default as H } from "./components/Dropdown/Dropdown.js";
7
+ import { default as c } from "./components/Dropdown/Dropdown.js";
8
8
  import { default as P } from "./components/RootComponent/RootComponent.js";
9
- import { default as g } from "./components/Selectbox/Selectbox.js";
10
- import { default as I } from "./components/Button/Button.js";
11
- import { default as b } from "./components/Timer/Timer.js";
12
- import { default as L } from "./components/Shimmer/Shimmer.js";
13
- import { default as k } from "./components/VideoPlayer/VideoPlayer.js";
14
- import { default as y } from "./components/Image/Image.js";
15
- import { default as D } from "./components/Typography/P/P.js";
16
- import { default as G } from "./components/Input/Input/Input.js";
17
- import { default as U } from "./components/Input/Textarea/Textarea.js";
18
- import { default as j } from "./components/Input/Checkbox/Checkbox.js";
19
- import { default as v } from "./components/Input/RadioGroup/RadioGroup.js";
20
- import { default as A } from "./components/Input/FileUploader/FileUploader.js";
21
- import { default as J } from "./colors/index.js";
22
- import { default as M } from "./utils/index.js";
23
- import { default as Q } from "./components/Icons/index.js";
24
- import { default as X } from "./components/Typography/Headings/H1.js";
25
- import { default as Z } from "./components/Typography/Headings/H2.js";
26
- import { default as $ } from "./components/Typography/Headings/H3.js";
27
- import { default as eo } from "./components/Typography/Headings/H4.js";
28
- import { default as to } from "./components/Typography/Headings/H5.js";
29
- import { default as fo } from "./components/Typography/Headings/H6.js";
9
+ import { default as C } from "./components/Selectbox/Selectbox.js";
10
+ import { default as S } from "./components/Button/Button.js";
11
+ import { default as h } from "./components/Timer/Timer.js";
12
+ import { default as R } from "./components/Shimmer/Shimmer.js";
13
+ import { default as w } from "./components/VideoPlayer/VideoPlayer.js";
14
+ import { default as B } from "./components/Image/Image.js";
15
+ import { default as F } from "./components/Typography/Headings/index.js";
16
+ import { default as H } from "./components/Typography/P/P.js";
17
+ import { default as U } from "./components/Input/Input/Input.js";
18
+ import { default as j } from "./components/Input/Textarea/Textarea.js";
19
+ import { default as v } from "./components/Input/Checkbox/Checkbox.js";
20
+ import { default as A } from "./components/Input/RadioGroup/RadioGroup.js";
21
+ import { default as J } from "./components/Input/FileUploader/FileUploader.js";
22
+ import { default as M } from "./colors/index.js";
23
+ import { default as Q } from "./utils/index.js";
24
+ import { default as X } from "./components/Icons/index.js";
30
25
  export {
31
- I as Button,
32
- j as Checkbox,
33
- H as Dropdown,
34
- A as FileUploader,
35
- X as H1,
36
- Z as H2,
37
- $ as H3,
38
- eo as H4,
39
- to as H5,
40
- fo as H6,
41
- y as Image,
42
- G as Input,
43
- m as Loader,
26
+ S as Button,
27
+ v as Checkbox,
28
+ c as Dropdown,
29
+ J as FileUploader,
30
+ F as Headings,
31
+ B as Image,
32
+ U as Input,
33
+ s as Loader,
44
34
  n as OtpInput,
45
- D as P,
35
+ H as P,
46
36
  u as PageLoader,
47
37
  a as Pagination,
48
- v as RadioGroup,
38
+ A as RadioGroup,
49
39
  P as RootComponent,
50
- g as Selectbox,
51
- L as Shimmer,
40
+ C as Selectbox,
41
+ R as Shimmer,
52
42
  d as Spinner,
53
- U as Textarea,
54
- b as Timer,
43
+ j as Textarea,
44
+ h as Timer,
55
45
  r as Toast,
56
46
  f as ToastContainer,
57
- k as VideoPlayer,
58
- J as colors,
59
- Q as icons,
60
- M as utils
47
+ w as VideoPlayer,
48
+ M as colors,
49
+ X as icons,
50
+ Q as utils
61
51
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meticulous-ui",
3
- "version": "3.0.3",
3
+ "version": "3.0.5",
4
4
  "license": "MIT",
5
5
  "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
6
6
  "main": "./index.js",