@gfazioli/mantine-clock 1.0.4 → 2.0.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.
@@ -1,5 +1,5 @@
1
1
  'use client';
2
- var classes = {"root":"me_3508fb61","clockContainer":"me_bfe0e7d2","glassWrapper":"me_5cac7cf6","clockFace":"me_a73eac6c","centerBlur":"me_46419d9b","centerDot":"me_b7f1a195","hourMarks":"me_199c38a3","minuteTick":"me_7001a110","hourTick":"me_42e74ca0","number":"me_1037b208","primaryNumber":"me_9129b04c","secondaryNumber":"me_83b9a1fe","hand":"me_35043aee","hourHand":"me_42e1bb72","minuteHand":"me_6ffc0fe2","secondHandContainer":"me_22ead85f","secondHand":"me_1a457e42","secondHandCounterweight":"me_32db9852"};
2
+ var classes = {"root":"me_3508fb61","clockContainer":"me_bfe0e7d2","glassWrapper":"me_5cac7cf6","clockFace":"me_a73eac6c","arcsLayer":"me_8cd76651","centerBlur":"me_46419d9b","centerDot":"me_b7f1a195","hourMarks":"me_199c38a3","minuteTick":"me_7001a110","hourTick":"me_42e74ca0","number":"me_1037b208","primaryNumber":"me_9129b04c","secondaryNumber":"me_83b9a1fe","hand":"me_35043aee","hourHand":"me_42e1bb72","minuteHand":"me_6ffc0fe2","secondHandContainer":"me_22ead85f","secondHand":"me_1a457e42","secondHandCounterweight":"me_32db9852"};
3
3
 
4
4
  export { classes as default };
5
5
  //# sourceMappingURL=Clock.module.css.mjs.map
package/dist/styles.css CHANGED
@@ -2,10 +2,22 @@
2
2
  --clock-primary-numbers-color,var(--mantine-color-dark-9)
