@hasthiya_/flip-clock 1.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.
- package/README.md +49 -0
- package/dist/index.d.mts +181 -0
- package/dist/index.d.ts +181 -0
- package/dist/index.js +494 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +473 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +40 -0
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# @hasthiya_/flip-clock
|
|
2
|
+
|
|
3
|
+
A customizable flip clock countdown for React with realistic 3D flip-card animations.
|
|
4
|
+
|
|
5
|
+
**Live demo and docs:** [Showcase site](https://your-showcase-url.com) — [Demo](https://your-showcase-url.com/demo) · [Docs](https://your-showcase-url.com/docs) · [Examples](https://your-showcase-url.com/examples).
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install @hasthiya_/flip-clock
|
|
13
|
+
# or
|
|
14
|
+
pnpm add @hasthiya_/flip-clock
|
|
15
|
+
# or
|
|
16
|
+
yarn add @hasthiya_/flip-clock
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Basic usage
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import FlipClock from "@hasthiya_/flip-clock";
|
|
23
|
+
|
|
24
|
+
<FlipClock targetDate={new Date("2026-12-31T00:00:00")} />
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
In Next.js, use it inside a Client Component (`"use client"`).
|
|
28
|
+
|
|
29
|
+
## Props overview
|
|
30
|
+
|
|
31
|
+
| Prop | Description |
|
|
32
|
+
|------|-------------|
|
|
33
|
+
| `targetDate` | Target date to count down to (default: ~88 days from now) |
|
|
34
|
+
| `staticTime` | Override with static values `{ days?, hours?, minutes?, seconds? }` |
|
|
35
|
+
| `cardStyle` | Card appearance (background, width, height, borderRadius, etc.) |
|
|
36
|
+
| `digitStyle` | Digit typography (color, fontFamily, fontSize) |
|
|
37
|
+
| `labelStyle` | Labels (visible, color, fontFamily, fontSize) |
|
|
38
|
+
| `animation` | Flip animation (flipDuration, bounceIntensity, easing) |
|
|
39
|
+
| `separator` | Between groups: `{ type: "none" \| "colon" \| "dot" }` |
|
|
40
|
+
| `segments` | Which to show: `{ days?, hours?, minutes?, seconds? }` |
|
|
41
|
+
| `groupGap`, `cardGap`, `labelGap` | Spacing (CSS values) |
|
|
42
|
+
| `onComplete` | Callback when countdown reaches zero |
|
|
43
|
+
| `className`, `style` | Wrapper extras |
|
|
44
|
+
|
|
45
|
+
Full props table and types: see the [docs page](https://your-showcase-url.com/docs) on the showcase site.
|
|
46
|
+
|
|
47
|
+
## License
|
|
48
|
+
|
|
49
|
+
MIT
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { CSSProperties } from 'react';
|
|
3
|
+
|
|
4
|
+
/** Configuration for the flip animation timing and feel. */
|
|
5
|
+
interface FlipAnimationConfig {
|
|
6
|
+
/** Duration of each half-flip in milliseconds. @default 300 */
|
|
7
|
+
flipDuration?: number;
|
|
8
|
+
/** Bounce overshoot angle in degrees (0 = no bounce). @default 8 */
|
|
9
|
+
bounceIntensity?: number;
|
|
10
|
+
/** Easing function for the top flap falling. @default "ease-in" */
|
|
11
|
+
flipDownEasing?: string;
|
|
12
|
+
/** Easing function for the bottom flap landing. @default "ease-out" */
|
|
13
|
+
flipUpEasing?: string;
|
|
14
|
+
}
|
|
15
|
+
/** Configuration for the card appearance. */
|
|
16
|
+
interface FlipCardStyle {
|
|
17
|
+
/** Top-half background color. @default "#575757" */
|
|
18
|
+
background?: string;
|
|
19
|
+
/** Bottom-half background color (slightly darker). @default "#4a4a4a" */
|
|
20
|
+
backgroundDark?: string;
|
|
21
|
+
/** Card width (CSS value). @default "7rem" */
|
|
22
|
+
width?: string;
|
|
23
|
+
/** Card height (CSS value). @default "9.5rem" */
|
|
24
|
+
height?: string;
|
|
25
|
+
/** Border radius (CSS value). @default "0.5rem" */
|
|
26
|
+
borderRadius?: string;
|
|
27
|
+
/** Box shadow (CSS value). @default "0 3px 8px rgba(0,0,0,0.25)" */
|
|
28
|
+
boxShadow?: string;
|
|
29
|
+
}
|
|
30
|
+
/** Configuration for the digit typography. */
|
|
31
|
+
interface FlipDigitStyle {
|
|
32
|
+
/** Digit text color. @default "#ffffff" */
|
|
33
|
+
color?: string;
|
|
34
|
+
/** Font family for digits. @default "'Bebas Neue', sans-serif" */
|
|
35
|
+
fontFamily?: string;
|
|
36
|
+
/** Font size (CSS value). @default "5.5rem" */
|
|
37
|
+
fontSize?: string;
|
|
38
|
+
/** Text shadow (CSS value). @default "none" */
|
|
39
|
+
textShadow?: string;
|
|
40
|
+
}
|
|
41
|
+
/** Configuration for the group labels (DAYS, HOURS, etc.). */
|
|
42
|
+
interface FlipLabelStyle {
|
|
43
|
+
/** Whether to show labels. @default true */
|
|
44
|
+
visible?: boolean;
|
|
45
|
+
/** Label text color. @default "#999999" */
|
|
46
|
+
color?: string;
|
|
47
|
+
/** Label font family. @default "'Inter', sans-serif" */
|
|
48
|
+
fontFamily?: string;
|
|
49
|
+
/** Label font size (CSS value). @default "0.9rem" */
|
|
50
|
+
fontSize?: string;
|
|
51
|
+
/** Label font weight. @default "500" */
|
|
52
|
+
fontWeight?: string;
|
|
53
|
+
/** Letter spacing (CSS value). @default "0.2em" */
|
|
54
|
+
letterSpacing?: string;
|
|
55
|
+
/** Text transform. @default "uppercase" */
|
|
56
|
+
textTransform?: CSSProperties["textTransform"];
|
|
57
|
+
}
|
|
58
|
+
/** Configuration for the horizontal divider line on each card. */
|
|
59
|
+
interface FlipLineStyle {
|
|
60
|
+
/** Line color. @default "rgba(0,0,0,0.25)" */
|
|
61
|
+
color?: string;
|
|
62
|
+
/** Line height (CSS value). @default "1px" */
|
|
63
|
+
height?: string;
|
|
64
|
+
}
|
|
65
|
+
/** Optional separator between groups (e.g., colon dots). */
|
|
66
|
+
interface FlipSeparatorConfig {
|
|
67
|
+
/** Type of separator. @default "none" */
|
|
68
|
+
type?: "none" | "colon" | "dot";
|
|
69
|
+
/** Separator color. @default "#999999" */
|
|
70
|
+
color?: string;
|
|
71
|
+
/** Separator size (CSS value). @default "0.5rem" */
|
|
72
|
+
size?: string;
|
|
73
|
+
}
|
|
74
|
+
/** Custom labels for each time unit. */
|
|
75
|
+
interface FlipClockLabels {
|
|
76
|
+
days?: string;
|
|
77
|
+
hours?: string;
|
|
78
|
+
minutes?: string;
|
|
79
|
+
seconds?: string;
|
|
80
|
+
}
|
|
81
|
+
/** Which time segments to display. */
|
|
82
|
+
interface FlipClockSegments {
|
|
83
|
+
/** Show days segment. @default true */
|
|
84
|
+
days?: boolean;
|
|
85
|
+
/** Show hours segment. @default true */
|
|
86
|
+
hours?: boolean;
|
|
87
|
+
/** Show minutes segment. @default true */
|
|
88
|
+
minutes?: boolean;
|
|
89
|
+
/** Show seconds segment. @default true */
|
|
90
|
+
seconds?: boolean;
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Props for the FlipClock component.
|
|
94
|
+
*
|
|
95
|
+
* All props are optional and have sensible defaults that produce the
|
|
96
|
+
* classic dark-card-on-light-background flip clock aesthetic.
|
|
97
|
+
*/
|
|
98
|
+
interface FlipClockProps {
|
|
99
|
+
/** The target date to count down to. @default 88 days from now */
|
|
100
|
+
targetDate?: Date;
|
|
101
|
+
/** Override the countdown with static values (disables auto-tick). */
|
|
102
|
+
staticTime?: {
|
|
103
|
+
days?: number;
|
|
104
|
+
hours?: number;
|
|
105
|
+
minutes?: number;
|
|
106
|
+
seconds?: number;
|
|
107
|
+
};
|
|
108
|
+
/** Card appearance configuration. */
|
|
109
|
+
cardStyle?: FlipCardStyle;
|
|
110
|
+
/** Digit typography configuration. */
|
|
111
|
+
digitStyle?: FlipDigitStyle;
|
|
112
|
+
/** Label configuration. */
|
|
113
|
+
labelStyle?: FlipLabelStyle;
|
|
114
|
+
/** Horizontal divider line configuration. */
|
|
115
|
+
lineStyle?: FlipLineStyle;
|
|
116
|
+
/** Flip animation configuration. */
|
|
117
|
+
animation?: FlipAnimationConfig;
|
|
118
|
+
/** Separator between time groups. */
|
|
119
|
+
separator?: FlipSeparatorConfig;
|
|
120
|
+
/** Custom label text. */
|
|
121
|
+
labels?: FlipClockLabels;
|
|
122
|
+
/** Which segments to display. */
|
|
123
|
+
segments?: FlipClockSegments;
|
|
124
|
+
/** Number of digits for the days display. @default 2 */
|
|
125
|
+
dayDigits?: number;
|
|
126
|
+
/** Gap between time groups (CSS value). @default "3rem" */
|
|
127
|
+
groupGap?: string;
|
|
128
|
+
/** Gap between individual digit cards (CSS value). @default "0.375rem" */
|
|
129
|
+
cardGap?: string;
|
|
130
|
+
/** Gap between cards and the label (CSS value). @default "1rem" */
|
|
131
|
+
labelGap?: string;
|
|
132
|
+
/** Callback fired when countdown reaches zero. */
|
|
133
|
+
onComplete?: () => void;
|
|
134
|
+
/**
|
|
135
|
+
* Layout direction: "row" (horizontal) or "column" (stacked).
|
|
136
|
+
* Set from the parent (e.g. via media queries) for optimal view per screen size.
|
|
137
|
+
* @default "row"
|
|
138
|
+
*/
|
|
139
|
+
orientation?: "row" | "column";
|
|
140
|
+
/**
|
|
141
|
+
* Scale factor for the whole clock (cards, digits, gaps). Use for coarse size control from outside.
|
|
142
|
+
* Applied on top of cardStyle / digitStyle. Example: scale={0.8} gives 80% size.
|
|
143
|
+
* @default 1
|
|
144
|
+
*/
|
|
145
|
+
scale?: number;
|
|
146
|
+
/** Additional className for the outer wrapper. */
|
|
147
|
+
className?: string;
|
|
148
|
+
/** Additional inline style for the outer wrapper. */
|
|
149
|
+
style?: CSSProperties;
|
|
150
|
+
}
|
|
151
|
+
/**
|
|
152
|
+
* A customizable flip-clock countdown component with realistic 3D card-flip animations.
|
|
153
|
+
*
|
|
154
|
+
* Features:
|
|
155
|
+
* - Countdown to any target date or display static time
|
|
156
|
+
* - Full visual customization: card colors, digit font, labels, separators, animation
|
|
157
|
+
* - Bounce animation on the bottom flap for a tactile feel
|
|
158
|
+
* - Self-contained — no external CSS required (all styles are inline)
|
|
159
|
+
* - Responsive-ready — set sizes via props
|
|
160
|
+
*
|
|
161
|
+
* @example
|
|
162
|
+
* ```tsx
|
|
163
|
+
* // Minimal
|
|
164
|
+
* <FlipClock targetDate={new Date('2027-01-01')} />
|
|
165
|
+
*
|
|
166
|
+
* // Fully customized
|
|
167
|
+
* <FlipClock
|
|
168
|
+
* targetDate={deadline}
|
|
169
|
+
* cardStyle={{ background: '#1e1e2e', backgroundDark: '#181825', borderRadius: '1rem' }}
|
|
170
|
+
* digitStyle={{ color: '#cba6f7', fontFamily: 'monospace', fontSize: '4rem' }}
|
|
171
|
+
* labelStyle={{ color: '#a6adc8', fontSize: '0.75rem' }}
|
|
172
|
+
* animation={{ bounceIntensity: 15, flipDuration: 400 }}
|
|
173
|
+
* separator={{ type: 'colon', color: '#cba6f7' }}
|
|
174
|
+
* groupGap="2rem"
|
|
175
|
+
* onComplete={() => console.log('Done!')}
|
|
176
|
+
* />
|
|
177
|
+
* ```
|
|
178
|
+
*/
|
|
179
|
+
declare const FlipClock: ({ targetDate, staticTime, cardStyle, digitStyle, labelStyle, lineStyle, animation, separator, labels, segments, dayDigits, groupGap, cardGap, labelGap, onComplete, orientation, scale: scaleProp, className, style, }: FlipClockProps) => react_jsx_runtime.JSX.Element;
|
|
180
|
+
|
|
181
|
+
export { type FlipAnimationConfig, type FlipCardStyle, FlipClock, type FlipClockLabels, type FlipClockProps, type FlipClockSegments, type FlipDigitStyle, type FlipLabelStyle, type FlipLineStyle, type FlipSeparatorConfig, FlipClock as default };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { CSSProperties } from 'react';
|
|
3
|
+
|
|
4
|
+
/** Configuration for the flip animation timing and feel. */
|
|
5
|
+
interface FlipAnimationConfig {
|
|
6
|
+
/** Duration of each half-flip in milliseconds. @default 300 */
|
|
7
|
+
flipDuration?: number;
|
|
8
|
+
/** Bounce overshoot angle in degrees (0 = no bounce). @default 8 */
|
|
9
|
+
bounceIntensity?: number;
|
|
10
|
+
/** Easing function for the top flap falling. @default "ease-in" */
|
|
11
|
+
flipDownEasing?: string;
|
|
12
|
+
/** Easing function for the bottom flap landing. @default "ease-out" */
|
|
13
|
+
flipUpEasing?: string;
|
|
14
|
+
}
|
|
15
|
+
/** Configuration for the card appearance. */
|
|
16
|
+
interface FlipCardStyle {
|
|
17
|
+
/** Top-half background color. @default "#575757" */
|
|
18
|
+
background?: string;
|
|
19
|
+
/** Bottom-half background color (slightly darker). @default "#4a4a4a" */
|
|
20
|
+
backgroundDark?: string;
|
|
21
|
+
/** Card width (CSS value). @default "7rem" */
|
|
22
|
+
width?: string;
|
|
23
|
+
/** Card height (CSS value). @default "9.5rem" */
|
|
24
|
+
height?: string;
|
|
25
|
+
/** Border radius (CSS value). @default "0.5rem" */
|
|
26
|
+
borderRadius?: string;
|
|
27
|
+
/** Box shadow (CSS value). @default "0 3px 8px rgba(0,0,0,0.25)" */
|
|
28
|
+
boxShadow?: string;
|
|
29
|
+
}
|
|
30
|
+
/** Configuration for the digit typography. */
|
|
31
|
+
interface FlipDigitStyle {
|
|
32
|
+
/** Digit text color. @default "#ffffff" */
|
|
33
|
+
color?: string;
|
|
34
|
+
/** Font family for digits. @default "'Bebas Neue', sans-serif" */
|
|
35
|
+
fontFamily?: string;
|
|
36
|
+
/** Font size (CSS value). @default "5.5rem" */
|
|
37
|
+
fontSize?: string;
|
|
38
|
+
/** Text shadow (CSS value). @default "none" */
|
|
39
|
+
textShadow?: string;
|
|
40
|
+
}
|
|
41
|
+
/** Configuration for the group labels (DAYS, HOURS, etc.). */
|
|
42
|
+
interface FlipLabelStyle {
|
|
43
|
+
/** Whether to show labels. @default true */
|
|
44
|
+
visible?: boolean;
|
|
45
|
+
/** Label text color. @default "#999999" */
|
|
46
|
+
color?: string;
|
|
47
|
+
/** Label font family. @default "'Inter', sans-serif" */
|
|
48
|
+
fontFamily?: string;
|
|
49
|
+
/** Label font size (CSS value). @default "0.9rem" */
|
|
50
|
+
fontSize?: string;
|
|
51
|
+
/** Label font weight. @default "500" */
|
|
52
|
+
fontWeight?: string;
|
|
53
|
+
/** Letter spacing (CSS value). @default "0.2em" */
|
|
54
|
+
letterSpacing?: string;
|
|
55
|
+
/** Text transform. @default "uppercase" */
|
|
56
|
+
textTransform?: CSSProperties["textTransform"];
|
|
57
|
+
}
|
|
58
|
+
/** Configuration for the horizontal divider line on each card. */
|
|
59
|
+
interface FlipLineStyle {
|
|
60
|
+
/** Line color. @default "rgba(0,0,0,0.25)" */
|
|
61
|
+
color?: string;
|
|
62
|
+
/** Line height (CSS value). @default "1px" */
|
|
63
|
+
height?: string;
|
|
64
|
+
}
|
|
65
|
+
/** Optional separator between groups (e.g., colon dots). */
|
|
66
|
+
interface FlipSeparatorConfig {
|
|
67
|
+
/** Type of separator. @default "none" */
|
|
68
|
+
type?: "none" | "colon" | "dot";
|
|
69
|
+
/** Separator color. @default "#999999" */
|
|
70
|
+
color?: string;
|
|
71
|
+
/** Separator size (CSS value). @default "0.5rem" */
|
|
72
|
+
size?: string;
|
|
73
|
+
}
|
|
74
|
+
/** Custom labels for each time unit. */
|
|
75
|
+
interface FlipClockLabels {
|
|
76
|
+
days?: string;
|
|
77
|
+
hours?: string;
|
|
78
|
+
minutes?: string;
|
|
79
|
+
seconds?: string;
|
|
80
|
+
}
|
|
81
|
+
/** Which time segments to display. */
|
|
82
|
+
interface FlipClockSegments {
|
|
83
|
+
/** Show days segment. @default true */
|
|
84
|
+
days?: boolean;
|
|
85
|
+
/** Show hours segment. @default true */
|
|
86
|
+
hours?: boolean;
|
|
87
|
+
/** Show minutes segment. @default true */
|
|
88
|
+
minutes?: boolean;
|
|
89
|
+
/** Show seconds segment. @default true */
|
|
90
|
+
seconds?: boolean;
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Props for the FlipClock component.
|
|
94
|
+
*
|
|
95
|
+
* All props are optional and have sensible defaults that produce the
|
|
96
|
+
* classic dark-card-on-light-background flip clock aesthetic.
|
|
97
|
+
*/
|
|
98
|
+
interface FlipClockProps {
|
|
99
|
+
/** The target date to count down to. @default 88 days from now */
|
|
100
|
+
targetDate?: Date;
|
|
101
|
+
/** Override the countdown with static values (disables auto-tick). */
|
|
102
|
+
staticTime?: {
|
|
103
|
+
days?: number;
|
|
104
|
+
hours?: number;
|
|
105
|
+
minutes?: number;
|
|
106
|
+
seconds?: number;
|
|
107
|
+
};
|
|
108
|
+
/** Card appearance configuration. */
|
|
109
|
+
cardStyle?: FlipCardStyle;
|
|
110
|
+
/** Digit typography configuration. */
|
|
111
|
+
digitStyle?: FlipDigitStyle;
|
|
112
|
+
/** Label configuration. */
|
|
113
|
+
labelStyle?: FlipLabelStyle;
|
|
114
|
+
/** Horizontal divider line configuration. */
|
|
115
|
+
lineStyle?: FlipLineStyle;
|
|
116
|
+
/** Flip animation configuration. */
|
|
117
|
+
animation?: FlipAnimationConfig;
|
|
118
|
+
/** Separator between time groups. */
|
|
119
|
+
separator?: FlipSeparatorConfig;
|
|
120
|
+
/** Custom label text. */
|
|
121
|
+
labels?: FlipClockLabels;
|
|
122
|
+
/** Which segments to display. */
|
|
123
|
+
segments?: FlipClockSegments;
|
|
124
|
+
/** Number of digits for the days display. @default 2 */
|
|
125
|
+
dayDigits?: number;
|
|
126
|
+
/** Gap between time groups (CSS value). @default "3rem" */
|
|
127
|
+
groupGap?: string;
|
|
128
|
+
/** Gap between individual digit cards (CSS value). @default "0.375rem" */
|
|
129
|
+
cardGap?: string;
|
|
130
|
+
/** Gap between cards and the label (CSS value). @default "1rem" */
|
|
131
|
+
labelGap?: string;
|
|
132
|
+
/** Callback fired when countdown reaches zero. */
|
|
133
|
+
onComplete?: () => void;
|
|
134
|
+
/**
|
|
135
|
+
* Layout direction: "row" (horizontal) or "column" (stacked).
|
|
136
|
+
* Set from the parent (e.g. via media queries) for optimal view per screen size.
|
|
137
|
+
* @default "row"
|
|
138
|
+
*/
|
|
139
|
+
orientation?: "row" | "column";
|
|
140
|
+
/**
|
|
141
|
+
* Scale factor for the whole clock (cards, digits, gaps). Use for coarse size control from outside.
|
|
142
|
+
* Applied on top of cardStyle / digitStyle. Example: scale={0.8} gives 80% size.
|
|
143
|
+
* @default 1
|
|
144
|
+
*/
|
|
145
|
+
scale?: number;
|
|
146
|
+
/** Additional className for the outer wrapper. */
|
|
147
|
+
className?: string;
|
|
148
|
+
/** Additional inline style for the outer wrapper. */
|
|
149
|
+
style?: CSSProperties;
|
|
150
|
+
}
|
|
151
|
+
/**
|
|
152
|
+
* A customizable flip-clock countdown component with realistic 3D card-flip animations.
|
|
153
|
+
*
|
|
154
|
+
* Features:
|
|
155
|
+
* - Countdown to any target date or display static time
|
|
156
|
+
* - Full visual customization: card colors, digit font, labels, separators, animation
|
|
157
|
+
* - Bounce animation on the bottom flap for a tactile feel
|
|
158
|
+
* - Self-contained — no external CSS required (all styles are inline)
|
|
159
|
+
* - Responsive-ready — set sizes via props
|
|
160
|
+
*
|
|
161
|
+
* @example
|
|
162
|
+
* ```tsx
|
|
163
|
+
* // Minimal
|
|
164
|
+
* <FlipClock targetDate={new Date('2027-01-01')} />
|
|
165
|
+
*
|
|
166
|
+
* // Fully customized
|
|
167
|
+
* <FlipClock
|
|
168
|
+
* targetDate={deadline}
|
|
169
|
+
* cardStyle={{ background: '#1e1e2e', backgroundDark: '#181825', borderRadius: '1rem' }}
|
|
170
|
+
* digitStyle={{ color: '#cba6f7', fontFamily: 'monospace', fontSize: '4rem' }}
|
|
171
|
+
* labelStyle={{ color: '#a6adc8', fontSize: '0.75rem' }}
|
|
172
|
+
* animation={{ bounceIntensity: 15, flipDuration: 400 }}
|
|
173
|
+
* separator={{ type: 'colon', color: '#cba6f7' }}
|
|
174
|
+
* groupGap="2rem"
|
|
175
|
+
* onComplete={() => console.log('Done!')}
|
|
176
|
+
* />
|
|
177
|
+
* ```
|
|
178
|
+
*/
|
|
179
|
+
declare const FlipClock: ({ targetDate, staticTime, cardStyle, digitStyle, labelStyle, lineStyle, animation, separator, labels, segments, dayDigits, groupGap, cardGap, labelGap, onComplete, orientation, scale: scaleProp, className, style, }: FlipClockProps) => react_jsx_runtime.JSX.Element;
|
|
180
|
+
|
|
181
|
+
export { type FlipAnimationConfig, type FlipCardStyle, FlipClock, type FlipClockLabels, type FlipClockProps, type FlipClockSegments, type FlipDigitStyle, type FlipLabelStyle, type FlipLineStyle, type FlipSeparatorConfig, FlipClock as default };
|