@gfazioli/mantine-clock/dist/types/Clock.d.ts

React Clock components and hooks for Mantine with timezone support, countdown timers, customization options, and real-time updates.

import dayjs from 'dayjs';
import { BoxProps, Factory, MantineColor, MantineSize, StylesApiProps, TextProps } from '@mantine/core';
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;
export type ClockStylesNames = 'root' | 'clockContainer' | 'glassWrapper' | 'clockFace' | 'hourMarks' | 'hourTick' | 'minuteTick' | 'number' | 'primaryNumber' | 'secondaryNumber' | 'arcsLayer' | 'hand' | 'hourHand' | 'minuteHand' | 'secondHandContainer' | 'secondHand' | 'secondHandCounterweight' | 'centerBlur' | 'centerDot';
export type ClockCssVariables = {
    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';
};
export interface ClockBaseProps {
    /** Color of the clock face (MantineColor or CSS color) */
    color?: MantineColor;
    /** Mantine color for the hour ticks */
    hourTicksColor?: MantineColor;
    /** Opacity for the hour ticks (0 = hidden, 1 = fully visible) */
    hourTicksOpacity?: number;
    /** Mantine color for the minute ticks */
    minuteTicksColor?: MantineColor;
    /** Opacity for the minute ticks (0 = hidden, 1 = fully visible) */
    minuteTicksOpacity?: number;
    /** Mantine color for the primary hour numbers (12, 3, 6, 9) */
    primaryNumbersColor?: MantineColor;
    /** Opacity for the primary hour numbers (0 = hidden, 1 = fully visible) */
    primaryNumbersOpacity?: number;
    /** Mantine color for the secondary hour numbers (1, 2, 4, 5, 7, 8, 10, 11) */
    secondaryNumbersColor?: MantineColor;
    /** Opacity for the secondary hour numbers (0 = hidden, 1 = fully visible) */
    secondaryNumbersOpacity?: number;
    /** Second hand movement behavior */
    secondHandBehavior?: 'tick' | 'smooth' | 'tick-half' | 'tick-high-freq';
    /** Mantine color for the seconds hand */
    secondHandColor?: MantineColor;
    /** Opacity for the seconds hand (0 = hidden, 1 = fully visible) */
    secondHandOpacity?: number;
    /** Length of the second hand as a percentage of clock radius (0.2 to 0.8) */
    secondHandLength?: number;
    /** Thickness of the second hand as a percentage of clock size (0.005 to 0.05) */
    secondHandSize?: number;
    /** Mantine color for the minutes hand */
    minuteHandColor?: MantineColor;
    /** Opacity for the minutes hand (0 = hidden, 1 = fully visible) */
    minuteHandOpacity?: number;
    /** Thickness of the minute hand as a percentage of clock size (0.01 to 0.1) */
    minuteHandSize?: number;
    /** Length of the minute hand as a percentage of clock radius (0.2 to 0.8) */
    minuteHandLength?: number;
    /** Size of the clock in pixels (default: 400px) */
    size?: MantineSize | number | (string & {});
    /** Thickness of the hour hand as a percentage of clock size (0.01 to 0.1) */
    hourHandSize?: number;
    /** Length of the hour hand as a percentage of clock radius (0.2 to 0.8) */
    hourHandLength?: number;
    /** Mantine color for the hours hand */
    hourHandColor?: MantineColor;
    /** Opacity for the hours hand (0 = hidden, 1 = fully visible) */
    hourHandOpacity?: number;
    /** Distance of the hour numbers from the center as a percentage of the radius (0.5 = 50%, 0.83 = default) */
    hourNumbersDistance?: number;
    /** Props for primary hour numbers (12, 3, 6, 9) Text component */
    primaryNumbersProps?: TextProps;
    /** Props for secondary hour numbers (1, 2, 4, 5, 7, 8, 10, 11) Text component */
    secondaryNumbersProps?: TextProps;
    /** Timezone for displaying time in different countries (e.g., 'America/New_York', 'Europe/London', 'Asia/Tokyo') */
    timezone?: Timezone;
    /** Whether the clock should update in real time (default: `true`) */
    running?: boolean;
    /** 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. */
    value?: string | Date | dayjs.Dayjs;
}
export interface ClockArcsProps {
    /** Toggle seconds arc visibility (preferred) */
    withSecondsArc?: boolean;
    /** Start time for seconds arc (e.g., "12:00:00") */
    secondsArcFrom?: string | Date;
    /** Direction for seconds arc */
    secondsArcDirection?: 'clockwise' | 'counterClockwise';
    /** Color for seconds arc */
    secondsArcColor?: MantineColor;
    /** Opacity for seconds arc (0 = hidden, 1 = fully visible) */
    secondsArcOpacity?: number;
    /** Toggle minutes arc visibility (preferred) */
    withMinutesArc?: boolean;
    /** Start time for minutes arc (e.g., "12:00") */
    minutesArcFrom?: string | Date;
    /** Direction for minutes arc */
    minutesArcDirection?: 'clockwise' | 'counterClockwise';
    /** Color for minutes arc */
    minutesArcColor?: MantineColor;
    /** Opacity for minutes arc (0 = hidden, 1 = fully visible) */
    minutesArcOpacity?: number;
    /** Toggle hours arc visibility (preferred) */
    withHoursArc?: boolean;
    /** Start time for hours arc (e.g., "12:00") */
    hoursArcFrom?: string | Date;
    /** Direction for hours arc */
    hoursArcDirection?: 'clockwise' | 'counterClockwise';
    /** Color for hours arc */
    hoursArcColor?: MantineColor;
    /** Opacity for hours arc (0 = hidden, 1 = fully visible) */
    hoursArcOpacity?: number;
}
export interface ClockProps extends BoxProps, ClockBaseProps, ClockArcsProps, StylesApiProps<ClockFactory> {
}
export type ClockFactory = Factory<{
    props: ClockProps;
    ref: HTMLDivElement;
    stylesNames: ClockStylesNames;
    vars: ClockCssVariables;
}>;
export declare const defaultProps: Partial<ClockProps>;
export declare const Clock: import("@mantine/core").MantineComponent<{
    props: ClockProps;
    ref: HTMLDivElement;
    stylesNames: ClockStylesNames;
    vars: ClockCssVariables;
}>;