meticulous-ui 3.0.7 → 3.1.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 +1 -0
- package/components/Carousel/Carousel.js +164 -0
- package/components/Carousel/index.js +4 -0
- package/components/Carousel/styles.js +166 -0
- package/index.js +28 -26
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -78,6 +78,7 @@ import blue from 'meticulous-ui/colors/blue';
|
|
|
78
78
|
| `PageLoader` | Renders a loader with line at the top of page |
|
|
79
79
|
| `Button` | Renders a button to click & take an action |
|
|
80
80
|
| `Shimmer` | Animated skeleton loading placeholder |
|
|
81
|
+
| `Carousel` | Carousel providing slider between components displaying slides |
|
|
81
82
|
| `RootComponent` | This is the required wrapper for any app that uses meticulous-ui |
|
|
82
83
|
|
|
83
84
|
## 📦 Icon Components
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import { jsxs as b, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { useState as x, useRef as k, useEffect as C } from "react";
|
|
3
|
+
import q from "../Icons/ChevronLeft/ChevronLeft.js";
|
|
4
|
+
import G from "../Icons/ChevronRight/ChevronRight.js";
|
|
5
|
+
import { Wrapper as J, SlideArea as Q, NavButton as V, SlideViewport as S, SlideTrack as Z, PauseButton as ee, ProgressBar as te, DotsWrapper as re, Dot as ne } from "./styles.js";
|
|
6
|
+
const $ = 50, E = 2e3, oe = () => /* @__PURE__ */ b("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: [
|
|
7
|
+
/* @__PURE__ */ t("rect", { x: "2", y: "1", width: "3", height: "10", rx: "1" }),
|
|
8
|
+
/* @__PURE__ */ t("rect", { x: "7", y: "1", width: "3", height: "10", rx: "1" })
|
|
9
|
+
] }), se = () => /* @__PURE__ */ t("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ t("path", { d: "M2 1.5l9 4.5-9 4.5V1.5z" }) }), de = ({
|
|
10
|
+
data: P,
|
|
11
|
+
renderCarousel: F,
|
|
12
|
+
visibleSlides: g = 1,
|
|
13
|
+
overlayArrows: o = !1,
|
|
14
|
+
arrowTop: d,
|
|
15
|
+
areDotsHidden: W = !1,
|
|
16
|
+
autoSlide: h = !1,
|
|
17
|
+
autoSlideSec: M = 3,
|
|
18
|
+
loop: f = !1,
|
|
19
|
+
dragToSlide: T = !1,
|
|
20
|
+
showProgress: _ = !1,
|
|
21
|
+
defaultIndex: z = 0,
|
|
22
|
+
onSlideChange: D
|
|
23
|
+
}) => {
|
|
24
|
+
const [n, p] = x(z), [y, i] = x(!0), [X, L] = x(!1), [a, u] = x(!1), m = k(null), c = k(null), l = k(null), s = P.length - g, v = () => p((e) => f && e === 0 ? s : Math.max(e - 1, 0)), w = () => p((e) => f && e >= s ? 0 : Math.min(e + 1, s));
|
|
25
|
+
C(() => {
|
|
26
|
+
D == null || D(n);
|
|
27
|
+
}, [n]);
|
|
28
|
+
const B = () => {
|
|
29
|
+
o && (clearTimeout(l.current), i(!0), l.current = setTimeout(() => i(!1), E));
|
|
30
|
+
}, H = () => {
|
|
31
|
+
u(!0), o && (clearTimeout(l.current), i(!0));
|
|
32
|
+
}, U = () => {
|
|
33
|
+
u(!1), o && (l.current = setTimeout(() => i(!1), E));
|
|
34
|
+
};
|
|
35
|
+
C(() => {
|
|
36
|
+
if (o)
|
|
37
|
+
return l.current = setTimeout(() => i(!1), E), () => clearTimeout(l.current);
|
|
38
|
+
}, [o]), C(() => {
|
|
39
|
+
if (!h || a) return;
|
|
40
|
+
const e = setInterval(() => {
|
|
41
|
+
p((r) => r >= s ? 0 : r + 1);
|
|
42
|
+
}, M * 1e3);
|
|
43
|
+
return () => clearInterval(e);
|
|
44
|
+
}, [h, M, a, s]);
|
|
45
|
+
const j = (e) => {
|
|
46
|
+
m.current = e.touches[0].clientX, B();
|
|
47
|
+
}, A = (e) => {
|
|
48
|
+
if (m.current === null) return;
|
|
49
|
+
const r = m.current - e.changedTouches[0].clientX;
|
|
50
|
+
r > $ ? w() : r < -$ && v(), m.current = null;
|
|
51
|
+
}, K = (e) => {
|
|
52
|
+
T && (c.current = e.clientX);
|
|
53
|
+
}, N = (e) => {
|
|
54
|
+
if (!T || c.current === null) return;
|
|
55
|
+
const r = c.current - e.clientX;
|
|
56
|
+
r > $ ? w() : r < -$ && v(), c.current = null;
|
|
57
|
+
}, O = (e) => {
|
|
58
|
+
e.key === "ArrowLeft" ? (e.preventDefault(), v()) : e.key === "ArrowRight" && (e.preventDefault(), w());
|
|
59
|
+
}, Y = -(n * (100 / g)), R = d !== void 0 ? typeof d == "number" ? `${d}px` : d : void 0, I = s + 1;
|
|
60
|
+
return /* @__PURE__ */ b(
|
|
61
|
+
J,
|
|
62
|
+
{
|
|
63
|
+
onClick: B,
|
|
64
|
+
onMouseEnter: H,
|
|
65
|
+
onMouseLeave: U,
|
|
66
|
+
onKeyDown: O,
|
|
67
|
+
role: "region",
|
|
68
|
+
"aria-label": "Carousel",
|
|
69
|
+
children: [
|
|
70
|
+
/* @__PURE__ */ b(Q, { onTouchStart: j, onTouchEnd: A, children: [
|
|
71
|
+
/* @__PURE__ */ t(
|
|
72
|
+
V,
|
|
73
|
+
{
|
|
74
|
+
onClick: v,
|
|
75
|
+
disabled: !f && n === 0,
|
|
76
|
+
"aria-label": "Previous slide",
|
|
77
|
+
$overlay: o,
|
|
78
|
+
$visible: y,
|
|
79
|
+
$arrowTop: R,
|
|
80
|
+
$viewportFocused: X,
|
|
81
|
+
children: /* @__PURE__ */ t(q, { size: 20, "aria-hidden": "true" })
|
|
82
|
+
}
|
|
83
|
+
),
|
|
84
|
+
/* @__PURE__ */ t(
|
|
85
|
+
S,
|
|
86
|
+
{
|
|
87
|
+
tabIndex: 0,
|
|
88
|
+
"aria-label": "Carousel slides. Use arrow keys to navigate.",
|
|
89
|
+
$draggable: T,
|
|
90
|
+
onFocus: () => {
|
|
91
|
+
L(!0), u(!0);
|
|
92
|
+
},
|
|
93
|
+
onBlur: () => {
|
|
94
|
+
L(!1), u(!1);
|
|
95
|
+
},
|
|
96
|
+
onMouseDown: K,
|
|
97
|
+
onMouseUp: N,
|
|
98
|
+
onMouseLeave: () => {
|
|
99
|
+
c.current = null;
|
|
100
|
+
},
|
|
101
|
+
children: /* @__PURE__ */ t(Z, { $translateX: Y, $visibleSlides: g, children: P.map(F) })
|
|
102
|
+
}
|
|
103
|
+
),
|
|
104
|
+
/* @__PURE__ */ t(
|
|
105
|
+
V,
|
|
106
|
+
{
|
|
107
|
+
onClick: w,
|
|
108
|
+
disabled: !f && n === s,
|
|
109
|
+
"aria-label": "Next slide",
|
|
110
|
+
$overlay: o,
|
|
111
|
+
$visible: y,
|
|
112
|
+
$arrowTop: R,
|
|
113
|
+
$viewportFocused: X,
|
|
114
|
+
children: /* @__PURE__ */ t(G, { size: 20, "aria-hidden": "true" })
|
|
115
|
+
}
|
|
116
|
+
),
|
|
117
|
+
h && /* @__PURE__ */ t(
|
|
118
|
+
ee,
|
|
119
|
+
{
|
|
120
|
+
onClick: () => u((e) => !e),
|
|
121
|
+
"aria-label": a ? "Play slideshow" : "Pause slideshow",
|
|
122
|
+
children: a ? /* @__PURE__ */ t(se, {}) : /* @__PURE__ */ t(oe, {})
|
|
123
|
+
}
|
|
124
|
+
)
|
|
125
|
+
] }),
|
|
126
|
+
/* @__PURE__ */ b(
|
|
127
|
+
"div",
|
|
128
|
+
{
|
|
129
|
+
"aria-live": "polite",
|
|
130
|
+
"aria-atomic": "true",
|
|
131
|
+
style: {
|
|
132
|
+
position: "absolute",
|
|
133
|
+
width: 1,
|
|
134
|
+
height: 1,
|
|
135
|
+
overflow: "hidden",
|
|
136
|
+
clip: "rect(0,0,0,0)",
|
|
137
|
+
whiteSpace: "nowrap"
|
|
138
|
+
},
|
|
139
|
+
children: [
|
|
140
|
+
"Slide ",
|
|
141
|
+
n + 1,
|
|
142
|
+
" of ",
|
|
143
|
+
I
|
|
144
|
+
]
|
|
145
|
+
}
|
|
146
|
+
),
|
|
147
|
+
h && _ && /* @__PURE__ */ t(te, { $duration: M, $paused: a }, n),
|
|
148
|
+
!W && /* @__PURE__ */ t(re, { children: Array.from({ length: I }).map((e, r) => /* @__PURE__ */ t(
|
|
149
|
+
ne,
|
|
150
|
+
{
|
|
151
|
+
$active: r === n,
|
|
152
|
+
onClick: () => p(r),
|
|
153
|
+
"aria-label": `Slide ${r + 1} of ${I}`,
|
|
154
|
+
"aria-current": r === n ? "true" : void 0
|
|
155
|
+
},
|
|
156
|
+
r
|
|
157
|
+
)) })
|
|
158
|
+
]
|
|
159
|
+
}
|
|
160
|
+
);
|
|
161
|
+
};
|
|
162
|
+
export {
|
|
163
|
+
de as default
|
|
164
|
+
};
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
import o, { keyframes as i } from "styled-components";
|
|
2
|
+
const d = o.div`
|
|
3
|
+
position: relative;
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
align-items: center;
|
|
7
|
+
width: 100%;
|
|
8
|
+
gap: 12px;
|
|
9
|
+
outline: none;
|
|
10
|
+
`, a = o.div`
|
|
11
|
+
position: relative;
|
|
12
|
+
width: 100%;
|
|
13
|
+
`, s = o.div`
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
width: 100%;
|
|
16
|
+
outline: none;
|
|
17
|
+
cursor: ${({ $draggable: e }) => e ? "grab" : "default"};
|
|
18
|
+
|
|
19
|
+
&:active {
|
|
20
|
+
cursor: ${({ $draggable: e }) => e ? "grabbing" : "default"};
|
|
21
|
+
}
|
|
22
|
+
`, p = o.div`
|
|
23
|
+
display: flex;
|
|
24
|
+
width: 100%;
|
|
25
|
+
transform: translateX(${({ $translateX: e }) => e}%);
|
|
26
|
+
transition: transform 0.35s ease;
|
|
27
|
+
|
|
28
|
+
@media (prefers-reduced-motion: reduce) {
|
|
29
|
+
transition: none;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
& > * {
|
|
33
|
+
flex: 0 0 ${({ $visibleSlides: e }) => 100 / e}%;
|
|
34
|
+
min-width: 0;
|
|
35
|
+
box-sizing: border-box;
|
|
36
|
+
}
|
|
37
|
+
`, c = o.button`
|
|
38
|
+
position: absolute;
|
|
39
|
+
top: ${({ $arrowTop: e }) => e ?? "50%"};
|
|
40
|
+
transform: translateY(-50%);
|
|
41
|
+
z-index: 1;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
width: 32px;
|
|
46
|
+
height: 32px;
|
|
47
|
+
border-radius: 50%;
|
|
48
|
+
border: 1px solid #e0e0e0;
|
|
49
|
+
background: #fff;
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
color: #333;
|
|
52
|
+
transition:
|
|
53
|
+
background 0.15s,
|
|
54
|
+
opacity 0.3s;
|
|
55
|
+
padding: 0;
|
|
56
|
+
|
|
57
|
+
&:first-of-type {
|
|
58
|
+
left: ${({ $overlay: e }) => e ? "12px" : "-16px"};
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&:last-of-type {
|
|
62
|
+
right: ${({ $overlay: e }) => e ? "12px" : "-16px"};
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&:hover:not(:disabled) {
|
|
66
|
+
background: #f5f5f5;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&:disabled {
|
|
70
|
+
opacity: 0.3;
|
|
71
|
+
cursor: default;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&:focus-visible {
|
|
75
|
+
outline: none;
|
|
76
|
+
background: #ffe4ec;
|
|
77
|
+
border-color: #f9a8c0;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
${({ $viewportFocused: e }) => e && `
|
|
81
|
+
border-color: #bdbdbd;
|
|
82
|
+
`}
|
|
83
|
+
|
|
84
|
+
${({ $overlay: e, $visible: t }) => e && !t && `
|
|
85
|
+
opacity: 0;
|
|
86
|
+
pointer-events: none;
|
|
87
|
+
`}
|
|
88
|
+
`, l = o.div`
|
|
89
|
+
display: flex;
|
|
90
|
+
gap: 6px;
|
|
91
|
+
align-items: center;
|
|
92
|
+
`, u = o.button`
|
|
93
|
+
width: ${({ $active: e }) => e ? "20px" : "8px"};
|
|
94
|
+
height: 8px;
|
|
95
|
+
border-radius: 4px;
|
|
96
|
+
border: none;
|
|
97
|
+
background: ${({ $active: e }) => e ? "#333" : "#ccc"};
|
|
98
|
+
cursor: pointer;
|
|
99
|
+
padding: 0;
|
|
100
|
+
transition:
|
|
101
|
+
width 0.2s ease,
|
|
102
|
+
background 0.2s ease;
|
|
103
|
+
`, r = i`
|
|
104
|
+
from { width: 0%; }
|
|
105
|
+
to { width: 100%; }
|
|
106
|
+
`, f = o.div`
|
|
107
|
+
width: 100%;
|
|
108
|
+
height: 3px;
|
|
109
|
+
background: #e0e0e0;
|
|
110
|
+
border-radius: 2px;
|
|
111
|
+
overflow: hidden;
|
|
112
|
+
position: relative;
|
|
113
|
+
|
|
114
|
+
&::after {
|
|
115
|
+
content: '';
|
|
116
|
+
position: absolute;
|
|
117
|
+
inset: 0;
|
|
118
|
+
width: 0%;
|
|
119
|
+
background: #333;
|
|
120
|
+
animation: ${r} ${({ $duration: e }) => e}s linear forwards;
|
|
121
|
+
animation-play-state: ${({ $paused: e }) => e ? "paused" : "running"};
|
|
122
|
+
|
|
123
|
+
@media (prefers-reduced-motion: reduce) {
|
|
124
|
+
animation: none;
|
|
125
|
+
width: 100%;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
`, b = o.button`
|
|
129
|
+
position: absolute;
|
|
130
|
+
bottom: 8px;
|
|
131
|
+
right: 8px;
|
|
132
|
+
z-index: 2;
|
|
133
|
+
display: flex;
|
|
134
|
+
align-items: center;
|
|
135
|
+
justify-content: center;
|
|
136
|
+
width: 24px;
|
|
137
|
+
height: 24px;
|
|
138
|
+
border-radius: 50%;
|
|
139
|
+
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
140
|
+
background: rgba(0, 0, 0, 0.35);
|
|
141
|
+
color: #fff;
|
|
142
|
+
cursor: pointer;
|
|
143
|
+
padding: 0;
|
|
144
|
+
backdrop-filter: blur(2px);
|
|
145
|
+
transition: background 0.15s;
|
|
146
|
+
|
|
147
|
+
&:hover {
|
|
148
|
+
background: rgba(0, 0, 0, 0.55);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
&:focus-visible {
|
|
152
|
+
outline: 2px solid #fff;
|
|
153
|
+
outline-offset: 2px;
|
|
154
|
+
}
|
|
155
|
+
`;
|
|
156
|
+
export {
|
|
157
|
+
u as Dot,
|
|
158
|
+
l as DotsWrapper,
|
|
159
|
+
c as NavButton,
|
|
160
|
+
b as PauseButton,
|
|
161
|
+
f as ProgressBar,
|
|
162
|
+
a as SlideArea,
|
|
163
|
+
p as SlideTrack,
|
|
164
|
+
s as SlideViewport,
|
|
165
|
+
d as Wrapper
|
|
166
|
+
};
|
package/index.js
CHANGED
|
@@ -2,50 +2,52 @@ 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
4
|
import { default as s } from "./components/Loader/Loader.js";
|
|
5
|
-
import { default as
|
|
5
|
+
import { default as m } from "./components/PageLoader/PageLoader.js";
|
|
6
6
|
import { default as n } from "./components/OtpInput/OtpInput.js";
|
|
7
7
|
import { default as c } from "./components/Dropdown/Dropdown.js";
|
|
8
|
-
import { default as
|
|
9
|
-
import { default as
|
|
8
|
+
import { default as C } from "./components/RootComponent/RootComponent.js";
|
|
9
|
+
import { default as T } from "./components/Selectbox/Selectbox.js";
|
|
10
10
|
import { default as S } from "./components/Button/Button.js";
|
|
11
11
|
import { default as h } from "./components/Timer/Timer.js";
|
|
12
12
|
import { default as R } from "./components/Shimmer/Shimmer.js";
|
|
13
13
|
import { default as w } from "./components/VideoPlayer/VideoPlayer.js";
|
|
14
14
|
import { default as B } from "./components/Image/Image.js";
|
|
15
|
-
import { default as F } from "./components/
|
|
16
|
-
import { default as H } from "./components/Typography/
|
|
17
|
-
import { default as U } from "./components/
|
|
18
|
-
import { default as j } from "./components/Input/
|
|
19
|
-
import { default as v } from "./components/Input/
|
|
20
|
-
import { default as A } from "./components/Input/
|
|
21
|
-
import { default as J } from "./components/Input/
|
|
22
|
-
import { default as M } from "./
|
|
23
|
-
import { default as Q } from "./
|
|
24
|
-
import { default as X } from "./
|
|
15
|
+
import { default as F } from "./components/Carousel/Carousel.js";
|
|
16
|
+
import { default as H } from "./components/Typography/Headings/index.js";
|
|
17
|
+
import { default as U } from "./components/Typography/P/P.js";
|
|
18
|
+
import { default as j } from "./components/Input/Input/Input.js";
|
|
19
|
+
import { default as v } from "./components/Input/Textarea/Textarea.js";
|
|
20
|
+
import { default as A } from "./components/Input/Checkbox/Checkbox.js";
|
|
21
|
+
import { default as J } from "./components/Input/RadioGroup/RadioGroup.js";
|
|
22
|
+
import { default as M } from "./components/Input/FileUploader/FileUploader.js";
|
|
23
|
+
import { default as Q } from "./colors/index.js";
|
|
24
|
+
import { default as X } from "./utils/index.js";
|
|
25
|
+
import { default as Z } from "./components/Icons/index.js";
|
|
25
26
|
export {
|
|
26
27
|
S as Button,
|
|
27
|
-
|
|
28
|
+
F as Carousel,
|
|
29
|
+
A as Checkbox,
|
|
28
30
|
c as Dropdown,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
+
M as FileUploader,
|
|
32
|
+
H as Headings,
|
|
31
33
|
B as Image,
|
|
32
|
-
|
|
34
|
+
j as Input,
|
|
33
35
|
s as Loader,
|
|
34
36
|
n as OtpInput,
|
|
35
|
-
|
|
36
|
-
|
|
37
|
+
U as P,
|
|
38
|
+
m as PageLoader,
|
|
37
39
|
a as Pagination,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
40
|
+
J as RadioGroup,
|
|
41
|
+
C as RootComponent,
|
|
42
|
+
T as Selectbox,
|
|
41
43
|
R as Shimmer,
|
|
42
44
|
d as Spinner,
|
|
43
|
-
|
|
45
|
+
v as Textarea,
|
|
44
46
|
h as Timer,
|
|
45
47
|
r as Toast,
|
|
46
48
|
f as ToastContainer,
|
|
47
49
|
w as VideoPlayer,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
50
|
+
Q as colors,
|
|
51
|
+
Z as icons,
|
|
52
|
+
X as utils
|
|
51
53
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "meticulous-ui",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0",
|
|
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",
|