3
3
  );--clock-secondary-numbers-color-resolved:var(
4
4
  --clock-secondary-numbers-color,var(--mantine-color-dark-6)
5
- );--clock-minute-hand-color-resolved:var(--clock-minute-hand-color,var(--mantine-color-dark-6));--clock-hour-hand-color-resolved:var(--clock-hour-hand-color,var(--mantine-color-dark-6));--clock-second-hand-color-resolved:var(--clock-second-hand-color,var(--mantine-color-red-6))}[data-mantine-color-scheme=dark] .me_3508fb61{--clock-background-color:var(--clock-color,var(--mantine-color-dark-8));--clock-hour-ticks-color-resolved:var(--clock-hour-ticks-color,var(--mantine-color-gray-0));--clock-minute-ticks-color-resolved:var(
5
+ );--clock-minute-hand-color-resolved:var(--clock-minute-hand-color,var(--mantine-color-dark-6));--clock-hour-hand-color-resolved:var(--clock-hour-hand-color,var(--mantine-color-dark-6));--clock-second-hand-color-resolved:var(--clock-second-hand-color,var(--mantine-color-red-6));--clock-seconds-arc-color-resolved:var(
6
+ --clock-seconds-arc-color,var(--clock-second-hand-color-resolved)
7
+ );--clock-minutes-arc-color-resolved:var(
8
+ --clock-minutes-arc-color,var(--clock-minute-hand-color-resolved)
9
+ );--clock-hours-arc-color-resolved:var(
10
+ --clock-hours-arc-color,var(--clock-hour-hand-color-resolved)
11
+ )}[data-mantine-color-scheme=dark] .me_3508fb61{--clock-background-color:var(--clock-color,var(--mantine-color-dark-8));--clock-hour-ticks-color-resolved:var(--clock-hour-ticks-color,var(--mantine-color-gray-0));--clock-minute-ticks-color-resolved:var(
6
12
  --clock-minute-ticks-color,var(--mantine-color-gray-8)
7
13
  );--clock-primary-numbers-color-resolved:var(
8
14
  --clock-primary-numbers-color,var(--mantine-color-gray-0)
9
15
  );--clock-secondary-numbers-color-resolved:var(
10
16
  --clock-secondary-numbers-color,var(--mantine-color-gray-4)
11
- );--clock-minute-hand-color-resolved:var(--clock-minute-hand-color,var(--mantine-color-dark-5));--clock-hour-hand-color-resolved:var(--clock-hour-hand-color,var(--mantine-color-dark-5))}.me_3508fb61{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.me_3508fb61,.me_bfe0e7d2{align-items:center;display:flex;height:var(--clock-size,400px);justify-content:center;position:relative;width:var(--clock-size,400px)}.me_bfe0e7d2{z-index:2}.me_5cac7cf6{background:transparent;perspective:1000px;pointer-events:none;will-change:transform;z-index:2}.me_5cac7cf6,.me_a73eac6c{backface-visibility:hidden;border-radius:50%;position:relative;transform-style:preserve-3d}.me_a73eac6c{--clock-border-width:clamp(2px,0.0625em,4px);background-color:var(--clock-background-color);height:var(--clock-size,400px);overflow:hidden;user-select:none;width:var(--clock-size,400px);will-change:transform,box-shadow;z-index:3}.me_46419d9b{backdrop-filter:blur(1px);background-color:hsla(0,0%,100%,.35);border:1px solid rgba(0,0,0,.03);border-radius:50%;box-shadow:0 0 20px hsla(0,0%,100%,.4),inset 0 0 8px hsla(0,0%,100%,.6);height:calc(var(--clock-size, 400px)*.09);left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(var(--clock-size, 400px)*.09);z-index:16}[data-mantine-color-scheme=dark] .me_46419d9b{background-color:rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.03);box-shadow:0 0 20px rgba(0,0,0,.4),inset 0 0 8px rgba(0,0,0,.6)}.me_b7f1a195{background:var(--clock-second-hand-color-resolved);border-radius:50%;box-shadow:0 0 8px var(--clock-second-hand-color-resolved);position:absolute;z-index:17}.me_199c38a3{height:100%;left:0;position:absolute;top:0;width:100%;z-index:14}.me_7001a110{background-color:var(--clock-minute-ticks-color-resolved);height:calc(var(--clock-size, 400px)*.025);opacity:var(--clock-minute-ticks-opacity,1);width:calc(var(--clock-size, 400px)*.0025)}.me_42e74ca0,.me_7001a110{box-shadow:0 0 2px hsla(0,0%,100%,.3);position:absolute}.me_42e74ca0{background-color:var(--clock-hour-ticks-color-resolved);height:calc(var(--clock-size, 400px)*.0375);opacity:var(--clock-hour-ticks-opacity,1);width:calc(var(--clock-size, 400px)*.005)}.me_1037b208{color:var(--clock-hour-number-color);font-weight:500;opacity:var(--clock-hour-number-opacity,1);pointer-events:none;position:absolute;text-align:center;transform:translate(-50%,-50%);user-select:none;z-index:15}.me_9129b04c{color:var(--clock-primary-numbers-color-resolved);opacity:var(--clock-primary-numbers-opacity,1)}.me_83b9a1fe{color:var(--clock-secondary-numbers-color-resolved);opacity:var(--clock-secondary-numbers-opacity,1)}.me_35043aee{position:absolute;transform-origin:center bottom;will-change:transform;z-index:15}.me_42e1bb72{background-color:var(--clock-hour-hand-color-resolved);box-shadow:0 0 3px var(--clock-hour-hand-color-resolved)}.me_6ffc0fe2{background-color:var(--clock-minute-hand-color-resolved);box-shadow:0 0 3px var(--clock-minute-hand-color-resolved)}.me_22ead85f{position:absolute;will-change:transform;z-index:17}.me_1a457e42{bottom:0;left:0}.me_1a457e42,.me_32db9852{background-color:var(--clock-second-hand-color-resolved);border-radius:calc(var(--clock-size, 400px)*.04);box-shadow:0 0 5px var(--clock-second-hand-color-resolved);position:absolute}.me_32db9852{bottom:calc(var(--clock-size, 400px)*-.035);height:calc(var(--clock-size, 400px)*.035)}
17
+ );--clock-minute-hand-color-resolved:var(--clock-minute-hand-color,var(--mantine-color-dark-5));--clock-hour-hand-color-resolved:var(--clock-hour-hand-color,var(--mantine-color-dark-5));--clock-seconds-arc-color-resolved:var(
18
+ --clock-seconds-arc-color,var(--clock-second-hand-color-resolved)
19
+ );--clock-minutes-arc-color-resolved:var(
20
+ --clock-minutes-arc-color,var(--clock-minute-hand-color-resolved)
21
+ );--clock-hours-arc-color-resolved:var(
22
+ --clock-hours-arc-color,var(--clock-hour-hand-color-resolved)
23
+ )}.me_3508fb61{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.me_3508fb61,.me_bfe0e7d2{align-items:center;display:flex;height:var(--clock-size,400px);justify-content:center;position:relative;width:var(--clock-size,400px)}.me_bfe0e7d2{z-index:2}.me_5cac7cf6{background:transparent;perspective:1000px;pointer-events:none;will-change:transform;z-index:2}.me_5cac7cf6,.me_a73eac6c{backface-visibility:hidden;border-radius:50%;position:relative;transform-style:preserve-3d}.me_a73eac6c{--clock-border-width:clamp(2px,0.0625em,4px);background-color:var(--clock-background-color);height:var(--clock-size,400px);overflow:hidden;user-select:none;width:var(--clock-size,400px);will-change:transform,box-shadow;z-index:3}.me_8cd76651{shape-rendering:geometricPrecision;height:100%;image-rendering:-webkit-optimize-contrast;left:0;text-rendering:geometricPrecision;top:0;width:100%;z-index:13}.me_46419d9b,.me_8cd76651{pointer-events:none;position:absolute}.me_46419d9b{backdrop-filter:blur(1px);background-color:hsla(0,0%,100%,.35);border:1px solid rgba(0,0,0,.03);border-radius:50%;box-shadow:0 0 20px hsla(0,0%,100%,.4),inset 0 0 8px hsla(0,0%,100%,.6);height:calc(var(--clock-size, 400px)*.09);left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--clock-size, 400px)*.09);z-index:16}[data-mantine-color-scheme=dark] .me_46419d9b{background-color:rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.03);box-shadow:0 0 20px rgba(0,0,0,.4),inset 0 0 8px rgba(0,0,0,.6)}.me_b7f1a195{background:var(--clock-second-hand-color-resolved);border-radius:50%;box-shadow:0 0 8px var(--clock-second-hand-color-resolved);position:absolute;z-index:17}.me_199c38a3{height:100%;left:0;position:absolute;top:0;width:100%;z-index:14}.me_7001a110{background-color:var(--clock-minute-ticks-color-resolved);height:calc(var(--clock-size, 400px)*.025);opacity:var(--clock-minute-ticks-opacity,1);width:calc(var(--clock-size, 400px)*.0025)}.me_42e74ca0,.me_7001a110{box-shadow:0 0 2px hsla(0,0%,100%,.3);position:absolute}.me_42e74ca0{background-color:var(--clock-hour-ticks-color-resolved);height:calc(var(--clock-size, 400px)*.0375);opacity:var(--clock-hour-ticks-opacity,1);width:calc(var(--clock-size, 400px)*.005)}.me_1037b208{color:var(--clock-hour-number-color);font-weight:500;opacity:var(--clock-hour-number-opacity,1);pointer-events:none;position:absolute;text-align:center;transform:translate(-50%,-50%);user-select:none;z-index:15}.me_9129b04c{color:var(--clock-primary-numbers-color-resolved);opacity:var(--clock-primary-numbers-opacity,1)}.me_83b9a1fe{color:var(--clock-secondary-numbers-color-resolved);opacity:var(--clock-secondary-numbers-opacity,1)}.me_35043aee{position:absolute;transform-origin:center bottom;will-change:transform;z-index:15}.me_42e1bb72{background-color:var(--clock-hour-hand-color-resolved);box-shadow:0 0 3px var(--clock-hour-hand-color-resolved)}.me_6ffc0fe2{background-color:var(--clock-minute-hand-color-resolved);box-shadow:0 0 3px var(--clock-minute-hand-color-resolved)}.me_22ead85f{position:absolute;will-change:transform;z-index:17}.me_1a457e42{bottom:0;left:0}.me_1a457e42,.me_32db9852{background-color:var(--clock-second-hand-color-resolved);border-radius:calc(var(--clock-size, 400px)*.04);box-shadow:0 0 5px var(--clock-second-hand-color-resolved);position:absolute}.me_32db9852{bottom:calc(var(--clock-size, 400px)*-.035);height:calc(var(--clock-size, 400px)*.035)}
@@ -2,10 +2,22 @@
2
2
  --clock-primary-numbers-color,var(--mantine-color-dark-9)
