meticulous-ui 2.8.3 → 2.8.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.
Files changed (3) hide show
  1. package/components/Timer/Timer.js +52 -26
  2. package/components/Timer/styles.js +25 -25
  3. package/package.json +1 -1
package/components/Timer/Timer.js CHANGED
@@ -3,7 +3,7 @@ import { useState as n, useRef as oe, useEffect as N } from "react";
3
3
  import se from "../Glass/Glass.js";
4
4
  import le from "./components/TimerRing/TimerRing.js";
5
5
  import m from "../../colors/white.js";
6
- import { Wrapper as de, Dimmer as ce, DotsWrapper as ue, AllDots as me, Dots as he, Time as v, TimeTxt as E, HourHand as pe, MinuteHand as ge, SecondHand as be, AlarmRing as fe, BulletRing as Se, Bullet as Te, VisuallyHidden as Ae, LeftActions as $e, ActionBtn as h, MediaStopFilledWrapper as Re, MediaPauseFilledWrapper as De, MediaPlayFilledWrapper as Pe, RightActions as we, AddWrapper as ye } from "./styles.js";
6
+ import { Wrapper as de, Dimmer as ce, DotsWrapper as ue, AllDots as me, Dots as he, Time as v, TimeTxt as E, HourHand as pe, MinuteHand as ge, SecondHand as be, AlarmRing as fe, BulletRing as Se, Bullet as Te, VisuallyHidden as ye, LeftActions as Ae, ActionBtn as h, MediaStopFilledWrapper as $e, MediaPauseFilledWrapper as Re, MediaPlayFilledWrapper as De, RightActions as Pe, AddWrapper as we } from "./styles.js";
7
7
  const d = () => {
8
8
  }, He = (p) => () => {
9
9
  const a = (/* @__PURE__ */ new Date()).toLocaleString("en-Us", { hour12: !0, timeZone: p }).split(", ")[1].split(" ")[0], [b, r, c] = a.split(":").map(Number);
@@ -14,7 +14,7 @@ const d = () => {
14
14
  };
15
15
  }, ze = ({
16
16
  color: p = "green",
17
- showTime: y = !0,
17
+ showTime: w = !0,
18
18
  showTimeWithSec: g = !0,
19
19
  timeZone: a = "Asia/Kolkata",
20
20
  isDigital: b = !0,
@@ -26,16 +26,16 @@ const d = () => {
26
26
  onTimerPlay: K = d,
27
27
  ..._
28
28
  }) => {
29
- const [f, q] = n(/* @__PURE__ */ new Date()), [o, S] = n(0), [u, T] = n(!1), [A, J] = n(He(a)), [Q, $] = n(0), [R, D] = n(!1), H = oe(u);
29
+ const [f, q] = n(/* @__PURE__ */ new Date()), [o, S] = n(0), [u, T] = n(!1), [y, J] = n(He(a)), [Q, A] = n(0), [$, R] = n(!1), H = oe(u);
30
30
  N(() => {
31
31
  H.current = u;
32
32
  }, [u]);
33
33
  const V = () => {
34
- S(r), $(r % 60 * 6), T(!1), c();
34
+ S(r), A(r % 60 * 6), T(!1), c();
35
35
  }, X = () => {
36
- D(!0), O();
36
+ R(!0), O();
37
37
  }, Y = () => {
38
- S(0), $(0), D(!1);
38
+ S(0), A(0), R(!1);
39
39
  }, Z = () => {
40
40
  T(!0), G();
41
41
  }, ee = () => {
@@ -45,46 +45,72 @@ const d = () => {
45
45
  const C = setInterval(() => {
46
46
  const l = /* @__PURE__ */ new Date();
47
47
  q(l), J((t) => {
48
- const te = l.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1].split(" ")[0], [re, L, j] = te.split(":").map(Number), ie = j * 6, ne = L * 6 + j * 0.1, ae = re % 12 * 30 + L * 0.5, w = (x, z) => {
48
+ const te = l.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1].split(" ")[0], [re, L, j] = te.split(":").map(Number), ie = j * 6, ne = L * 6 + j * 0.1, ae = re % 12 * 30 + L * 0.5, P = (x, z) => {
49
49
  const B = x % 360;
50
50
  return x - B + z + (z < B ? 360 : 0);
51
51
  };
52
52
  return {
53
- second: w(t.second, ie),
54
- minute: w(t.minute, ne),
55
- hour: w(t.hour, ae)
53
+ second: P(t.second, ie),
54
+ minute: P(t.minute, ne),
55
+ hour: P(t.hour, ae)
56
56
  };
57
- }), H.current || (S((t) => (t - 1 === 0 && (U(), D(!0)), t - 1)), $((t) => t - 6));
57
+ }), H.current || (S((t) => (t - 1 === 0 && (U(), R(!0)), t - 1)), A((t) => t - 6));
58
58
  }, 1e3);
59
59
  return () => clearInterval(C);
60
60
  }, []);
