meticulous-ui 3.11.7 → 3.11.8

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 (2) hide show
  1. package/components/Timer/Timer.js +168 -140
  2. package/package.json +1 -1
package/components/Timer/Timer.js CHANGED
@@ -1,32 +1,32 @@
1
- import { jsxs as p, jsx as e, Fragment as U } from "react/jsx-runtime";
2
- import { useState as b, useRef as Tt, useEffect as K } from "react";
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 vt from "../Glass/Glass.js";
4
+ import At from "../Glass/Glass.js";
5
5
  import St from "./components/TimerRing/TimerRing.js";
6
- import c from "../../colors/white.js";
6
+ import m from "../../colors/white.js";
7
7
  import { black as kt } from "../../colors/black.js";
8
- import At from "../../colors/red.js";
9
- import Rt from "../Icons/ClockCircleOutline.js";
10
- import xt from "../Icons/Add.js";
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 r, { css as h, keyframes as S } from "styled-components";
16
- const t = (i) => ({ $size: w }) => w / i, q = 1, Ct = 16.67, J = 1.67, Ot = 3.404, zt = ({ $color: i }) => Dt[i], _ = h`
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
- `, _t = r.div`
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: ${zt};
29
- `, Et = r.div`
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 = r.div`
39
+ `, Q = o.div`
40
40
  position: absolute;
41
41
  left: 50%;
42
42
  top: 48%;
43
43
  transform: translate(-50%, -50%);
44
- `, V = r.div`
45
- color: ${c};
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
- `, Ht = r.span`
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: i }) => `${i * 6}deg`};
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
- `, Nt = r.div`
70
+ `, Ht = o.div`
71
71
  position: relative;
72
72
  height: 100%;
73
73
  width: 100%;
74
- `, Wt = r.div`
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
- `, Ft = r.div`
79
+ `, Wt = o.div`
80
80
  ${_};
81
81
  width: ${t(50)}rem;
82
82
  height: ${t(5.33)}rem;
83
- background: ${c};
84
- `, Lt = r.div`
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
- `, Yt = r.div`
89
+ `, Xt = o.div`
90
90
  ${_};
91
91
  width: ${t(133.33)}rem;
92
92
  height: ${t(3.64)}rem;
93
- background: ${At.m800};
94
- `, Z = S`
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
- `, Bt = S`
97
+ `, Yt = f`
98
98
  from { opacity: 0; transform: translateY(-5px); }
99
99
  to { opacity: 1; transform: translateY(0); }
100
- `, jt = S`
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
- `, Xt = S`
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
- `, Gt = r.span`
106
+ `;
107
+ o.span`
107
108
  display: inline-block;
108
- animation: ${Bt} 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
109
- `, Ut = r.div`
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: i }) => i && h`
143
+ ${({ $dismissing: r }) => r && p`
123
144
  animation: ${Z} 0.6s ease-out forwards;
124
145
  `}
125
- `, Kt = r.div`
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: i }) => i ? h`
145
- ${Xt} 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards
146
- ` : h`
147
- ${jt} 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both
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
- `, qt = r.div`
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: i }) => i && h`
178
+ ${({ $noActions: r }) => r && p`
158
179
  pointer-events: none;
159
180
  opacity: 0.5;
160
181
  `}
161
- `, Jt = r.div`
182
+ `, te = o.div`
162
183
  position: absolute;
163
184
  bottom: 6%;
164
185
  right: 8%;
165
186
  border-radius: ${t(50)}rem;
166
- `, v = r.button`
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 ${c};
200
+ outline: 2px solid ${m};
180
201
  outline-offset: 2px;
181
202
  }
182
- `, Qt = r(xt)`
203
+ `, ee = o(Rt)`
183
204
  position: absolute;
184
205
  left: 50%;
185
206
  top: 50%;
186
207
  transform: translate(-50%, -50%);
187
- `, Vt = r(Pt)`
208
+ `, re = o(Pt)`
188
209
  position: absolute;
189
210
  left: 50%;
190
211
  top: 50%;
191
212
  transform: translate(-50%, -50%);
192
- `, Zt = r(It)`
213
+ `, oe = o(It)`
193
214
  position: absolute;
194
215
  left: 50%;
195
216
  top: 50%;
196
217
  transform: translate(-50%, -50%);
197
- `, te = r(Mt)`
218
+ `, ie = o(Mt)`
198
219
  position: absolute;
199
220
  left: 50%;
200
221
  top: 50%;
201
222
  transform: translate(-50%, -50%);
202
- `, ee = r.span`
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
- `, re = r.div`
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: ${c};
235
+ background-color: ${m};
215
236
  left: calc(-${t(70)}rem);
216
237
  top: calc(-${t(100 / 33)}rem - ${t(70)}rem);
217
- `, oe = r.div`
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: i }) => i && h`
247
+ ${({ $dismissing: r }) => r && p`
227
248
  animation: ${Z} 0.6s ease-out forwards;
228
249
  `}