3
3
  );--clock-secondary-numbers-color-resolved:var(
4
4
  --clock-secondary-numbers-color,var(--mantine-color-dark-6)
5
- );--clock-minute-hand-color-resolved:var(--clock-minute-hand-color,var(--mantine-color-dark-6));--clock-hour-hand-color-resolved:var(--clock-hour-hand-color,var(--mantine-color-dark-6));--clock-second-hand-color-resolved:var(--clock-second-hand-color,var(--mantine-color-red-6))}[data-mantine-color-scheme=dark] .me_3508fb61{--clock-background-color:var(--clock-color,var(--mantine-color-dark-8));--clock-hour-ticks-color-resolved:var(--clock-hour-ticks-color,var(--mantine-color-gray-0));--clock-minute-ticks-color-resolved:var(
5
+ );--clock-minute-hand-color-resolved:var(--clock-minute-hand-color,var(--mantine-color-dark-6));--clock-hour-hand-color-resolved:var(--clock-hour-hand-color,var(--mantine-color-dark-6));--clock-second-hand-color-resolved:var(--clock-second-hand-color,var(--mantine-color-red-6));--clock-seconds-arc-color-resolved:var(
6
+ --clock-seconds-arc-color,var(--clock-second-hand-color-resolved)
7
+ );--clock-minutes-arc-color-resolved:var(
8
+ --clock-minutes-arc-color,var(--clock-minute-hand-color-resolved)
9
+ );--clock-hours-arc-color-resolved:var(
10
+ --clock-hours-arc-color,var(--clock-hour-hand-color-resolved)
11
+ )}[data-mantine-color-scheme=dark] .me_3508fb61{--clock-background-color:var(--clock-color,var(--mantine-color-dark-8));--clock-hour-ticks-color-resolved:var(--clock-hour-ticks-color,var(--mantine-color-gray-0));--clock-minute-ticks-color-resolved:var(
6
12
  --clock-minute-ticks-color,var(--mantine-color-gray-8)
7
13
  );--clock-primary-numbers-color-resolved:var(
8
14
  --clock-primary-numbers-color,var(--mantine-color-gray-0)
9
15
  );--clock-secondary-numbers-color-resolved:var(
10
16
  --clock-secondary-numbers-color,var(--mantine-color-gray-4)
11
- );--clock-minute-hand-color-resolved:var(--clock-minute-hand-color,var(--mantine-color-dark-5));--clock-hour-hand-color-resolved:var(--clock-hour-hand-color,var(--mantine-color-dark-5))}.me_3508fb61{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.me_3508fb61,.me_bfe0e7d2{align-items:center;display:flex;height:var(--clock-size,400px);justify-content:center;position:relative;width:var(--clock-size,400px)}.me_bfe0e7d2{z-index:2}.me_5cac7cf6{background:transparent;perspective:1000px;pointer-events:none;will-change:transform;z-index:2}.me_5cac7cf6,.me_a73eac6c{backface-visibility:hidden;border-radius:50%;position:relative;transform-style:preserve-3d}.me_a73eac6c{--clock-border-width:clamp(2px,0.0625em,4px);background-color:var(--clock-background-color);height:var(--clock-size,400px);overflow:hidden;user-select:none;width:var(--clock-size,400px);will-change:transform,box-shadow;z-index:3}.me_46419d9b{backdrop-filter:blur(1px);background-color:hsla(0,0%,100%,.35);border:1px solid rgba(0,0,0,.03);border-radius:50%;box-shadow:0 0 20px hsla(0,0%,100%,.4),inset 0 0 8px hsla(0,0%,100%,.6);height:calc(var(--clock-size, 400px)*.09);left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(var(--clock-size, 400px)*.09);z-index:16}[data-mantine-color-scheme=dark] .me_46419d9b{background-color:rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.03);box-shadow:0 0 20px rgba(0,0,0,.4),inset 0 0 8px rgba(0,0,0,.6)}.me_b7f1a195{background:var(--clock-second-hand-color-resolved);border-radius:50%;box-shadow:0 0 8px var(--clock-second-hand-color-resolved);position:absolute;z-index:17}.me_199c38a3{height:100%;left:0;position:absolute;top:0;width:100%;z-index:14}.me_7001a110{background-color:var(--clock-minute-ticks-color-resolved);height:calc(var(--clock-size, 400px)*.025);opacity:var(--clock-minute-ticks-opacity,1);width:calc(var(--clock-size, 400px)*.0025)}.me_42e74ca0,.me_7001a110{box-shadow:0 0 2px hsla(0,0%,100%,.3);position:absolute}.me_42e74ca0{background-color:var(--clock-hour-ticks-color-resolved);height:calc(var(--clock-size, 400px)*.0375);opacity:var(--clock-hour-ticks-opacity,1);width:calc(var(--clock-size, 400px)*.005)}.me_1037b208{color:var(--clock-hour-number-color);font-weight:500;opacity:var(--clock-hour-number-opacity,1);pointer-events:none;position:absolute;text-align:center;transform:translate(-50%,-50%);user-select:none;z-index:15}.me_9129b04c{color:var(--clock-primary-numbers-color-resolved);opacity:var(--clock-primary-numbers-opacity,1)}.me_83b9a1fe{color:var(--clock-secondary-numbers-color-resolved);opacity:var(--clock-secondary-numbers-opacity,1)}.me_35043aee{position:absolute;transform-origin:center bottom;will-change:transform;z-index:15}.me_42e1bb72{background-color:var(--clock-hour-hand-color-resolved);box-shadow:0 0 3px var(--clock-hour-hand-color-resolved)}.me_6ffc0fe2{background-color:var(--clock-minute-hand-color-resolved);box-shadow:0 0 3px var(--clock-minute-hand-color-resolved)}.me_22ead85f{position:absolute;will-change:transform;z-index:17}.me_1a457e42{bottom:0;left:0}.me_1a457e42,.me_32db9852{background-color:var(--clock-second-hand-color-resolved);border-radius:calc(var(--clock-size, 400px)*.04);box-shadow:0 0 5px var(--clock-second-hand-color-resolved);position:absolute}.me_32db9852{bottom:calc(var(--clock-size, 400px)*-.035);height:calc(var(--clock-size, 400px)*.035)}}
17
+ );--clock-minute-hand-color-resolved:var(--clock-minute-hand-color,var(--mantine-color-dark-5));--clock-hour-hand-color-resolved:var(--clock-hour-hand-color,var(--mantine-color-dark-5));--clock-seconds-arc-color-resolved:var(
18
+ --clock-seconds-arc-color,var(--clock-second-hand-color-resolved)
19
+ );--clock-minutes-arc-color-resolved:var(
20
+ --clock-minutes-arc-color,var(--clock-minute-hand-color-resolved)
21
+ );--clock-hours-arc-color-resolved:var(
22
+ --clock-hours-arc-color,var(--clock-hour-hand-color-resolved)
23
+ )}.me_3508fb61{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.me_3508fb61,.me_bfe0e7d2{align-items:center;display:flex;height:var(--clock-size,400px);justify-content:center;position:relative;width:var(--clock-size,400px)}.me_bfe0e7d2{z-index:2}.me_5cac7cf6{background:transparent;perspective:1000px;pointer-events:none;will-change:transform;z-index:2}.me_5cac7cf6,.me_a73eac6c{backface-visibility:hidden;border-radius:50%;position:relative;transform-style:preserve-3d}.me_a73eac6c{--clock-border-width:clamp(2px,0.0625em,4px);background-color:var(--clock-background-color);height:var(--clock-size,400px);overflow:hidden;user-select:none;width:var(--clock-size,400px);will-change:transform,box-shadow;z-index:3}.me_8cd76651{shape-rendering:geometricPrecision;height:100%;image-rendering:-webkit-optimize-contrast;left:0;text-rendering:geometricPrecision;top:0;width:100%;z-index:13}.me_46419d9b,.me_8cd76651{pointer-events:none;position:absolute}.me_46419d9b{backdrop-filter:blur(1px);background-color:hsla(0,0%,100%,.35);border:1px solid rgba(0,0,0,.03);border-radius:50%;box-shadow:0 0 20px hsla(0,0%,100%,.4),inset 0 0 8px hsla(0,0%,100%,.6);height:calc(var(--clock-size, 400px)*.09);left:50%;top:50%;transform:translate(-50%,-50%);width:calc(var(--clock-size, 400px)*.09);z-index:16}[data-mantine-color-scheme=dark] .me_46419d9b{background-color:rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.03);box-shadow:0 0 20px rgba(0,0,0,.4),inset 0 0 8px rgba(0,0,0,.6)}.me_b7f1a195{background:var(--clock-second-hand-color-resolved);border-radius:50%;box-shadow:0 0 8px var(--clock-second-hand-color-resolved);position:absolute;z-index:17}.me_199c38a3{height:100%;left:0;position:absolute;top:0;width:100%;z-index:14}.me_7001a110{background-color:var(--clock-minute-ticks-color-resolved);height:calc(var(--clock-size, 400px)*.025);opacity:var(--clock-minute-ticks-opacity,1);width:calc(var(--clock-size, 400px)*.0025)}.me_42e74ca0,.me_7001a110{box-shadow:0 0 2px hsla(0,0%,100%,.3);position:absolute}.me_42e74ca0{background-color:var(--clock-hour-ticks-color-resolved);height:calc(var(--clock-size, 400px)*.0375);opacity:var(--clock-hour-ticks-opacity,1);width:calc(var(--clock-size, 400px)*.005)}.me_1037b208{color:var(--clock-hour-number-color);font-weight:500;opacity:var(--clock-hour-number-opacity,1);pointer-events:none;position:absolute;text-align:center;transform:translate(-50%,-50%);user-select:none;z-index:15}.me_9129b04c{color:var(--clock-primary-numbers-color-resolved);opacity:var(--clock-primary-numbers-opacity,1)}.me_83b9a1fe{color:var(--clock-secondary-numbers-color-resolved);opacity:var(--clock-secondary-numbers-opacity,1)}.me_35043aee{position:absolute;transform-origin:center bottom;will-change:transform;z-index:15}.me_42e1bb72{background-color:var(--clock-hour-hand-color-resolved);box-shadow:0 0 3px var(--clock-hour-hand-color-resolved)}.me_6ffc0fe2{background-color:var(--clock-minute-hand-color-resolved);box-shadow:0 0 3px var(--clock-minute-hand-color-resolved)}.me_22ead85f{position:absolute;will-change:transform;z-index:17}.me_1a457e42{bottom:0;left:0}.me_1a457e42,.me_32db9852{background-color:var(--clock-second-hand-color-resolved);border-radius:calc(var(--clock-size, 400px)*.04);box-shadow:0 0 5px var(--clock-second-hand-color-resolved);position:absolute}.me_32db9852{bottom:calc(var(--clock-size, 400px)*-.035);height:calc(var(--clock-size, 400px)*.035)}}
@@ -1,9 +1,9 @@
1
1
  import dayjs from 'dayjs';