61
- const P = f.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1], k = P.split(" ")[0], I = P.split(" ")[1], M = P.split(":").slice(0, 2).join(":"), s = !(Number.isInteger(o) && o > 0), W = `${g ? k : M} ${I}`;
61
+ const D = f.toLocaleString("en-Us", { hour12: !0, timeZone: a }).split(", ")[1], k = D.split(" ")[0], I = D.split(" ")[1], M = D.split(":").slice(0, 2).join(":"), s = !(Number.isInteger(o) && o > 0), W = `${g ? k : M} ${I}`;
62
62
  return /* @__PURE__ */ i(de, { $color: p, role: "region", "aria-label": "Clock", ..._, children: [
63
63
  /* @__PURE__ */ e(se, { borderRadius: "1.2rem", "aria-hidden": "true" }),
64
- y && /* @__PURE__ */ i(F, { children: [
64
+ w && /* @__PURE__ */ i(F, { children: [
65
65
  /* @__PURE__ */ e(ce, { "aria-hidden": "true", children: /* @__PURE__ */ e(ue, { children: /* @__PURE__ */ e(me, { "aria-hidden": "true", children: [...Array(60)].map((C, l) => /* @__PURE__ */ e(he, { style: { rotate: `${l * 6}deg` } }, l)) }) }) }),
66
66
  b ? /* @__PURE__ */ i(v, { as: "time", dateTime: f.toISOString(), "aria-label": W, children: [
67
67
  /* @__PURE__ */ e(E, { "aria-hidden": "true", children: g ? k : M }),
68
68
  /* @__PURE__ */ e(E, { "aria-hidden": "true", children: I })
69
69
  ] }) : /* @__PURE__ */ i(v, { as: "time", dateTime: f.toISOString(), "aria-label": W, children: [
70
- /* @__PURE__ */ e(pe, { $rotate: A.hour, "aria-hidden": "true" }),
71
- /* @__PURE__ */ e(ge, { $rotate: A.minute, "aria-hidden": "true" }),
72
- /* @__PURE__ */ e(be, { $rotate: A.second, "aria-hidden": "true" })
70
+ /* @__PURE__ */ e(
71
+ pe,
72
+ {
73
+ style: { "--hand-rotate": `${y.hour}deg` },
74
+ "aria-hidden": "true"
75
+ }
76
+ ),
77
+ /* @__PURE__ */ e(
78
+ ge,
79
+ {
80
+ style: { "--hand-rotate": `${y.minute}deg` },
81
+ "aria-hidden": "true"
82
+ }
83
+ ),
84
+ /* @__PURE__ */ e(
85
+ be,
86
+ {
87
+ style: { "--hand-rotate": `${y.second}deg` },
88
+ "aria-hidden": "true"
89
+ }
90
+ )
73
91
  ] })
74
92
  ] }),
75
- (!s || R) && /* @__PURE__ */ i(F, { children: [
93
+ (!s || $) && /* @__PURE__ */ i(F, { children: [
76
94
  /* @__PURE__ */ e(
77
95
  fe,
78
96
  {
79
- $dismissing: R,
97
+ $dismissing: $,
80
98
  onAnimationEnd: Y,
81
99
  "aria-hidden": "true",
82
100
  children: /* @__PURE__ */ e(le, { progress: o >= 60 ? 1 : o % 60 / 60 })
83
101
  }
84
102
  ),
85
- /* @__PURE__ */ e(Se, { $angle: Q, $dismissing: R, "aria-hidden": "true", children: /* @__PURE__ */ e(Te, {}) }),
86
103
  /* @__PURE__ */ e(
87
- Ae,
104
+ Se,
105
+ {
106
+ style: { "--bullet-rotate": `${45 + Q}deg` },
107
+ $dismissing: $,
108
+ "aria-hidden": "true",
109
+ children: /* @__PURE__ */ e(Te, {})
110
+ }
111
+ ),
112
+ /* @__PURE__ */ e(
113
+ ye,
88
114
  {
89
115
  role: "timer",
90
116
  "aria-live": "polite",
@@ -92,7 +118,7 @@ const d = () => {
92
118
  }
93
119
  )
94
120
  ] }),
95
- /* @__PURE__ */ i($e, { $noActions: s, role: "group", "aria-label": "Timer controls", children: [
121
+ /* @__PURE__ */ i(Ae, { $noActions: s, role: "group", "aria-label": "Timer controls", children: [
96
122
  /* @__PURE__ */ e(
97
123
  h,
98
124
  {
@@ -100,7 +126,7 @@ const d = () => {
100
126
  onClick: X,
101
127
  "aria-label": "Stop timer",
102
128
  "aria-disabled": s,
103
- children: /* @__PURE__ */ e(Re, { color: m, size: 14, "aria-hidden": "true" })
129
+ children: /* @__PURE__ */ e($e, { color: m, size: 14, "aria-hidden": "true" })
104
130
  }
105
131
  ),
106
132
  s || !u ? /* @__PURE__ */ e(
@@ -110,17 +136,17 @@ const d = () => {
110
136
  onClick: Z,
111
137
  "aria-label": "Pause timer",
112
138
  "aria-disabled": s,
113
- children: /* @__PURE__ */ e(De, { color: m, size: 14, "aria-hidden": "true" })
139
+ children: /* @__PURE__ */ e(Re, { color: m, size: 14, "aria-hidden": "true" })
114
140
  }
115
- ) : /* @__PURE__ */ e(h, { type: "button", onClick: ee, "aria-label": "Resume timer", children: /* @__PURE__ */ e(Pe, { color: m, size: 14, "aria-hidden": "true" }) })
141
+ ) : /* @__PURE__ */ e(h, { type: "button", onClick: ee, "aria-label": "Resume timer", children: /* @__PURE__ */ e(De, { color: m, size: 14, "aria-hidden": "true" }) })
116
142
  ] }),
117
- /* @__PURE__ */ e(we, { role: "group", "aria-label": "Start timer", children: /* @__PURE__ */ e(
143
+ /* @__PURE__ */ e(Pe, { role: "group", "aria-label": "Start timer", children: /* @__PURE__ */ e(
118
144
  h,
119
145
  {
120
146
  type: "button",
121
147
  onClick: V,
122
148
  "aria-label": `Start ${r} second timer`,
123
- children: /* @__PURE__ */ e(ye, { color: m, size: 20, "aria-hidden": "true" })
149
+ children: /* @__PURE__ */ e(we, { color: m, size: 20, "aria-hidden": "true" })
124
150
  }
125
151
  ) })
126
152
  ] });
package/components/Timer/styles.js CHANGED
@@ -1,19 +1,19 @@
1
- import t, { css as i, keyframes as s } from "styled-components";
2
- import a from "../Icons/Add/Add.js";
1
+ import t, { css as i, keyframes as a } from "styled-components";
2
+ import s from "../Icons/Add/Add.js";
3
3
  import d from "../Icons/MediaStopFilled/MediaStopFilled.js";
4
4
  import p from "../Icons/MediaPauseFilled/MediaPauseFilled.js";
5
5
  import l from "../Icons/MediaPlayFilled/MediaPlayFilled.js";
6
- import e from "../../colors/white.js";
7
- import c from "../../colors/black.js";
8
- import m from "../../colors/red.js";
6
+ import r from "../../colors/white.js";
7
+ import m from "../../colors/black.js";
8
+ import c from "../../colors/red.js";
9
9
  import { COLOR_MAPPING as h } from "./constants.js";
10
- const u = ({ $color: o }) => h[o], r = i`
10
+ const u = ({ $color: o }) => h[o], e = i`
11
11
  position: absolute;
12
12
  bottom: 50%;
13
13
  transform-origin: bottom;
14
14
  border-radius: 4px;
15
15
  transition: rotate 0.3s ease-in-out;
16
- rotate: ${({ $rotate: o }) => o}deg;
16
+ rotate: var(--hand-rotate);
17
17
  `, A = t.div`
18
18
  position: relative;
19
19
  height: 20rem;
@@ -36,7 +36,7 @@ const u = ({ $color: o }) => h[o], r = i`
36
36
  top: 48%;
37
37
  transform: translate(-50%, -50%);
38
38
  `, H = t.div`
39
- color: ${e};
39
+ color: ${r};
40
40
  font-size: 1.5rem;
41
41
  font-weight: 600;
42
42
  text-align: center;
@@ -70,21 +70,21 @@ const u = ({ $color: o }) => h[o], r = i`
70
70
  top: 44%;
71
71
  transform: translate(-50%, -50%) rotate(6.7deg);
72
72
  `, S = t.div`
73
- ${r};
74
- width: 6px;
75
- height: 60px;
76
- background: ${e};
73
+ ${e};
74
+ width: 0.4rem;
75
+ height: 3.75rem;
76
+ background: ${r};
77
77
  `, R = t.div`
78
- ${r};
79
- width: 4px;
80
- height: 80px;
81
- background: ${c.m200};
78
+ ${e};
79
+ width: 0.25rem;
80
+ height: 5rem;
81
+ background: ${m.m200};
82
82
  `, B = t.div`
83
- ${r};
84
- width: 2px;
85
- height: 90px;
86
- background: ${m.m800};
87
- `, n = s`
83
+ ${e};
84
+ width: 0.15rem;
85
+ height: 5.5rem;
86
+ background: ${c.m800};
87
+ `, n = a`
88
88
  from { opacity: 1; transform: scale(1); }
89
89
  to { opacity: 0; transform: scale(0.85); }
90
90
  `, C = t.div`
@@ -122,10 +122,10 @@ const u = ({ $color: o }) => h[o], r = i`
122
122
  padding: 0;
123
123
 
124
124
  &:focus-visible {
125
- outline: 2px solid ${e};
125
+ outline: 2px solid ${r};
126
126
  outline-offset: 2px;
127
127
  }
128
- `, O = t(a)`
128
+ `, O = t(s)`
129
129
  position: absolute;
130
130
  left: 50%;
131
131
  top: 50%;
@@ -156,12 +156,12 @@ const u = ({ $color: o }) => h[o], r = i`
156
156
  width: 9px;
157
157
  height: 9px;
158
158
  border-radius: 50%;
159
- background-color: ${e};
159
+ background-color: ${r};
160
160
  `, j = t.div`
161
161
  position: absolute;
162
162
  left: 26%;
163
163
  top: 24%;
164
- rotate: ${({ $angle: o }) => 45 + o}deg;
164
+ rotate: var(--bullet-rotate);
165
165
  height: 157.5px;
166
166
  width: 157.5px;
167
167
  transform-origin: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "meticulous-ui",
3
- "version": "2.8.3",
3
+ "version": "2.8.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",