229
- `, $ = () => {
230
- }, ie = (i) => () => {
231
- const g = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: i }).split(", ")[1].split(" ")[0], [A, a, y] = g.split(":").map(Number);
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: y * 6,
234
- minute: a * 6 + y * 0.1,
235
- hour: A % 12 * 30 + a * 0.5
261
+ second: S * 6,
262
+ minute: a * 6 + S * 0.1,
263
+ hour: h % 12 * 30 + a * 0.5
236
264
  };
237
- }, ne = ({
238
- color: i = "green",
239
- showTime: w = !0,
240
- showTimeWithSec: k = !0,
241
- timeZone: g = "Asia/Kolkata",
242
- isDigital: A = !0,
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: y = $,
245
- onTimerComplete: tt = $,
246
- onTimerRemove: et = $,
247
- onTimerPause: rt = $,
248
- onTimerPlay: ot = $,
249
- size: E = 30,
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 [R, nt] = b(/* @__PURE__ */ new Date()), [s, x] = b(0), [T, P] = b(!1), [I, at] = b(ie(g)), [st, M] = b(0), [f, D] = b(!1), H = Tt(T), o = Math.round(E), C = Math.round(14 * E / 20);
253
- K(() => {
254
- H.current = T;
255
- }, [T]);
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
- x(a), M(a % 60 * 6), P(!1), y();
258
- }, dt = () => {
259
- D(!0), et();
285
+ R(a), M(a % 60 * 6), P(!1), S();
260
286
  }, ct = () => {
261
- x(0), M(0), D(!1);
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
- K(() => {
268
- const m = setInterval(() => {
269
- const l = /* @__PURE__ */ new Date();
270
- nt(l), at((d) => {
271
- const gt = l.toLocaleString("en-Us", { hour12: !0, timeZone: g }).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, z = (j, X) => {
272
- const G = j % 360;
273
- return j - G + X + (X < G ? 360 : 0);
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: z(d.second, $t),
277
- minute: z(d.minute, wt),
278
- hour: z(d.hour, yt)
304
+ second: E(c.second, $t),
305
+ minute: E(c.minute, wt),
306
+ hour: E(c.hour, yt)
279
307
  };
280
- }), H.current || (x((d) => (d - 1 === 0 && (tt(), D(!0)), d - 1)), M((d) => d - 6));
308
+ }), H.current || (R((c) => (c - 1 === 0 && (tt(), D(!0)), c - 1)), M((c) => c - 6));
281
309
  }, 1e3);
282
- return () => clearInterval(m);
310
+ return () => clearInterval(v);
283
311
  }, []);
284
- const O = R.toLocaleString("en-Us", { hour12: !0, timeZone: g }).split(", ")[1], N = O.split(" ")[0], W = O.split(" ")[1], F = O.split(":").slice(0, 2).join(":"), u = !(Number.isInteger(s) && s > 0), ut = String(Math.floor(s / 60)).padStart(2, "0"), bt = String(s % 60).padStart(2, "0"), ht = `${ut}:${bt}`, L = `${k ? N : F} ${W}`;
285
- return /* @__PURE__ */ p(_t, { $color: i, role: "region", "aria-label": "Clock", $size: o, ...it, children: [
286
- /* @__PURE__ */ e(vt, { borderRadius: `${t(16.67)({ $size: o })}rem`, "aria-hidden": "true" }),
287
- (!u || f) && /* @__PURE__ */ p(U, { children: [
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
- Ut,
317
+ Qt,
290
318
  {
291
- $dismissing: f,
292
- onAnimationEnd: ct,
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
- oe,
326
+ se,
299
327
  {
300
- $size: o,
328
+ $size: i,
301
329
  style: { "--bullet-rotate": `${st}deg` },
302
- $dismissing: f,
330
+ $dismissing: y,
303
331
  "aria-hidden": "true",
304
- children: /* @__PURE__ */ e(re, { $size: o })
332
+ children: /* @__PURE__ */ e(ae, { $size: i })
305
333
  }
306
334
  ),
307
335
  /* @__PURE__ */ e(
308
- ee,
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
- w && /* @__PURE__ */ p(U, { children: [
317
- /* @__PURE__ */ e(Et, { "aria-hidden": "true", $size: o, children: /* @__PURE__ */ e(Nt, { children: /* @__PURE__ */ e(Wt, { "aria-hidden": "true", children: [...Array(60)].map((m, l) => /* @__PURE__ */ e(Ht, { $i: l, $size: o }, l)) }) }) }),
318
- A ? /* @__PURE__ */ p(Q, { as: "time", dateTime: R.toISOString(), "aria-label": L, children: [
319
- /* @__PURE__ */ e(V, { $size: o, "aria-hidden": "true", children: k ? N : F }),
320
- /* @__PURE__ */ e(V, { $size: o, "aria-hidden": "true", children: W })
321
- ] }) : /* @__PURE__ */ p(Q, { as: "time", dateTime: R.toISOString(), "aria-label": L, children: [
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
- Ft,
351
+ Wt,
324
352
  {
325
- $size: o,
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: o,
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
- Yt,
367
+ Xt,
340
368
  {
341
- $size: o,
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__ */ p(
349
- qt,
376
+ a > 0 && /* @__PURE__ */ g(
377
+ Zt,
350
378
  {
351
- $size: o,
352
- $noActions: u,
379
+ $size: i,
380
+ $noActions: $,
353
381
  role: "group",
354
382
  "aria-label": "Timer controls",
355
383
  children: [
356
384
  /* @__PURE__ */ e(
357
- v,
385
+ T,
358
386
  {
359
387
  type: "button",
360
- onClick: dt,
361
- $size: o,
388
+ onClick: ct,
389
+ $size: i,
362
390
  "aria-label": "Stop timer",
363
- "aria-disabled": u,
364
- children: /* @__PURE__ */ e(Vt, { color: c, size: C, "aria-hidden": "true" })
391
+ "aria-disabled": $,
392
+ children: /* @__PURE__ */ e(re, { color: m, size: C, "aria-hidden": "true" })
365
393
  }
366
394
  ),
367
- u || !T ? /* @__PURE__ */ e(
368
- v,
395
+ $ || !k ? /* @__PURE__ */ e(
396
+ T,
369
397
  {
370
398
  type: "button",
371
399
  onClick: mt,
372
- $size: o,
400
+ $size: i,
373
401
  "aria-label": "Pause timer",
374
- "aria-disabled": u,
375
- children: /* @__PURE__ */ e(Zt, { color: c, size: C, "aria-hidden": "true" })
402
+ "aria-disabled": $,
403
+ children: /* @__PURE__ */ e(oe, { color: m, size: C, "aria-hidden": "true" })
376
404
  }
377
- ) : /* @__PURE__ */ e(v, { type: "button", onClick: pt, "aria-label": "Resume timer", $size: o, children: /* @__PURE__ */ e(te, { color: c, size: C, "aria-hidden": "true" }) })
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
- (!u || f) && /* @__PURE__ */ p(
382
- Kt,
409
+ (!$ || y) && /* @__PURE__ */ g(
410
+ Vt,
383
411
  {
384
- $size: o,
385
- $dismissing: f,
412
+ $size: i,
413
+ $dismissing: y,
386
414
  "aria-label": `${s} seconds remaining`,
387
415
  children: [
388
416
  /* @__PURE__ */ e(
389
- Rt,
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
- ht.split("").map(
396
- (m, l) => m === ":" ? /* @__PURE__ */ e("span", { children: m }, l) : /* @__PURE__ */ e(Gt, { children: m }, `${l}-${m}`)
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(Jt, { role: "group", $size: o, "aria-label": "Start timer", children: /* @__PURE__ */ e(
402
- v,
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: o,
434
+ $size: i,
407
435
  "aria-label": `Start ${a} second timer`,
408
- children: /* @__PURE__ */ e(Qt, { color: c, size: o, "aria-hidden": "true" })
436
+ children: /* @__PURE__ */ e(ee, { color: m, size: i, "aria-hidden": "true" })
409
437
  }
410
438
  ) })
411
439
  ] });
412
440
  };
413
- ne.propTypes = {
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
- ne as default
468
+ de as default
441
469
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meticulous-ui",
3
- "version": "3.11.7",
3
+ "version": "3.11.8",
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",