2
2
  import { BoxProps, Factory, MantineColor, MantineSize, StylesApiProps, TextProps } from '@mantine/core';
3
3
  export type Timezone = 'UTC' | 'America/New_York' | 'America/Los_Angeles' | 'America/Chicago' | 'America/Denver' | 'America/Toronto' | 'America/Vancouver' | 'America/Sao_Paulo' | 'America/Mexico_City' | 'Europe/London' | 'Europe/Berlin' | 'Europe/Paris' | 'Europe/Rome' | 'Europe/Madrid' | 'Europe/Amsterdam' | 'Europe/Stockholm' | 'Europe/Moscow' | 'Asia/Tokyo' | 'Asia/Shanghai' | 'Asia/Singapore' | 'Asia/Hong_Kong' | 'Asia/Seoul' | 'Asia/Kolkata' | 'Asia/Dubai' | 'Australia/Sydney' | 'Australia/Melbourne' | 'Pacific/Auckland' | string;
4
- export type ClockStylesNames = 'root' | 'clockContainer' | 'glassWrapper' | 'clockFace' | 'hourMarks' | 'hourTick' | 'minuteTick' | 'number' | 'primaryNumber' | 'secondaryNumber' | 'hand' | 'hourHand' | 'minuteHand' | 'secondHandContainer' | 'secondHand' | 'secondHandCounterweight' | 'centerBlur' | 'centerDot';
4
+ export type ClockStylesNames = 'root' | 'clockContainer' | 'glassWrapper' | 'clockFace' | 'hourMarks' | 'hourTick' | 'minuteTick' | 'number' | 'primaryNumber' | 'secondaryNumber' | 'arcsLayer' | 'hand' | 'hourHand' | 'minuteHand' | 'secondHandContainer' | 'secondHand' | 'secondHandCounterweight' | 'centerBlur' | 'centerDot';
5
5
  export type ClockCssVariables = {
6
- root: '--clock-size' | '--clock-color' | '--clock-hour-ticks-color' | '--clock-hour-ticks-opacity' | '--clock-minute-ticks-color' | '--clock-minute-ticks-opacity' | '--clock-second-hand-color' | '--clock-minute-hand-color' | '--clock-hour-hand-color' | '--clock-primary-numbers-color' | '--clock-primary-numbers-opacity' | '--clock-secondary-numbers-color' | '--clock-secondary-numbers-opacity';
6
+ root: '--clock-size' | '--clock-color' | '--clock-hour-ticks-color' | '--clock-hour-ticks-opacity' | '--clock-minute-ticks-color' | '--clock-minute-ticks-opacity' | '--clock-second-hand-color' | '--clock-minute-hand-color' | '--clock-hour-hand-color' | '--clock-seconds-arc-color' | '--clock-minutes-arc-color' | '--clock-hours-arc-color' | '--clock-primary-numbers-color' | '--clock-primary-numbers-opacity' | '--clock-secondary-numbers-color' | '--clock-secondary-numbers-opacity';
7
7
  };
