@gfazioli/mantine-clock 1.0.0 → 1.0.2
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 +22 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -75,7 +75,6 @@ function WorldClock() {
|
|
|
75
75
|
return (
|
|
76
76
|
<Clock
|
|
77
77
|
timezone="America/New_York"
|
|
78
|
-
showNumbers
|
|
79
78
|
size={200}
|
|
80
79
|
hourHandColor="blue"
|
|
81
80
|
minuteHandColor="cyan"
|
|
@@ -154,13 +153,19 @@ import '@gfazioli/mantine-clock/styles.css';
|
|
|
154
153
|
// or with CSS layers
|
|
155
154
|
import '@gfazioli/mantine-clock/styles.layer.css';
|
|
156
155
|
|
|
157
|
-
// Custom styled clock
|
|
156
|
+
// Custom styled clock with available CSS variables
|
|
158
157
|
function ThemedClock() {
|
|
159
158
|
return (
|
|
160
159
|
<Clock
|
|
161
160
|
style={{
|
|
162
|
-
'--clock-
|
|
163
|
-
'--clock-
|
|
161
|
+
'--clock-color': 'var(--mantine-color-blue-1)',
|
|
162
|
+
'--clock-hour-ticks-color': 'var(--mantine-color-blue-6)',
|
|
163
|
+
'--clock-minute-ticks-color': 'var(--mantine-color-blue-4)',
|
|
164
|
+
'--clock-primary-numbers-color': 'var(--mantine-color-blue-9)',
|
|
165
|
+
'--clock-secondary-numbers-color': 'var(--mantine-color-blue-7)',
|
|
166
|
+
'--clock-hour-hand-color': 'var(--mantine-color-blue-8)',
|
|
167
|
+
'--clock-minute-hand-color': 'var(--mantine-color-blue-6)',
|
|
168
|
+
'--clock-second-hand-color': 'var(--mantine-color-red-6)'
|
|
164
169
|
}}
|
|
165
170
|
className="my-custom-clock"
|
|
166
171
|
/>
|
|
@@ -191,6 +196,19 @@ function WorldClockDashboard() {
|
|
|
191
196
|
);
|
|
192
197
|
}
|
|
193
198
|
|
|
199
|
+
// Clock with custom number visibility and styling
|
|
200
|
+
function CustomNumbersClock() {
|
|
201
|
+
return (
|
|
202
|
+
<Clock
|
|
203
|
+
primaryNumbersOpacity={1}
|
|
204
|
+
secondaryNumbersOpacity={0.5}
|
|
205
|
+
primaryNumbersColor="blue"
|
|
206
|
+
secondaryNumbersColor="gray"
|
|
207
|
+
size={200}
|
|
208
|
+
/>
|
|
209
|
+
);
|
|
210
|
+
}
|
|
211
|
+
|
|
194
212
|
// Countdown with controls
|
|
195
213
|
function ControllableCountdown() {
|
|
196
214
|
const countdown = useClockCountDown({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gfazioli/mantine-clock",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "React Clock components and hooks for Mantine with timezone support, countdown timers, customization options, and real-time updates.",
|
|
5
5
|
"homepage": "https://gfazioli.github.io/mantine-clock/",
|
|
6
6
|
"packageManager": "yarn@4.0.1",
|