meticulous-ui 3.11.7 → 3.12.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/components/Accordion/Accordion.js +182 -0
- package/components/Accordion/index.js +4 -0
- package/components/Timer/Timer.js +168 -140
- package/index.d.ts +36 -0
- package/index.js +22 -20
- package/package.json +1 -1
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
import { jsx as a, jsxs as u } from "react/jsx-runtime";
|
|
2
|
+
import { useState as v } from "react";
|
|
3
|
+
import r from "prop-types";
|
|
4
|
+
import t, { keyframes as w } from "styled-components";
|
|
5
|
+
import c from "../../colors/grey.js";
|
|
6
|
+
import { black as l } from "../../colors/black.js";
|
|
7
|
+
import B from "../Icons/ChevronDown.js";
|
|
8
|
+
const O = w`
|
|
9
|
+
from { opacity: 0; transform: translateY(-6px); }
|
|
10
|
+
to { opacity: 1; transform: translateY(0); }
|
|
11
|
+
`, S = t.div`
|
|
12
|
+
width: 100%;
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
gap: 12px;
|
|
16
|
+
`, T = t.div`
|
|
17
|
+
border: 1.5px solid
|
|
18
|
+
${({ $isOpen: o, $activeBackground: n, $itemBorderColor: s }) => o && n ? "transparent" : s || c.m200};
|
|
19
|
+
border-radius: 12px;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
background: ${({ $isOpen: o, $activeBackground: n, $itemBackground: s }) => o && n ? n : s};
|
|
22
|
+
transition:
|
|
23
|
+
background 0.22s ease,
|
|
24
|
+
border-color 0.22s ease;
|
|
25
|
+
`, I = t.button`
|
|
26
|
+
width: 100%;
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
gap: 16px;
|
|
30
|
+
padding: 18px 20px;
|
|
31
|
+
background: none;
|
|
32
|
+
border: none;
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
text-align: left;
|
|
35
|
+
|
|
36
|
+
&:focus-visible {
|
|
37
|
+
outline: 2px solid ${l.m700};
|
|
38
|
+
outline-offset: -2px;
|
|
39
|
+
border-radius: 12px;
|
|
40
|
+
}
|
|
41
|
+
`, R = t.div`
|
|
42
|
+
flex-shrink: 0;
|
|
43
|
+
width: 40px;
|
|
44
|
+
height: 40px;
|
|
45
|
+
border: 1.5px solid
|
|
46
|
+
${({ $iconBackground: o, $borderColor: n }) => o ? "transparent" : n || c.m200};
|
|
47
|
+
border-radius: 10px;
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
justify-content: center;
|
|
51
|
+
color: ${({ $iconColor: o }) => o};
|
|
52
|
+
background: ${({ $iconBackground: o }) => o || "none"};
|
|
53
|
+
`, j = t.span`
|
|
54
|
+
flex: 1;
|
|
55
|
+
font-size: 15px;
|
|
56
|
+
font-weight: 600;
|
|
57
|
+
color: ${({ $titleColor: o }) => o || l.m700};
|
|
58
|
+
line-height: 1.4;
|
|
59
|
+
`, q = t.div`
|
|
60
|
+
flex-shrink: 0;
|
|
61
|
+
display: flex;
|
|
62
|
+
align-items: center;
|
|
63
|
+
color: ${({ $chevronColor: o }) => o || c.m600};
|
|
64
|
+
transform: rotate(${({ $isOpen: o }) => o ? "180deg" : "0deg"});
|
|
65
|
+
transition: transform 0.22s ease;
|
|
66
|
+
`, z = t.div`
|
|
67
|
+
padding: 0 20px 18px calc(20px + 40px + 16px);
|
|
68
|
+
font-size: 14px;
|
|
69
|
+
line-height: 1.65;
|
|
70
|
+
color: ${({ $bodyColor: o }) => o || c.m700};
|
|
71
|
+
animation: ${O} 0.22s ease both;
|
|
72
|
+
|
|
73
|
+
a {
|
|
74
|
+
color: ${({ $bodyColor: o }) => o || l.m700};
|
|
75
|
+
text-decoration: underline;
|
|
76
|
+
}
|
|
77
|
+
`, A = l.m700, D = ({
|
|
78
|
+
items: o = [],
|
|
79
|
+
allowMultiple: n = !1,
|
|
80
|
+
activeBackground: s,
|
|
81
|
+
iconColor: h,
|
|
82
|
+
iconBackground: m,
|
|
83
|
+
itemBackground: $ = "#fff",
|
|
84
|
+
itemBorderColor: p,
|
|
85
|
+
titleColor: g,
|
|
86
|
+
bodyColor: b
|
|
87
|
+
}) => {
|
|
88
|
+
const [y, k] = v(/* @__PURE__ */ new Set()), C = (e) => {
|
|
89
|
+
k((i) => {
|
|
90
|
+
const d = n ? new Set(i) : /* @__PURE__ */ new Set();
|
|
91
|
+
return i.has(e) ? d.delete(e) : d.add(e), d;
|
|
92
|
+
});
|
|
93
|
+
};
|
|
94
|
+
return /* @__PURE__ */ a(S, { children: o.map((e) => {
|
|
95
|
+
var d, f, x;
|
|
96
|
+
const i = y.has(e.id);
|
|
97
|
+
return /* @__PURE__ */ u(
|
|
98
|
+
T,
|
|
99
|
+
{
|
|
100
|
+
$isOpen: i,
|
|
101
|
+
$activeBackground: s,
|
|
102
|
+
$itemBackground: $,
|
|
103
|
+
$itemBorderColor: p,
|
|
104
|
+
children: [
|
|
105
|
+
/* @__PURE__ */ u(
|
|
106
|
+
I,
|
|
107
|
+
{
|
|
108
|
+
type: "button",
|
|
109
|
+
"aria-expanded": i,
|
|
110
|
+
"aria-controls": `accordion-body-${e.id}`,
|
|
111
|
+
id: `accordion-header-${e.id}`,
|
|
112
|
+
onClick: () => C(e.id),
|
|
113
|
+
children: [
|
|
114
|
+
e.icon && /* @__PURE__ */ a(
|
|
115
|
+
R,
|
|
116
|
+
{
|
|
117
|
+
"aria-hidden": "true",
|
|
118
|
+
$iconColor: (f = (d = e.iconColor) != null ? d : h) != null ? f : A,
|
|
119
|
+
$iconBackground: (x = e.iconBackground) != null ? x : m,
|
|
120
|
+
$borderColor: p,
|
|
121
|
+
children: e.icon
|
|
122
|
+
}
|
|
123
|
+
),
|
|
124
|
+
/* @__PURE__ */ a(j, { $titleColor: g, children: e.title }),
|
|
125
|
+
/* @__PURE__ */ a(q, { "aria-hidden": "true", $isOpen: i, $chevronColor: g, children: /* @__PURE__ */ a(B, { size: 18 }) })
|
|
126
|
+
]
|
|
127
|
+
}
|
|
128
|
+
),
|
|
129
|
+
i && /* @__PURE__ */ a(
|
|
130
|
+
z,
|
|
131
|
+
{
|
|
132
|
+
id: `accordion-body-${e.id}`,
|
|
133
|
+
role: "region",
|
|
134
|
+
"aria-labelledby": `accordion-header-${e.id}`,
|
|
135
|
+
$bodyColor: b,
|
|
136
|
+
children: e.content
|
|
137
|
+
}
|
|
138
|
+
)
|
|
139
|
+
]
|
|
140
|
+
},
|
|
141
|
+
e.id
|
|
142
|
+
);
|
|
143
|
+
}) });
|
|
144
|
+
};
|
|
145
|
+
D.propTypes = {
|
|
146
|
+
/** Array of accordion items */
|
|
147
|
+
items: r.arrayOf(
|
|
148
|
+
r.shape({
|
|
149
|
+
/** Unique identifier for the item */
|
|
150
|
+
id: r.oneOfType([r.string, r.number]).isRequired,
|
|
151
|
+
/** Question / heading text */
|
|
152
|
+
title: r.node.isRequired,
|
|
153
|
+
/** Answer / expanded content (string or JSX) */
|
|
154
|
+
content: r.node.isRequired,
|
|
155
|
+
/** Optional icon node rendered in the icon box */
|
|
156
|
+
icon: r.node,
|
|
157
|
+
/** Color applied to the icon — defaults to black.m700 */
|
|
158
|
+
iconColor: r.string,
|
|
159
|
+
/** Background color of the icon box for this item — overrides accordion-level iconBackground */
|
|
160
|
+
iconBackground: r.string
|
|
161
|
+
})
|
|
162
|
+
),
|
|
163
|
+
/** When true, multiple items can be open simultaneously */
|
|
164
|
+
allowMultiple: r.bool,
|
|
165
|
+
/** Background color applied to the expanded item — use a token from the colors palette e.g. blue.m50 */
|
|
166
|
+
activeBackground: r.string,
|
|
167
|
+
/** Default icon color for all items — overridden per-item via item.iconColor. Defaults to black.m700 */
|
|
168
|
+
iconColor: r.string,
|
|
169
|
+
/** Default icon box background for all items — overridden per-item via item.iconBackground */
|
|
170
|
+
iconBackground: r.string,
|
|
171
|
+
/** Background color for resting (closed) items. Defaults to '#fff' — use a palette token e.g. blueGray.m800 for dark mode */
|
|
172
|
+
itemBackground: r.string,
|
|
173
|
+
/** Border color for all items — use a palette token e.g. blueGray.m600 for dark mode */
|
|
174
|
+
itemBorderColor: r.string,
|
|
175
|
+
/** Title and chevron text color — use a light palette token e.g. blueGray.m100 for dark mode */
|
|
176
|
+
titleColor: r.string,
|
|
177
|
+
/** Body content text color — use a muted light token e.g. blueGray.m300 for dark mode */
|
|
178
|
+
bodyColor: r.string
|
|
179
|
+
};
|
|
180
|
+
export {
|
|
181
|
+
D as default
|
|
182
|
+
};
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
1
|
+
import { jsxs as g, jsx as e, Fragment as K } from "react/jsx-runtime";
|
|
2
|
+
import { useState as d, useRef as vt, useEffect as z } from "react";
|
|
3
3
|
import n from "prop-types";
|
|
4
|
-
import
|
|
4
|
+
import At from "../Glass/Glass.js";
|
|
5
5
|
import St from "./components/TimerRing/TimerRing.js";
|
|
6
|
-
import
|
|
6
|
+
import m from "../../colors/white.js";
|
|
7
7
|
import { black as kt } from "../../colors/black.js";
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
8
|
+
import Tt from "../../colors/red.js";
|
|
9
|
+
import xt from "../Icons/ClockCircleOutline.js";
|
|
10
|
+
import Rt from "../Icons/Add.js";
|
|
11
11
|
import Pt from "../Icons/MediaStopFilled.js";
|
|
12
12
|
import It from "../Icons/MediaPauseFilled.js";
|
|
13
13
|
import Mt from "../Icons/MediaPlayFilled.js";
|
|
14
14
|
import { COLOR_MAPPING as Dt } from "./constants.js";
|
|
15
|
-
import
|
|
16
|
-
const t = (
|
|
15
|
+
import o, { css as p, keyframes as f } from "styled-components";
|
|
16
|
+
const t = (r) => ({ $size: u }) => u / r, q = 1, Ct = 16.67, J = 1.67, Ot = 3.404, Et = ({ $color: r }) => Dt[r], _ = p`
|
|
17
17
|
position: absolute;
|
|
18
18
|
bottom: 50%;
|
|
19
19
|
transform-origin: bottom;
|
|
20
20
|
border-radius: 4px;
|
|
21
21
|
transition: rotate 0.3s ease-in-out;
|
|
22
22
|
rotate: var(--hand-rotate);
|
|
23
|
-
`,
|
|
23
|
+
`, zt = o.div`
|
|
24
24
|
position: relative;
|
|
25
25
|
height: ${t(q)}rem;
|
|
26
26
|
width: ${t(q)}rem;
|
|
27
27
|
border-radius: ${t(Ct)}rem;
|
|
28
|
-
background-color: ${
|
|
29
|
-
`,
|
|
28
|
+
background-color: ${Et};
|
|
29
|
+
`, _t = o.div`
|
|
30
30
|
position: absolute;
|
|
31
31
|
left: 50%;
|
|
32
32
|
top: 48%;
|
|
@@ -36,25 +36,25 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
|
|
|
36
36
|
border-radius: 50%;
|
|
37
37
|
background-color: rgba(0, 0, 0, 0.16);
|
|
38
38
|
pointer-events: none;
|
|
39
|
-
`, Q =
|
|
39
|
+
`, Q = o.div`
|
|
40
40
|
position: absolute;
|
|
41
41
|
left: 50%;
|
|
42
42
|
top: 48%;
|
|
43
43
|
transform: translate(-50%, -50%);
|
|
44
|
-
`, V =
|
|
45
|
-
color: ${
|
|
44
|
+
`, V = o.div`
|
|
45
|
+
color: ${m};
|
|
46
46
|
font-size: ${t(13.33)}rem;
|
|
47
47
|
font-weight: 650;
|
|
48
48
|
text-align: center;
|
|
49
49
|
opacity: 0.84;
|
|
50
|
-
`,
|
|
50
|
+
`, Ft = o.span`
|
|
51
51
|
position: absolute;
|
|
52
52
|
width: ${t(120)}rem;
|
|
53
53
|
height: ${t(120)}rem;
|
|
54
54
|
background: rgba(255, 255, 255, 0.4);
|
|
55
55
|
transform-origin: ${t(Ot)}rem;
|
|
56
56
|
border-radius: 2px;
|
|
57
|
-
rotate: ${({ $i:
|
|
57
|
+
rotate: ${({ $i: r }) => `${r * 6}deg`};
|
|
58
58
|
|
|
59
59
|
&:nth-child(5n) {
|
|
60
60
|
width: ${t(90)}rem;
|
|
@@ -67,46 +67,67 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
|
|
|
67
67
|
height: ${t(130)}rem;
|
|
68
68
|
background: rgba(255, 255, 255);
|
|
69
69
|
}
|
|
70
|
-
`,
|
|
70
|
+
`, Ht = o.div`
|
|
71
71
|
position: relative;
|
|
72
72
|
height: 100%;
|
|
73
73
|
width: 100%;
|
|
74
|
-
`,
|
|
74
|
+
`, Nt = o.div`
|
|
75
75
|
position: absolute;
|
|
76
76
|
left: 1.6%;
|
|
77
77
|
top: 43.8%;
|
|
78
78
|
transform: translate(-50%, -50%) rotate(6.7deg);
|
|
79
|
-
`,
|
|
79
|
+
`, Wt = o.div`
|
|
80
80
|
${_};
|
|
81
81
|
width: ${t(50)}rem;
|
|
82
82
|
height: ${t(5.33)}rem;
|
|
83
|
-
background: ${
|
|
84
|
-
`, Lt =
|
|
83
|
+
background: ${m};
|
|
84
|
+
`, Lt = o.div`
|
|
85
85
|
${_};
|
|
86
86
|
width: ${t(80)}rem;
|
|
87
87
|
height: ${t(4)}rem;
|
|
88
88
|
background: ${kt.m200};
|
|
89
|
-
`,
|
|
89
|
+
`, Xt = o.div`
|
|
90
90
|
${_};
|
|
91
91
|
width: ${t(133.33)}rem;
|
|
92
92
|
height: ${t(3.64)}rem;
|
|
93
|
-
background: ${
|
|
94
|
-
`, Z =
|
|
93
|
+
background: ${Tt.m800};
|
|
94
|
+
`, Z = f`
|
|
95
95
|
from { opacity: 1; transform: scale(1); }
|
|
96
96
|
to { opacity: 0; transform: scale(0.9); }
|
|
97
|
-
`,
|
|
97
|
+
`, Yt = f`
|
|
98
98
|
from { opacity: 0; transform: translateY(-5px); }
|
|
99
99
|
to { opacity: 1; transform: translateY(0); }
|
|
100
|
-
`,
|
|
100
|
+
`, Bt = f`
|
|
101
101
|
from { opacity: 0; transform: translateX(-50%) translateY(calc(-100% + 8px)) scale(0.9); }
|
|
102
102
|
to { opacity: 1; transform: translateX(-50%) translateY(-100%) scale(1); }
|
|
103
|
-
`,
|
|
103
|
+
`, jt = f`
|
|
104
104
|
from { opacity: 1; transform: translateX(-50%) translateY(-100%) scale(1); }
|
|
105
105
|
to { opacity: 0; transform: translateX(-50%) translateY(calc(-100% + 8px)) scale(0.85); }
|
|
106
|
-
|
|
106
|
+
`;
|
|
107
|
+
o.span`
|
|
107
108
|
display: inline-block;
|
|
108
|
-
animation: ${
|
|
109
|
-
|
|
109
|
+
animation: ${Yt} 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
|
110
|
+
`;
|
|
111
|
+
const Gt = f`
|
|
112
|
+
0% { opacity: 0; }
|
|
113
|
+
100% { opacity: 1; }
|
|
114
|
+
`, Ut = o.span`
|
|
115
|
+
animation: ${Gt} 0.35s ease-out forwards;
|
|
116
|
+
`, Kt = f`
|
|
117
|
+
0% { transform: perspective(200px) rotateX(0deg); }
|
|
118
|
+
100% { transform: perspective(200px) rotateX(-90deg); }
|
|
119
|
+
`, qt = f`
|
|
120
|
+
0% { transform: perspective(200px) rotateX(90deg); }
|
|
121
|
+
100% { transform: perspective(200px) rotateX(0deg); }
|
|
122
|
+
`, Jt = o.span`
|
|
123
|
+
display: inline-block;
|
|
124
|
+
${({ $phase: r }) => r === "out" && p`
|
|
125
|
+
animation: ${Kt} 0.14s ease-in forwards;
|
|
126
|
+
`}
|
|
127
|
+
${({ $phase: r }) => r === "in" && p`
|
|
128
|
+
animation: ${qt} 0.14s ease-out forwards;
|
|
129
|
+
`}
|
|
130
|
+
`, Qt = o.div`
|
|
110
131
|
position: absolute;
|
|
111
132
|
inset: 0;
|
|
112
133
|
pointer-events: none;
|
|
@@ -119,10 +140,10 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
|
|
|
119
140
|
rgba(0, 0, 0, 0.3) 85%,
|
|
120
141
|
rgba(0, 0, 0, 0.42) 100%
|
|
121
142
|
);
|
|
122
|
-
${({ $dismissing:
|
|
143
|
+
${({ $dismissing: r }) => r && p`
|
|
123
144
|
animation: ${Z} 0.6s ease-out forwards;
|
|
124
145
|
`}
|
|
125
|
-
`,
|
|
146
|
+
`, Vt = o.div`
|
|
126
147
|
position: absolute;
|
|
127
148
|
left: 50%;
|
|
128
149
|
top: calc(${t(100 / 12)}rem - ${t(55)}rem);
|
|
@@ -141,12 +162,12 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
|
|
|
141
162
|
-webkit-backdrop-filter: blur(6px);
|
|
142
163
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
143
164
|
pointer-events: none;
|
|
144
|
-
animation: ${({ $dismissing:
|
|
145
|
-
${
|
|
146
|
-
` :
|
|
147
|
-
${
|
|
165
|
+
animation: ${({ $dismissing: r }) => r ? p`
|
|
166
|
+
${jt} 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards
|
|
167
|
+
` : p`
|
|
168
|
+
${Bt} 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both
|
|
148
169
|
`};
|
|
149
|
-
`,
|
|
170
|
+
`, Zt = o.div`
|
|
150
171
|
position: absolute;
|
|
151
172
|
bottom: 6%;
|
|
152
173
|
left: 8%;
|
|
@@ -154,16 +175,16 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
|
|
|
154
175
|
align-items: center;
|
|
155
176
|
gap: ${t(50)}rem;
|
|
156
177
|
|
|
157
|
-
${({ $noActions:
|
|
178
|
+
${({ $noActions: r }) => r && p`
|
|
158
179
|
pointer-events: none;
|
|
159
180
|
opacity: 0.5;
|
|
160
181
|
`}
|
|
161
|
-
`,
|
|
182
|
+
`, te = o.div`
|
|
162
183
|
position: absolute;
|
|
163
184
|
bottom: 6%;
|
|
164
185
|
right: 8%;
|
|
165
186
|
border-radius: ${t(50)}rem;
|
|
166
|
-
`,
|
|
187
|
+
`, T = o.button`
|
|
167
188
|
position: relative;
|
|
168
189
|
height: ${t(8.33)}rem;
|
|
169
190
|
width: ${t(8.33)}rem;
|
|
@@ -176,45 +197,45 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
|
|
|
176
197
|
padding: 0;
|
|
177
198
|
|
|
178
199
|
&:focus-visible {
|
|
179
|
-
outline: 2px solid ${
|
|
200
|
+
outline: 2px solid ${m};
|
|
180
201
|
outline-offset: 2px;
|
|
181
202
|
}
|
|
182
|
-
`,
|
|
203
|
+
`, ee = o(Rt)`
|
|
183
204
|
position: absolute;
|
|
184
205
|
left: 50%;
|
|
185
206
|
top: 50%;
|
|
186
207
|
transform: translate(-50%, -50%);
|
|
187
|
-
`,
|
|
208
|
+
`, re = o(Pt)`
|
|
188
209
|
position: absolute;
|
|
189
210
|
left: 50%;
|
|
190
211
|
top: 50%;
|
|
191
212
|
transform: translate(-50%, -50%);
|
|
192
|
-
`,
|
|
213
|
+
`, oe = o(It)`
|
|
193
214
|
position: absolute;
|
|
194
215
|
left: 50%;
|
|
195
216
|
top: 50%;
|
|
196
217
|
transform: translate(-50%, -50%);
|
|
197
|
-
`,
|
|
218
|
+
`, ie = o(Mt)`
|
|
198
219
|
position: absolute;
|
|
199
220
|
left: 50%;
|
|
200
221
|
top: 50%;
|
|
201
222
|
transform: translate(-50%, -50%);
|
|
202
|
-
`,
|
|
223
|
+
`, ne = o.span`
|
|
203
224
|
position: absolute;
|
|
204
225
|
width: 1px;
|
|
205
226
|
height: 1px;
|
|
206
227
|
overflow: hidden;
|
|
207
228
|
clip-path: inset(50%);
|
|
208
229
|
white-space: nowrap;
|
|
209
|
-
`,
|
|
230
|
+
`, ae = o.div`
|
|
210
231
|
position: absolute;
|
|
211
232
|
width: ${t(35)}rem;
|
|
212
233
|
height: ${t(35)}rem;
|
|
213
234
|
border-radius: 50%;
|
|
214
|
-
background-color: ${
|
|
235
|
+
background-color: ${m};
|
|
215
236
|
left: calc(-${t(70)}rem);
|
|
216
237
|
top: calc(-${t(100 / 33)}rem - ${t(70)}rem);
|
|
217
|
-
`,
|
|
238
|
+
`, se = o.div`
|
|
218
239
|
position: absolute;
|
|
219
240
|
left: 50%;
|
|
220
241
|
top: 48%;
|
|
@@ -223,89 +244,96 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
|
|
|
223
244
|
rotate: var(--bullet-rotate);
|
|
224
245
|
transform-origin: 0 0;
|
|
225
246
|
transition: rotate 0.3s ease;
|
|
226
|
-
${({ $dismissing:
|
|
247
|
+
${({ $dismissing: r }) => r && p`
|
|
227
248
|
animation: ${Z} 0.6s ease-out forwards;
|
|
228
249
|
`}
|
|
229
|
-
`,
|
|
230
|
-
|
|
231
|
-
|
|
250
|
+
`, le = ({ value: r }) => {
|
|
251
|
+
const [u, w] = d(r), [l, h] = d(null);
|
|
252
|
+
return z(() => {
|
|
253
|
+
r !== u && h("out");
|
|
254
|
+
}, [r]), /* @__PURE__ */ e(Jt, { $phase: l, onAnimationEnd: () => {
|
|
255
|
+
l === "out" ? (w(r), h("in")) : h(null);
|
|
256
|
+
}, children: u });
|
|
257
|
+
}, A = () => {
|
|
258
|
+
}, ce = (r) => () => {
|
|
259
|
+
const l = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: r }).split(", ")[1].split(" ")[0], [h, a, S] = l.split(":").map(Number);
|
|
232
260
|
return {
|
|
233
|
-
second:
|
|
234
|
-
minute: a * 6 +
|
|
235
|
-
hour:
|
|
261
|
+
second: S * 6,
|
|
262
|
+
minute: a * 6 + S * 0.1,
|
|
263
|
+
hour: h % 12 * 30 + a * 0.5
|
|
236
264
|
};
|
|
237
|
-
},
|
|
238
|
-
color:
|
|
239
|
-
showTime:
|
|
240
|
-
showTimeWithSec:
|
|
241
|
-
timeZone:
|
|
242
|
-
isDigital:
|
|
265
|
+
}, de = ({
|
|
266
|
+
color: r = "green",
|
|
267
|
+
showTime: u = !0,
|
|
268
|
+
showTimeWithSec: w = !0,
|
|
269
|
+
timeZone: l = "Asia/Kolkata",
|
|
270
|
+
isDigital: h = !0,
|
|
243
271
|
timerSeconds: a = 0,
|
|
244
|
-
onTimerAdd:
|
|
245
|
-
onTimerComplete: tt =
|
|
246
|
-
onTimerRemove: et =
|
|
247
|
-
onTimerPause: rt =
|
|
248
|
-
onTimerPlay: ot =
|
|
249
|
-
size:
|
|
272
|
+
onTimerAdd: S = A,
|
|
273
|
+
onTimerComplete: tt = A,
|
|
274
|
+
onTimerRemove: et = A,
|
|
275
|
+
onTimerPause: rt = A,
|
|
276
|
+
onTimerPlay: ot = A,
|
|
277
|
+
size: F = 30,
|
|
250
278
|
...it
|
|
251
279
|
}) => {
|
|
252
|
-
const [
|
|
253
|
-
|
|
254
|
-
H.current =
|
|
255
|
-
}, [
|
|
280
|
+
const [x, nt] = d(/* @__PURE__ */ new Date()), [s, R] = d(0), [k, P] = d(!1), [I, at] = d(ce(l)), [st, M] = d(0), [y, D] = d(!1), H = vt(k), i = Math.round(F), C = Math.round(14 * F / 20);
|
|
281
|
+
z(() => {
|
|
282
|
+
H.current = k;
|
|
283
|
+
}, [k]);
|
|
256
284
|
const lt = () => {
|
|
257
|
-
|
|
258
|
-
}, dt = () => {
|
|
259
|
-
D(!0), et();
|
|
285
|
+
R(a), M(a % 60 * 6), P(!1), S();
|
|
260
286
|
}, ct = () => {
|
|
261
|
-
|
|
287
|
+
D(!0), et();
|
|
288
|
+
}, dt = () => {
|
|
289
|
+
R(0), M(0), D(!1);
|
|
262
290
|
}, mt = () => {
|
|
263
291
|
P(!0), rt();
|
|
264
292
|
}, pt = () => {
|
|
265
293
|
P(!1), ot();
|
|
266
294
|
};
|
|
267
|
-
|
|
268
|
-
const
|
|
269
|
-
const
|
|
270
|
-
nt(
|
|
271
|
-
const gt =
|
|
272
|
-
const
|
|
273
|
-
return j -
|
|
295
|
+
z(() => {
|
|
296
|
+
const v = setInterval(() => {
|
|
297
|
+
const b = /* @__PURE__ */ new Date();
|
|
298
|
+
nt(b), at((c) => {
|
|
299
|
+
const gt = b.toLocaleString("en-Us", { hour12: !0, timeZone: l }).split(", ")[1].split(" ")[0], [ft, Y, B] = gt.split(":").map(Number), $t = B * 6, wt = Y * 6 + B * 0.1, yt = ft % 12 * 30 + Y * 0.5, E = (j, G) => {
|
|
300
|
+
const U = j % 360;
|
|
301
|
+
return j - U + G + (G < U ? 360 : 0);
|
|
274
302
|
};
|
|
275
303
|
return {
|
|
276
|
-
second:
|
|
277
|
-
minute:
|
|
278
|
-
hour:
|
|
304
|
+
second: E(c.second, $t),
|
|
305
|
+
minute: E(c.minute, wt),
|
|
306
|
+
hour: E(c.hour, yt)
|
|
279
307
|
};
|
|
280
|
-
}), H.current || (
|
|
308
|
+
}), H.current || (R((c) => (c - 1 === 0 && (tt(), D(!0)), c - 1)), M((c) => c - 6));
|
|
281
309
|
}, 1e3);
|
|
282
|
-
return () => clearInterval(
|
|
310
|
+
return () => clearInterval(v);
|
|
283
311
|
}, []);
|
|
284
|
-
const O =
|
|
285
|
-
return /* @__PURE__ */
|
|
286
|
-
/* @__PURE__ */ e(
|
|
287
|
-
(
|
|
312
|
+
const O = x.toLocaleString("en-Us", { hour12: !0, timeZone: l }).split(", ")[1], N = O.split(" ")[0], W = O.split(" ")[1], L = O.split(":").slice(0, 2).join(":"), $ = !(Number.isInteger(s) && s > 0), ut = String(Math.floor(s / 60)).padStart(2, "0"), ht = String(s % 60).padStart(2, "0"), bt = `${ut}:${ht}`, X = `${w ? N : L} ${W}`;
|
|
313
|
+
return /* @__PURE__ */ g(zt, { $color: r, role: "region", "aria-label": "Clock", $size: i, ...it, children: [
|
|
314
|
+
/* @__PURE__ */ e(At, { borderRadius: `${t(16.67)({ $size: i })}rem`, "aria-hidden": "true" }),
|
|
315
|
+
(!$ || y) && /* @__PURE__ */ g(K, { children: [
|
|
288
316
|
/* @__PURE__ */ e(
|
|
289
|
-
|
|
317
|
+
Qt,
|
|
290
318
|
{
|
|
291
|
-
$dismissing:
|
|
292
|
-
onAnimationEnd:
|
|
319
|
+
$dismissing: y,
|
|
320
|
+
onAnimationEnd: dt,
|
|
293
321
|
"aria-hidden": "true",
|
|
294
322
|
children: /* @__PURE__ */ e(St, { progress: s >= 60 ? 1 : s % 60 / 60 })
|
|
295
323
|
}
|
|
296
324
|
),
|
|
297
325
|
/* @__PURE__ */ e(
|
|
298
|
-
|
|
326
|
+
se,
|
|
299
327
|
{
|
|
300
|
-
$size:
|
|
328
|
+
$size: i,
|
|
301
329
|
style: { "--bullet-rotate": `${st}deg` },
|
|
302
|
-
$dismissing:
|
|
330
|
+
$dismissing: y,
|
|
303
331
|
"aria-hidden": "true",
|
|
304
|
-
children: /* @__PURE__ */ e(
|
|
332
|
+
children: /* @__PURE__ */ e(ae, { $size: i })
|
|
305
333
|
}
|
|
306
334
|
),
|
|
307
335
|
/* @__PURE__ */ e(
|
|
308
|
-
|
|
336
|
+
ne,
|
|
309
337
|
{
|
|
310
338
|
role: "timer",
|
|
311
339
|
"aria-live": "polite",
|
|
@@ -313,16 +341,16 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
|
|
|
313
341
|
}
|
|
314
342
|
)
|
|
315
343
|
] }),
|
|
316
|
-
|
|
317
|
-
/* @__PURE__ */ e(
|
|
318
|
-
|
|
319
|
-
/* @__PURE__ */ e(V, { $size:
|
|
320
|
-
/* @__PURE__ */ e(V, { $size:
|
|
321
|
-
] }) : /* @__PURE__ */
|
|
344
|
+
u && /* @__PURE__ */ g(K, { children: [
|
|
345
|
+
/* @__PURE__ */ e(_t, { "aria-hidden": "true", $size: i, children: /* @__PURE__ */ e(Ht, { children: /* @__PURE__ */ e(Nt, { "aria-hidden": "true", children: [...Array(60)].map((v, b) => /* @__PURE__ */ e(Ft, { $i: b, $size: i }, b)) }) }) }),
|
|
346
|
+
h ? /* @__PURE__ */ g(Q, { as: "time", dateTime: x.toISOString(), "aria-label": X, children: [
|
|
347
|
+
/* @__PURE__ */ e(V, { $size: i, "aria-hidden": "true", children: w ? N : L }),
|
|
348
|
+
/* @__PURE__ */ e(V, { $size: i, "aria-hidden": "true", children: W })
|
|
349
|
+
] }) : /* @__PURE__ */ g(Q, { as: "time", dateTime: x.toISOString(), "aria-label": X, children: [
|
|
322
350
|
/* @__PURE__ */ e(
|
|
323
|
-
|
|
351
|
+
Wt,
|
|
324
352
|
{
|
|
325
|
-
$size:
|
|
353
|
+
$size: i,
|
|
326
354
|
style: { "--hand-rotate": `${I.hour}deg` },
|
|
327
355
|
"aria-hidden": "true"
|
|
328
356
|
}
|
|
@@ -330,87 +358,87 @@ const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.40
|
|
|
330
358
|
/* @__PURE__ */ e(
|
|
331
359
|
Lt,
|
|
332
360
|
{
|
|
333
|
-
$size:
|
|
361
|
+
$size: i,
|
|
334
362
|
style: { "--hand-rotate": `${I.minute}deg` },
|
|
335
363
|
"aria-hidden": "true"
|
|
336
364
|
}
|
|
337
365
|
),
|
|
338
366
|
/* @__PURE__ */ e(
|
|
339
|
-
|
|
367
|
+
Xt,
|
|
340
368
|
{
|
|
341
|
-
$size:
|
|
369
|
+
$size: i,
|
|
342
370
|
style: { "--hand-rotate": `${I.second}deg` },
|
|
343
371
|
"aria-hidden": "true"
|
|
344
372
|
}
|
|
345
373
|
)
|
|
346
374
|
] })
|
|
347
375
|
] }),
|
|
348
|
-
a > 0 && /* @__PURE__ */
|
|
349
|
-
|
|
376
|
+
a > 0 && /* @__PURE__ */ g(
|
|
377
|
+
Zt,
|
|
350
378
|
{
|
|
351
|
-
$size:
|
|
352
|
-
$noActions:
|
|
379
|
+
$size: i,
|
|
380
|
+
$noActions: $,
|
|
353
381
|
role: "group",
|
|
354
382
|
"aria-label": "Timer controls",
|
|
355
383
|
children: [
|
|
356
384
|
/* @__PURE__ */ e(
|
|
357
|
-
|
|
385
|
+
T,
|
|
358
386
|
{
|
|
359
387
|
type: "button",
|
|
360
|
-
onClick:
|
|
361
|
-
$size:
|
|
388
|
+
onClick: ct,
|
|
389
|
+
$size: i,
|
|
362
390
|
"aria-label": "Stop timer",
|
|
363
|
-
"aria-disabled":
|
|
364
|
-
children: /* @__PURE__ */ e(
|
|
391
|
+
"aria-disabled": $,
|
|
392
|
+
children: /* @__PURE__ */ e(re, { color: m, size: C, "aria-hidden": "true" })
|
|
365
393
|
}
|
|
366
394
|
),
|
|
367
|
-
|
|
368
|
-
|
|
395
|
+
$ || !k ? /* @__PURE__ */ e(
|
|
396
|
+
T,
|
|
369
397
|
{
|
|
370
398
|
type: "button",
|
|
371
399
|
onClick: mt,
|
|
372
|
-
$size:
|
|
400
|
+
$size: i,
|
|
373
401
|
"aria-label": "Pause timer",
|
|
374
|
-
"aria-disabled":
|
|
375
|
-
children: /* @__PURE__ */ e(
|
|
402
|
+
"aria-disabled": $,
|
|
403
|
+
children: /* @__PURE__ */ e(oe, { color: m, size: C, "aria-hidden": "true" })
|
|
376
404
|
}
|
|
377
|
-
) : /* @__PURE__ */ e(
|
|
405
|
+
) : /* @__PURE__ */ e(T, { type: "button", onClick: pt, "aria-label": "Resume timer", $size: i, children: /* @__PURE__ */ e(ie, { color: m, size: C, "aria-hidden": "true" }) })
|
|
378
406
|
]
|
|
379
407
|
}
|
|
380
408
|
),
|
|
381
|
-
(
|
|
382
|
-
|
|
409
|
+
(!$ || y) && /* @__PURE__ */ g(
|
|
410
|
+
Vt,
|
|
383
411
|
{
|
|
384
|
-
$size:
|
|
385
|
-
$dismissing:
|
|
412
|
+
$size: i,
|
|
413
|
+
$dismissing: y,
|
|
386
414
|
"aria-label": `${s} seconds remaining`,
|
|
387
415
|
children: [
|
|
388
416
|
/* @__PURE__ */ e(
|
|
389
|
-
|
|
417
|
+
xt,
|
|
390
418
|
{
|
|
391
419
|
color: "rgba(255,255,255,0.82)",
|
|
392
420
|
style: { width: "1em", height: "1em", flexShrink: 0 }
|
|
393
421
|
}
|
|
394
422
|
),
|
|
395
|
-
|
|
396
|
-
(
|
|
423
|
+
bt.split("").map(
|
|
424
|
+
(v, b) => v === ":" ? /* @__PURE__ */ e(Ut, { children: ":" }, `colon-${s}`) : /* @__PURE__ */ e(le, { value: v }, b)
|
|
397
425
|
)
|
|
398
426
|
]
|
|
399
427
|
}
|
|
400
428
|
),
|
|
401
|
-
a > 0 && /* @__PURE__ */ e(
|
|
402
|
-
|
|
429
|
+
a > 0 && /* @__PURE__ */ e(te, { role: "group", $size: i, "aria-label": "Start timer", children: /* @__PURE__ */ e(
|
|
430
|
+
T,
|
|
403
431
|
{
|
|
404
432
|
type: "button",
|
|
405
433
|
onClick: lt,
|
|
406
|
-
$size:
|
|
434
|
+
$size: i,
|
|
407
435
|
"aria-label": `Start ${a} second timer`,
|
|
408
|
-
children: /* @__PURE__ */ e(
|
|
436
|
+
children: /* @__PURE__ */ e(ee, { color: m, size: i, "aria-hidden": "true" })
|
|
409
437
|
}
|
|
410
438
|
) })
|
|
411
439
|
] });
|
|
412
440
|
};
|
|
413
|
-
|
|
441
|
+
de.propTypes = {
|
|
414
442
|
/** Color theme key for the clock and accent elements. Defaults to `'green'` */
|
|
415
443
|
color: n.string,
|
|
416
444
|
/** Diameter of the clock in pixels. Defaults to `30` */
|
|
@@ -437,5 +465,5 @@ ne.propTypes = {
|
|
|
437
465
|
onTimerPlay: n.func
|
|
438
466
|
};
|
|
439
467
|
export {
|
|
440
|
-
|
|
468
|
+
de as default
|
|
441
469
|
};
|
package/index.d.ts
CHANGED
|
@@ -49,6 +49,42 @@ export type ThemeColor =
|
|
|
49
49
|
|
|
50
50
|
export type ComponentSize = 'small' | 'medium' | 'large';
|
|
51
51
|
|
|
52
|
+
// ---------------------------------------------------------------------------
|
|
53
|
+
// Accordion
|
|
54
|
+
// ---------------------------------------------------------------------------
|
|
55
|
+
|
|
56
|
+
export interface AccordionItem {
|
|
57
|
+
id: string | number;
|
|
58
|
+
title: React.ReactNode;
|
|
59
|
+
content: React.ReactNode;
|
|
60
|
+
icon?: React.ReactNode;
|
|
61
|
+
/** Color applied to the icon — defaults to black.m700 */
|
|
62
|
+
iconColor?: string;
|
|
63
|
+
/** Background color of the icon box for this item — overrides accordion-level iconBackground */
|
|
64
|
+
iconBackground?: string;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
export interface AccordionProps {
|
|
68
|
+
items?: AccordionItem[];
|
|
69
|
+
allowMultiple?: boolean;
|
|
70
|
+
/** Background color applied to the expanded item — use a palette token e.g. blue.m50 */
|
|
71
|
+
activeBackground?: string;
|
|
72
|
+
/** Default icon color for all items — overridden per-item via item.iconColor. Defaults to black.m700 */
|
|
73
|
+
iconColor?: string;
|
|
74
|
+
/** Default icon box background for all items — overridden per-item via item.iconBackground */
|
|
75
|
+
iconBackground?: string;
|
|
76
|
+
/** Background color for resting (closed) items. Defaults to '#fff' — use a palette token e.g. blueGray.m800 for dark mode */
|
|
77
|
+
itemBackground?: string;
|
|
78
|
+
/** Border color for all items — use a palette token e.g. blueGray.m600 for dark mode */
|
|
79
|
+
itemBorderColor?: string;
|
|
80
|
+
/** Title and chevron text color — use a light palette token e.g. blueGray.m100 for dark mode */
|
|
81
|
+
titleColor?: string;
|
|
82
|
+
/** Body content text color — use a muted light token e.g. blueGray.m300 for dark mode */
|
|
83
|
+
bodyColor?: string;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
export declare const Accordion: React.FC<AccordionProps>;
|
|
87
|
+
|
|
52
88
|
// ---------------------------------------------------------------------------
|
|
53
89
|
// Link
|
|
54
90
|
// ---------------------------------------------------------------------------
|
package/index.js
CHANGED
|
@@ -12,8 +12,8 @@ import { default as h } from "./components/Link/Link.js";
|
|
|
12
12
|
import { default as E } from "./components/Modal/Modal.js";
|
|
13
13
|
import { default as L } from "./components/Timer/Timer.js";
|
|
14
14
|
import { default as v } from "./components/Shimmer/Shimmer.js";
|
|
15
|
-
import { default as
|
|
16
|
-
import { default as
|
|
15
|
+
import { default as A } from "./components/VideoPlayer/VideoPlayer.js";
|
|
16
|
+
import { default as z } from "./components/Image/Image.js";
|
|
17
17
|
import { default as N } from "./components/Carousel/Carousel.js";
|
|
18
18
|
import { default as R } from "./components/Typography/Headings/index.js";
|
|
19
19
|
import { default as G } from "./components/Typography/P/P.js";
|
|
@@ -39,8 +39,8 @@ import { default as he } from "./utils/groupBy.js";
|
|
|
39
39
|
import { default as Ee } from "./utils/hasEqualProps.js";
|
|
40
40
|
import { default as Le } from "./utils/addDays.js";
|
|
41
41
|
import { default as ve } from "./utils/countdown.js";
|
|
42
|
-
import { default as
|
|
43
|
-
import { default as
|
|
42
|
+
import { default as Ae } from "./utils/differenceInDays.js";
|
|
43
|
+
import { default as ze } from "./utils/isEmpty.js";
|
|
44
44
|
import { default as Ne } from "./utils/isEqual.js";
|
|
45
45
|
import { default as Re } from "./utils/isNonEmptyArray.js";
|
|
46
46
|
import { default as Ge } from "./utils/isPast.js";
|
|
@@ -66,7 +66,7 @@ import { default as Co } from "./utils/titleCase.js";
|
|
|
66
66
|
import { default as Io } from "./utils/truncate.js";
|
|
67
67
|
import { default as wo } from "./utils/uniqueBy.js";
|
|
68
68
|
import { default as Bo } from "./utils/isEmail.js";
|
|
69
|
-
import { default as
|
|
69
|
+
import { default as Oo } from "./utils/isPhone.js";
|
|
70
70
|
import { default as Fo } from "./utils/isURL.js";
|
|
71
71
|
import { default as Do } from "./utils/isPasswordStrong.js";
|
|
72
72
|
import { default as qo } from "./utils/isPAN.js";
|
|
@@ -93,7 +93,7 @@ import { default as Ca } from "./utils/setQueryParam.js";
|
|
|
93
93
|
import { default as Ia } from "./utils/removeQueryParam.js";
|
|
94
94
|
import { default as wa } from "./utils/buildURL.js";
|
|
95
95
|
import { default as Ba } from "./utils/redirectTo.js";
|
|
96
|
-
import { default as
|
|
96
|
+
import { default as Oa } from "./utils/getCurrentPath.js";
|
|
97
97
|
import { default as Fa } from "./utils/isActiveRoute.js";
|
|
98
98
|
import { default as Da } from "./utils/setLocalStorage.js";
|
|
99
99
|
import { default as qa } from "./utils/getLocalStorage.js";
|
|
@@ -120,7 +120,7 @@ import { default as Ct } from "./utils/trapFocus.js";
|
|
|
120
120
|
import { default as It } from "./utils/generateAriaId.js";
|
|
121
121
|
import { default as wt } from "./utils/handleKeyboardNavigation.js";
|
|
122
122
|
import { default as Bt } from "./utils/logError.js";
|
|
123
|
-
import { default as
|
|
123
|
+
import { default as Ot } from "./utils/captureException.js";
|
|
124
124
|
import { default as Ft } from "./utils/safeJSONParse.js";
|
|
125
125
|
import { default as Dt } from "./utils/safeJSONStringify.js";
|
|
126
126
|
import { default as qt } from "./utils/fallback.js";
|
|
@@ -147,7 +147,7 @@ import { default as Cr } from "./utils/fadeIn.js";
|
|
|
147
147
|
import { default as Ir } from "./utils/fadeOut.js";
|
|
148
148
|
import { default as wr } from "./utils/smoothScroll.js";
|
|
149
149
|
import { default as Br } from "./utils/waitForTransitionEnd.js";
|
|
150
|
-
import { default as
|
|
150
|
+
import { default as Or } from "./utils/trackEvent.js";
|
|
151
151
|
import { default as Fr } from "./utils/trackPageView.js";
|
|
152
152
|
import { default as Dr } from "./utils/measurePerformance.js";
|
|
153
153
|
import { default as qr } from "./utils/featureGate.js";
|
|
@@ -173,8 +173,8 @@ import { default as hf } from "./hooks/useLocalStorage.js";
|
|
|
173
173
|
import { default as Ef } from "./hooks/useSessionStorage.js";
|
|
174
174
|
import { default as Lf } from "./hooks/useOutsideClick.js";
|
|
175
175
|
import { default as vf } from "./hooks/useWindowSize.js";
|
|
176
|
-
import { default as
|
|
177
|
-
import { default as
|
|
176
|
+
import { default as Af } from "./hooks/useOnlineStatus.js";
|
|
177
|
+
import { default as zf } from "./hooks/useCopyToClipboard.js";
|
|
178
178
|
import { default as Nf } from "./hooks/useToggle.js";
|
|
179
179
|
import { default as Rf } from "./hooks/useTimeout.js";
|
|
180
180
|
import { default as Gf } from "./hooks/useInterval.js";
|
|
@@ -193,7 +193,9 @@ import { default as ms } from "./components/Input/Checkbox/Checkbox.js";
|
|
|
193
193
|
import { default as ps } from "./components/Input/RadioGroup/RadioGroup.js";
|
|
194
194
|
import { default as ns } from "./components/Input/FileUploader/FileUploader.js";
|
|
195
195
|
import { default as cs } from "./components/Switch/Switch.js";
|
|
196
|
+
import { default as Ss } from "./components/Accordion/Accordion.js";
|
|
196
197
|
export {
|
|
198
|
+
Ss as Accordion,
|
|
197
199
|
k as Button,
|
|
198
200
|
N as Carousel,
|
|
199
201
|
ms as Checkbox,
|
|
@@ -202,7 +204,7 @@ export {
|
|
|
202
204
|
ns as FileUploader,
|
|
203
205
|
U as Form,
|
|
204
206
|
R as Headings,
|
|
205
|
-
|
|
207
|
+
z as Image,
|
|
206
208
|
fs as Input,
|
|
207
209
|
h as Link,
|
|
208
210
|
m as Loader,
|
|
@@ -222,7 +224,7 @@ export {
|
|
|
222
224
|
L as Timer,
|
|
223
225
|
r as Toast,
|
|
224
226
|
f as ToastContainer,
|
|
225
|
-
|
|
227
|
+
A as VideoPlayer,
|
|
226
228
|
Le as addDays,
|
|
227
229
|
bt as announceToScreenReader,
|
|
228
230
|
Jr as auditLog,
|
|
@@ -231,7 +233,7 @@ export {
|
|
|
231
233
|
ir as cancelablePromise,
|
|
232
234
|
K as capFirstLetter,
|
|
233
235
|
X as capitalize,
|
|
234
|
-
|
|
236
|
+
Ot as captureException,
|
|
235
237
|
$ as chunk,
|
|
236
238
|
oe as clamp,
|
|
237
239
|
Ha as clearStorage,
|
|
@@ -247,7 +249,7 @@ export {
|
|
|
247
249
|
fe as deepClone,
|
|
248
250
|
sf as deepFreeze,
|
|
249
251
|
yt as detectOutsideClick,
|
|
250
|
-
|
|
252
|
+
Ae as differenceInDays,
|
|
251
253
|
da as downloadFile,
|
|
252
254
|
Cr as fadeIn,
|
|
253
255
|
Ir as fadeOut,
|
|
@@ -265,7 +267,7 @@ export {
|
|
|
265
267
|
gr as fuzzySearch,
|
|
266
268
|
It as generateAriaId,
|
|
267
269
|
Te as generateInitials,
|
|
268
|
-
|
|
270
|
+
Oa as getCurrentPath,
|
|
269
271
|
ke as getGreetingByTime,
|
|
270
272
|
ga as getJsonContentAsQr,
|
|
271
273
|
qa as getLocalStorage,
|
|
@@ -285,7 +287,7 @@ export {
|
|
|
285
287
|
Mt as isAuthenticated,
|
|
286
288
|
ra as isDarkMode,
|
|
287
289
|
Bo as isEmail,
|
|
288
|
-
|
|
290
|
+
ze as isEmpty,
|
|
289
291
|
Ne as isEqual,
|
|
290
292
|
_t as isFeatureEnabled,
|
|
291
293
|
Jo as isGST,
|
|
@@ -296,7 +298,7 @@ export {
|
|
|
296
298
|
qo as isPAN,
|
|
297
299
|
Do as isPasswordStrong,
|
|
298
300
|
Ge as isPast,
|
|
299
|
-
|
|
301
|
+
Oo as isPhone,
|
|
300
302
|
Vo as isRequired,
|
|
301
303
|
aa as isSafari,
|
|
302
304
|
Qe as isToday,
|
|
@@ -362,13 +364,13 @@ export {
|
|
|
362
364
|
bo as timeAgo,
|
|
363
365
|
Co as titleCase,
|
|
364
366
|
it as toggleFullscreen,
|
|
365
|
-
|
|
367
|
+
Or as trackEvent,
|
|
366
368
|
Fr as trackPageView,
|
|
367
369
|
Ct as trapFocus,
|
|
368
370
|
Io as truncate,
|
|
369
371
|
wo as uniqueBy,
|
|
370
372
|
xt as unlockBodyScroll,
|
|
371
|
-
|
|
373
|
+
zf as useCopyToClipboard,
|
|
372
374
|
df as useDebounce,
|
|
373
375
|
Sf as useEventListener,
|
|
374
376
|
Uf as useFirstRender,
|
|
@@ -377,7 +379,7 @@ export {
|
|
|
377
379
|
cf as useIsMounted,
|
|
378
380
|
hf as useLocalStorage,
|
|
379
381
|
kf as useMediaQuery,
|
|
380
|
-
|
|
382
|
+
Af as useOnlineStatus,
|
|
381
383
|
Lf as useOutsideClick,
|
|
382
384
|
uf as usePrevious,
|
|
383
385
|
Ef as useSessionStorage,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "meticulous-ui",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.12.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",
|