8
8
  export interface ClockBaseProps {
9
9
  /** Color of the clock face (MantineColor or CSS color) */
@@ -65,7 +65,39 @@ export interface ClockBaseProps {
65
65
  /** Time value to display. Can be a string ("10:30", "18:15:07"), Date, or dayjs object. When running=true, this sets the starting time. When running=false and no value is provided, displays the current time. */
66
66
  value?: string | Date | dayjs.Dayjs;
67
67
  }
68
- export interface ClockProps extends BoxProps, ClockBaseProps, StylesApiProps<ClockFactory> {
68
+ export interface ClockArcsProps {
69
+ /** Toggle seconds arc visibility (preferred) */
70
+ withSecondsArc?: boolean;
71
+ /** Start time for seconds arc (e.g., "12:00:00") */
72
+ secondsArcFrom?: string | Date;
73
+ /** Direction for seconds arc */
74
+ secondsArcDirection?: 'clockwise' | 'counterClockwise';
75
+ /** Color for seconds arc */
76
+ secondsArcColor?: MantineColor;
77
+ /** Opacity for seconds arc (0 = hidden, 1 = fully visible) */
78
+ secondsArcOpacity?: number;
79
+ /** Toggle minutes arc visibility (preferred) */
80
+ withMinutesArc?: boolean;
81
+ /** Start time for minutes arc (e.g., "12:00") */
82
+ minutesArcFrom?: string | Date;
83
+ /** Direction for minutes arc */
84
+ minutesArcDirection?: 'clockwise' | 'counterClockwise';
85
+ /** Color for minutes arc */
86
+ minutesArcColor?: MantineColor;
87
+ /** Opacity for minutes arc (0 = hidden, 1 = fully visible) */
88
+ minutesArcOpacity?: number;
89
+ /** Toggle hours arc visibility (preferred) */
90
+ withHoursArc?: boolean;
91
+ /** Start time for hours arc (e.g., "12:00") */
92
+ hoursArcFrom?: string | Date;
93
+ /** Direction for hours arc */
94
+ hoursArcDirection?: 'clockwise' | 'counterClockwise';
95
+ /** Color for hours arc */
96
+ hoursArcColor?: MantineColor;
97
+ /** Opacity for hours arc (0 = hidden, 1 = fully visible) */
98
+ hoursArcOpacity?: number;
99
+ }
100
+ export interface ClockProps extends BoxProps, ClockBaseProps, ClockArcsProps, StylesApiProps<ClockFactory> {
69
101
  }
70
102
  export type ClockFactory = Factory<{
71
103
  props: ClockProps;
@@ -1,5 +1,5 @@
1
1
  export { Clock } from './Clock';
2
- export type { ClockBaseProps, ClockCssVariables, ClockFactory, ClockProps, ClockStylesNames, } from './Clock';
2
+ export type { ClockArcsProps, ClockBaseProps, ClockCssVariables, ClockFactory, ClockProps, ClockStylesNames, } from './Clock';
3
3
  export { useClock } from './hooks/use-clock';
4
4
  export type { ClockData, UseClockOptions } from './hooks/use-clock';
5
5
  export { useClockCountDown } from './hooks/use-clock-count-down';
@@ -1,5 +1,5 @@
1
1
  export { Clock } from './Clock';
2
- export type { ClockBaseProps, ClockCssVariables, ClockFactory, ClockProps, ClockStylesNames, } from './Clock';
2
+ export type { ClockArcsProps, ClockBaseProps, ClockCssVariables, ClockFactory, ClockProps, ClockStylesNames, } from './Clock';
3
3
  export { useClock } from './hooks/use-clock';
4
4
  export type { ClockData, UseClockOptions } from './hooks/use-clock';
5
5
  export { useClockCountDown } from './hooks/use-clock-count-down';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gfazioli/mantine-clock",
3
- "version": "1.0.4",
3
+ "version": "2.0.0",
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",