meticulous-ui 3.4.3 → 3.5.0
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/README.md +23 -22
- package/components/Modal/Modal.js +61 -0
- package/components/Modal/index.js +4 -0
- package/components/Modal/styles.js +99 -0
- package/index.js +28 -26
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -58,28 +58,29 @@ import blue from 'meticulous-ui/colors/blue';
|
|
|
58
58
|
|
|
59
59
|
## 📦 Components
|
|
60
60
|
|
|
61
|
-
| Component | Description
|
|
62
|
-
| --------------- |
|
|
63
|
-
| `Pagination` | Fully responsive pagination component
|
|
64
|
-
| `Toast` | Push 4 types of notifications on screen
|
|
65
|
-
| `Timer` | Renders analog / digital clock with alarm
|
|
66
|
-
| `OtpInput` | Gives inputs to enter and edit OTP
|
|
67
|
-
| `VideoPlayer` | Renders video with keyboard shortcuts
|
|
68
|
-
| `Image` | Renders image with shimmer, lower resolution
|
|
69
|
-
| `Input` | Renders input box to let user enter input
|
|
70
|
-
| `Checkbox` | Renders checkbox to let user give boolean value
|
|
71
|
-
| `RadioGroup` | Renders radio options in a group to let user select
|
|
72
|
-
| `FileUploader` | Renders a button type input from where user can upload
|
|
73
|
-
| `Textarea` | Renders textarea box to let user enter description
|
|
74
|
-
| `Dropdown` | Renders dropdown to select from options
|
|
75
|
-
| `SelectBox` | Renders selectbox to select multiple values from options
|
|
76
|
-
| `Spinner` | Renders a spinner to show the loading state
|
|
77
|
-
| `Loader` | Renders a loader with dots to show the loading state
|
|
78
|
-
| `PageLoader` | Renders a loader with line at the top of page
|
|
79
|
-
| `Button` | Renders a button to click & take an action
|
|
80
|
-
| `Shimmer` | Animated skeleton loading placeholder
|
|
81
|
-
| `Carousel` | Carousel providing slider between components displaying slides
|
|
82
|
-
| `
|
|
61
|
+
| Component | Description |
|
|
62
|
+
| --------------- | -------------------------------------------------------------------------------------- |
|
|
63
|
+
| `Pagination` | Fully responsive pagination component |
|
|
64
|
+
| `Toast` | Push 4 types of notifications on screen |
|
|
65
|
+
| `Timer` | Renders analog / digital clock with alarm |
|
|
66
|
+
| `OtpInput` | Gives inputs to enter and edit OTP |
|
|
67
|
+
| `VideoPlayer` | Renders video with keyboard shortcuts |
|
|
68
|
+
| `Image` | Renders image with shimmer, lower resolution |
|
|
69
|
+
| `Input` | Renders input box to let user enter input |
|
|
70
|
+
| `Checkbox` | Renders checkbox to let user give boolean value |
|
|
71
|
+
| `RadioGroup` | Renders radio options in a group to let user select |
|
|
72
|
+
| `FileUploader` | Renders a button type input from where user can upload |
|
|
73
|
+
| `Textarea` | Renders textarea box to let user enter description |
|
|
74
|
+
| `Dropdown` | Renders dropdown to select from options |
|
|
75
|
+
| `SelectBox` | Renders selectbox to select multiple values from options |
|
|
76
|
+
| `Spinner` | Renders a spinner to show the loading state |
|
|
77
|
+
| `Loader` | Renders a loader with dots to show the loading state |
|
|
78
|
+
| `PageLoader` | Renders a loader with line at the top of page |
|
|
79
|
+
| `Button` | Renders a button to click & take an action |
|
|
80
|
+
| `Shimmer` | Animated skeleton loading placeholder |
|
|
81
|
+
| `Carousel` | Carousel providing slider between components displaying slides |
|
|
82
|
+
| `Modal` | Accessible dialog overlay with title, body, footer, and Escape/overlay-click dismissal |
|
|
83
|
+
| `RootComponent` | This is the required wrapper for any app that uses meticulous-ui |
|
|
83
84
|
|
|
84
85
|
## 📦 Icon Components
|
|
85
86
|
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { jsx as e, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback as m, useEffect as h } from "react";
|
|
3
|
+
import { createPortal as f } from "react-dom";
|
|
4
|
+
import { Overlay as k, ModalContainer as v, ModalHeader as w, ModalTitle as x, CloseButton as b, ModalBody as g, ModalFooter as p } from "./styles.js";
|
|
5
|
+
const C = () => /* @__PURE__ */ d(
|
|
6
|
+
"svg",
|
|
7
|
+
{
|
|
8
|
+
width: "18",
|
|
9
|
+
height: "18",
|
|
10
|
+
viewBox: "0 0 24 24",
|
|
11
|
+
fill: "none",
|
|
12
|
+
stroke: "currentColor",
|
|
13
|
+
strokeWidth: "2.5",
|
|
14
|
+
strokeLinecap: "round",
|
|
15
|
+
strokeLinejoin: "round",
|
|
16
|
+
children: [
|
|
17
|
+
/* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
18
|
+
/* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
19
|
+
]
|
|
20
|
+
}
|
|
21
|
+
), T = ({
|
|
22
|
+
isOpen: n,
|
|
23
|
+
onClose: o,
|
|
24
|
+
title: l,
|
|
25
|
+
children: c,
|
|
26
|
+
footer: a,
|
|
27
|
+
footerAlign: u = "right",
|
|
28
|
+
width: y,
|
|
29
|
+
closeOnOverlayClick: s = !0,
|
|
30
|
+
showCloseButton: i = !0
|
|
31
|
+
}) => {
|
|
32
|
+
const t = m(
|
|
33
|
+
(r) => {
|
|
34
|
+
r.key === "Escape" && o?.();
|
|
35
|
+
},
|
|
36
|
+
[o]
|
|
37
|
+
);
|
|
38
|
+
return h(() => {
|
|
39
|
+
if (!n) return;
|
|
40
|
+
document.addEventListener("keydown", t);
|
|
41
|
+
const r = document.body.style.overflow;
|
|
42
|
+
return document.body.style.overflow = "hidden", () => {
|
|
43
|
+
document.removeEventListener("keydown", t), document.body.style.overflow = r;
|
|
44
|
+
};
|
|
45
|
+
}, [n, t]), n ? f(
|
|
46
|
+
/* @__PURE__ */ e(k, { role: "dialog", "aria-modal": "true", "aria-label": l, onClick: (r) => {
|
|
47
|
+
s && r.target === r.currentTarget && o?.();
|
|
48
|
+
}, children: /* @__PURE__ */ d(v, { $width: y, children: [
|
|
49
|
+
(l || i) && /* @__PURE__ */ d(w, { children: [
|
|
50
|
+
l && /* @__PURE__ */ e(x, { children: l }),
|
|
51
|
+
i && /* @__PURE__ */ e(b, { onClick: o, "aria-label": "Close modal", children: /* @__PURE__ */ e(C, {}) })
|
|
52
|
+
] }),
|
|
53
|
+
/* @__PURE__ */ e(g, { children: c }),
|
|
54
|
+
a && /* @__PURE__ */ e(p, { $align: u, children: a })
|
|
55
|
+
] }) }),
|
|
56
|
+
document.body
|
|
57
|
+
) : null;
|
|
58
|
+
};
|
|
59
|
+
export {
|
|
60
|
+
T as default
|
|
61
|
+
};
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import o, { css as r, keyframes as n } from "styled-components";
|
|
2
|
+
import e from "../../colors/grey.js";
|
|
3
|
+
import i from "../../colors/white.js";
|
|
4
|
+
const s = n`
|
|
5
|
+
from { opacity: 0; }
|
|
6
|
+
to { opacity: 1; }
|
|
7
|
+
`, a = n`
|
|
8
|
+
from { opacity: 0; transform: translateY(1.5rem); }
|
|
9
|
+
to { opacity: 1; transform: translateY(0); }
|
|
10
|
+
`, m = o.div`
|
|
11
|
+
position: fixed;
|
|
12
|
+
inset: 0;
|
|
13
|
+
background-color: rgba(0, 0, 0, 0.5);
|
|
14
|
+
display: flex;
|
|
15
|
+
align-items: center;
|
|
16
|
+
justify-content: center;
|
|
17
|
+
z-index: 1000;
|
|
18
|
+
animation: ${s} 0.2s ease;
|
|
19
|
+
padding: 1rem;
|
|
20
|
+
`, f = o.div`
|
|
21
|
+
background-color: ${i};
|
|
22
|
+
border-radius: 1rem;
|
|
23
|
+
box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
|
|
24
|
+
display: flex;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
max-height: 90vh;
|
|
27
|
+
width: ${({ $width: t }) => t || "32rem"};
|
|
28
|
+
max-width: 100%;
|
|
29
|
+
animation: ${a} 0.25s ease;
|
|
30
|
+
`, p = o.div`
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: space-between;
|
|
34
|
+
padding: 1.25rem 1.5rem;
|
|
35
|
+
border-bottom: 1px solid ${e.m200};
|
|
36
|
+
flex-shrink: 0;
|
|
37
|
+
`, g = o.h2`
|
|
38
|
+
margin: 0;
|
|
39
|
+
font-size: 2.4rem;
|
|
40
|
+
font-weight: 600;
|
|
41
|
+
color: ${e.m900};
|
|
42
|
+
line-height: 1.4;
|
|
43
|
+
`, x = o.button`
|
|
44
|
+
background: none;
|
|
45
|
+
border: none;
|
|
46
|
+
cursor: pointer;
|
|
47
|
+
padding: 0.25rem;
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
color: ${e.m500};
|
|
52
|
+
border-radius: 0.5rem;
|
|
53
|
+
transition:
|
|
54
|
+
background-color 0.15s,
|
|
55
|
+
color 0.15s;
|
|
56
|
+
flex-shrink: 0;
|
|
57
|
+
|
|
58
|
+
&:hover {
|
|
59
|
+
background-color: ${e.m100};
|
|
60
|
+
color: ${e.m800};
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
&:focus-visible {
|
|
64
|
+
outline: 2px solid ${e.m400};
|
|
65
|
+
outline-offset: 2px;
|
|
66
|
+
}
|
|
67
|
+
`, u = o.div`
|
|
68
|
+
padding: 1.5rem;
|
|
69
|
+
overflow-y: auto;
|
|
70
|
+
flex: 1;
|
|
71
|
+
color: ${e.m700};
|
|
72
|
+
font-size: 0.95rem;
|
|
73
|
+
line-height: 1.6;
|
|
74
|
+
`, y = o.div`
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
justify-content: flex-end;
|
|
78
|
+
gap: 0.75rem;
|
|
79
|
+
padding: 1rem 1.5rem;
|
|
80
|
+
border-top: 1px solid ${e.m200};
|
|
81
|
+
flex-shrink: 0;
|
|
82
|
+
|
|
83
|
+
${({ $align: t }) => t === "left" && r`
|
|
84
|
+
justify-content: flex-start;
|
|
85
|
+
`}
|
|
86
|
+
|
|
87
|
+
${({ $align: t }) => t === "center" && r`
|
|
88
|
+
justify-content: center;
|
|
89
|
+
`}
|
|
90
|
+
`;
|
|
91
|
+
export {
|
|
92
|
+
x as CloseButton,
|
|
93
|
+
u as ModalBody,
|
|
94
|
+
f as ModalContainer,
|
|
95
|
+
y as ModalFooter,
|
|
96
|
+
p as ModalHeader,
|
|
97
|
+
g as ModalTitle,
|
|
98
|
+
m as Overlay
|
|
99
|
+
};
|
package/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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
|
-
import { default as
|
|
3
|
+
import { default as p } from "./components/Spinner/Spinner.js";
|
|
4
4
|
import { default as m } from "./components/Loader/Loader.js";
|
|
5
5
|
import { default as s } from "./components/PageLoader/PageLoader.js";
|
|
6
6
|
import { default as n } from "./components/OtpInput/OtpInput.js";
|
|
@@ -8,40 +8,42 @@ import { default as g } from "./components/Dropdown/Dropdown.js";
|
|
|
8
8
|
import { default as P } from "./components/RootComponent/RootComponent.js";
|
|
9
9
|
import { default as I } from "./components/Selectbox/Selectbox.js";
|
|
10
10
|
import { default as b } from "./components/Button/Button.js";
|
|
11
|
-
import { default as h } from "./components/
|
|
12
|
-
import { default as R } from "./components/
|
|
13
|
-
import { default as w } from "./components/
|
|
14
|
-
import { default as B } from "./components/
|
|
15
|
-
import { default as F } from "./components/
|
|
16
|
-
import { default as H } from "./components/
|
|
17
|
-
import { default as
|
|
18
|
-
import { default as
|
|
19
|
-
import { default as
|
|
20
|
-
import { default as
|
|
21
|
-
import { default as
|
|
22
|
-
import { default as
|
|
11
|
+
import { default as h } from "./components/Modal/Modal.js";
|
|
12
|
+
import { default as R } from "./components/Timer/Timer.js";
|
|
13
|
+
import { default as w } from "./components/Shimmer/Shimmer.js";
|
|
14
|
+
import { default as B } from "./components/VideoPlayer/VideoPlayer.js";
|
|
15
|
+
import { default as F } from "./components/Image/Image.js";
|
|
16
|
+
import { default as H } from "./components/Carousel/Carousel.js";
|
|
17
|
+
import { default as O } from "./components/Typography/Headings/index.js";
|
|
18
|
+
import { default as V } from "./components/Typography/P/P.js";
|
|
19
|
+
import { default as q } from "./components/Input/Input/Input.js";
|
|
20
|
+
import { default as z } from "./components/Input/Textarea/Textarea.js";
|
|
21
|
+
import { default as E } from "./components/Input/Checkbox/Checkbox.js";
|
|
22
|
+
import { default as K } from "./components/Input/RadioGroup/RadioGroup.js";
|
|
23
|
+
import { default as Q } from "./components/Input/FileUploader/FileUploader.js";
|
|
23
24
|
export {
|
|
24
25
|
b as Button,
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
H as Carousel,
|
|
27
|
+
E as Checkbox,
|
|
27
28
|
g as Dropdown,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
Q as FileUploader,
|
|
30
|
+
O as Headings,
|
|
31
|
+
F as Image,
|
|
32
|
+
q as Input,
|
|
32
33
|
m as Loader,
|
|
34
|
+
h as Modal,
|
|
33
35
|
n as OtpInput,
|
|
34
|
-
|
|
36
|
+
V as P,
|
|
35
37
|
s as PageLoader,
|
|
36
38
|
a as Pagination,
|
|
37
|
-
|
|
39
|
+
K as RadioGroup,
|
|
38
40
|
P as RootComponent,
|
|
39
41
|
I as Selectbox,
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
42
|
+
w as Shimmer,
|
|
43
|
+
p as Spinner,
|
|
44
|
+
z as Textarea,
|
|
45
|
+
R as Timer,
|
|
44
46
|
r as Toast,
|
|
45
47
|
f as ToastContainer,
|
|
46
|
-
|
|
48
|
+
B as VideoPlayer
|
|
47
49
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "meticulous-ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0",
|
|
4
4
|
"license": "ISC",
|
|
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
|
"types": "./index.d.ts",
|