@hasthiya_/flip-clock 1.1.0 → 1.1.1

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 (2) hide show
  1. package/README.md +161 -161
  2. package/package.json +46 -40
package/README.md CHANGED
@@ -1,161 +1,161 @@
1
- # @hasthiya_/flip-clock
2
-
3
- A customizable flip clock countdown for React with realistic 3D flip-card animations.
4
-
5
- [![npm version](https://img.shields.io/npm/v/@hasthiya_/flip-clock)](https://www.npmjs.com/package/@hasthiya_/flip-clock)
6
- [![license](https://img.shields.io/npm/l/@hasthiya_/flip-clock)](./LICENSE)
7
-
8
- **Live Demo:** [flip-clock-livid.vercel.app](https://flip-clock-livid.vercel.app) | [Demo](https://flip-clock-livid.vercel.app/demo) | [Docs](https://flip-clock-livid.vercel.app/docs) | [Examples](https://flip-clock-livid.vercel.app/examples)
9
-
10
-
11
- ## Features
12
-
13
- - Countdown to any target date or display static time values
14
- - Fully customizable card colors, digit fonts, labels, separators, and animations
15
- - Smooth 3D flip-card effect with configurable bounce
16
- - Zero CSS dependencies — all styles are inline
17
- - Lightweight with React as the only peer dependency
18
- - Responsive-ready with scale and orientation props
19
-
20
- ## Installation
21
-
22
- ```bash
23
- npm install @hasthiya_/flip-clock
24
- # or
25
- pnpm add @hasthiya_/flip-clock
26
- # or
27
- yarn add @hasthiya_/flip-clock
28
- ```
29
-
30
- ## Basic Usage
31
-
32
- ```tsx
33
- import FlipClock from "@hasthiya_/flip-clock";
34
-
35
- <FlipClock targetDate={new Date("2026-12-31T00:00:00")} />
36
- ```
37
-
38
- > **Note:** In Next.js, use it inside a Client Component (`"use client"`).
39
-
40
- ## Examples
41
-
42
- ### Custom Styling
43
-
44
- ```tsx
45
- <FlipClock
46
- targetDate={deadline}
47
- cardStyle={{
48
- background: "#1e1e2e",
49
- backgroundDark: "#181825",
50
- borderRadius: "1rem",
51
- }}
52
- digitStyle={{
53
- color: "#cba6f7",
54
- fontFamily: "monospace",
55
- fontSize: "4rem",
56
- }}
57
- labelStyle={{ color: "#a6adc8", fontSize: "0.75rem" }}
58
- animation={{ bounceIntensity: 15, flipDuration: 400 }}
59
- separator={{ type: "colon", color: "#cba6f7" }}
60
- groupGap="2rem"
61
- onComplete={() => console.log("Done!")}
62
- />
63
- ```
64
-
65
- ### Static Display
66
-
67
- ```tsx
68
- <FlipClock
69
- staticTime={{ days: 12, hours: 8, minutes: 45, seconds: 30 }}
70
- segments={{ days: false, hours: true, minutes: true, seconds: true }}
71
- />
72
- ```
73
-
74
- ### Responsive with Scale
75
-
76
- ```tsx
77
- <FlipClock
78
- targetDate={myDate}
79
- scale={0.75}
80
- orientation="column"
81
- />
82
- ```
83
-
84
- ## Props
85
-
86
- | Prop | Type | Default | Description |
87
- |------|------|---------|-------------|
88
- | `targetDate` | `Date` | 88 days from now | The target date to count down to |
89
- | `staticTime` | `{ days?, hours?, minutes?, seconds? }` | — | Override with static values (disables auto-tick) |
90
- | `cardStyle` | `FlipCardStyle` | — | Card appearance: `background`, `backgroundDark`, `width`, `height`, `borderRadius`, `boxShadow` |
91
- | `digitStyle` | `FlipDigitStyle` | — | Digit typography: `color`, `fontFamily`, `fontSize`, `textShadow` |
92
- | `labelStyle` | `FlipLabelStyle` | — | Label config: `visible`, `color`, `fontFamily`, `fontSize`, `fontWeight`, `letterSpacing`, `textTransform` |
93
- | `lineStyle` | `FlipLineStyle` | — | Horizontal divider line: `color`, `height` |
94
- | `animation` | `FlipAnimationConfig` | — | Animation config: `flipDuration`, `bounceIntensity`, `flipDownEasing`, `flipUpEasing` |
95
- | `separator` | `FlipSeparatorConfig` | `none` | Separator between groups: `type` (`'none'` \| `'colon'` \| `'dot'`), `color`, `size` |
96
- | `labels` | `FlipClockLabels` | — | Custom label text: `days`, `hours`, `minutes`, `seconds` |
97
- | `segments` | `FlipClockSegments` | all `true` | Which segments to display: `days`, `hours`, `minutes`, `seconds` |
98
- | `dayDigits` | `number` | `2` | Number of digits for the days display |
99
- | `groupGap` | `string` | `'3rem'` | Gap between time groups (CSS value) |
100
- | `cardGap` | `string` | `'0.375rem'` | Gap between individual digit cards (CSS value) |
101
- | `labelGap` | `string` | `'1rem'` | Gap between cards and the label (CSS value) |
102
- | `onComplete` | `() => void` | — | Callback fired when countdown reaches zero |
103
- | `orientation` | `'row'` \| `'column'` | `'row'` | Layout direction: row (horizontal) or column (stacked) |
104
- | `scale` | `number` | `1` | Scale factor for the whole clock (e.g., `0.8` for 80% size) |
105
- | `className` | `string` | — | Additional className for the outer wrapper |
106
- | `style` | `CSSProperties` | — | Additional inline style for the outer wrapper |
107
-
108
- ### Style Configuration Types
109
-
110
- #### FlipCardStyle
111
-
112
- | Property | Type | Default |
113
- |----------|------|---------|
114
- | `background` | `string` | `'#575757'` |
115
- | `backgroundDark` | `string` | `'#4a4a4a'` |
116
- | `width` | `string` | `'7rem'` |
117
- | `height` | `string` | `'9.5rem'` |
118
- | `borderRadius` | `string` | `'0.5rem'` |
119
- | `boxShadow` | `string` | `'0 3px 8px rgba(0,0,0,0.25)'` |
120
-
121
- #### FlipDigitStyle
122
-
123
- | Property | Type | Default |
124
- |----------|------|---------|
125
- | `color` | `string` | `'#ffffff'` |
126
- | `fontFamily` | `string` | `"'Bebas Neue', sans-serif"` |
127
- | `fontSize` | `string` | `'5.5rem'` |
128
- | `textShadow` | `string` | `'none'` |
129
-
130
- #### FlipLabelStyle
131
-
132
- | Property | Type | Default |
133
- |----------|------|---------|
134
- | `visible` | `boolean` | `true` |
135
- | `color` | `string` | `'#999999'` |
136
- | `fontFamily` | `string` | `"'Inter', sans-serif"` |
137
- | `fontSize` | `string` | `'0.9rem'` |
138
- | `fontWeight` | `string` | `'500'` |
139
- | `letterSpacing` | `string` | `'0.2em'` |
140
- | `textTransform` | `CSSProperties['textTransform']` | `'uppercase'` |
141
-
142
- #### FlipAnimationConfig
143
-
144
- | Property | Type | Default |
145
- |----------|------|---------|
146
- | `flipDuration` | `number` | `300` (ms) |
147
- | `bounceIntensity` | `number` | `8` (degrees) |
148
- | `flipDownEasing` | `string` | `'ease-in'` |
149
- | `flipUpEasing` | `string` | `'ease-out'` |
150
-
151
- #### FlipSeparatorConfig
152
-
153
- | Property | Type | Default |
154
- |----------|------|---------|
155
- | `type` | `'none'` \| `'colon'` \| `'dot'` | `'none'` |
156
- | `color` | `string` | `'#999999'` |
157
- | `size` | `string` | `'0.5rem'` |
158
-
159
- ## License
160
-
161
- MIT
1
+ # @hasthiya_/flip-clock
2
+
3
+ A customizable flip clock countdown for React with realistic 3D flip-card animations.
4
+
5
+ [![npm version](https://img.shields.io/npm/v/@hasthiya_/flip-clock)](https://www.npmjs.com/package/@hasthiya_/flip-clock)
6
+ [![license](https://img.shields.io/npm/l/@hasthiya_/flip-clock)](./LICENSE)
7
+
8
+ **Live Demo:** [flip-clock-livid.vercel.app](https://flip-clock-livid.vercel.app) | [Demo](https://flip-clock-livid.vercel.app/demo) | [Docs](https://flip-clock-livid.vercel.app/docs) | [Examples](https://flip-clock-livid.vercel.app/examples) | [GitHub](https://github.com/Hasthiya/flip/tree/main/packages/flip-clock)
9
+
10
+
11
+ ## Features
12
+
13
+ - Countdown to any target date or display static time values
14
+ - Fully customizable card colors, digit fonts, labels, separators, and animations
15
+ - Smooth 3D flip-card effect with configurable bounce
16
+ - Zero CSS dependencies — all styles are inline
17
+ - Lightweight with React as the only peer dependency
18
+ - Responsive-ready with scale and orientation props
19
+
20
+ ## Installation
21
+
22
+ ```bash
23
+ npm install @hasthiya_/flip-clock
24
+ # or
25
+ pnpm add @hasthiya_/flip-clock
26
+ # or
27
+ yarn add @hasthiya_/flip-clock
28
+ ```
29
+
30
+ ## Basic Usage
31
+
32
+ ```tsx
33
+ import FlipClock from "@hasthiya_/flip-clock";
34
+
35
+ <FlipClock targetDate={new Date("2026-12-31T00:00:00")} />
36
+ ```
37
+
38
+ > **Note:** In Next.js, use it inside a Client Component (`"use client"`).
39
+
40
+ ## Examples
41
+
42
+ ### Custom Styling
43
+
44
+ ```tsx
45
+ <FlipClock
46
+ targetDate={deadline}
47
+ cardStyle={{
48
+ background: "#1e1e2e",
49
+ backgroundDark: "#181825",
50
+ borderRadius: "1rem",
51
+ }}
52
+ digitStyle={{
53
+ color: "#cba6f7",
54
+ fontFamily: "monospace",
55
+ fontSize: "4rem",
56
+ }}
57
+ labelStyle={{ color: "#a6adc8", fontSize: "0.75rem" }}
58
+ animation={{ bounceIntensity: 15, flipDuration: 400 }}
59
+ separator={{ type: "colon", color: "#cba6f7" }}
60
+ groupGap="2rem"
61
+ onComplete={() => console.log("Done!")}
62
+ />
63
+ ```
64
+
65
+ ### Static Display
66
+
67
+ ```tsx
68
+ <FlipClock
69
+ staticTime={{ days: 12, hours: 8, minutes: 45, seconds: 30 }}
70
+ segments={{ days: false, hours: true, minutes: true, seconds: true }}
71
+ />
72
+ ```
73
+
74
+ ### Responsive with Scale
75
+
76
+ ```tsx
77
+ <FlipClock
78
+ targetDate={myDate}
79
+ scale={0.75}
80
+ orientation="column"
81
+ />
82
+ ```
83
+
84
+ ## Props
85
+
86
+ | Prop | Type | Default | Description |
87
+ |------|------|---------|-------------|
88
+ | `targetDate` | `Date` | 88 days from now | The target date to count down to |
89
+ | `staticTime` | `{ days?, hours?, minutes?, seconds? }` | — | Override with static values (disables auto-tick) |
90
+ | `cardStyle` | `FlipCardStyle` | — | Card appearance: `background`, `backgroundDark`, `width`, `height`, `borderRadius`, `boxShadow` |
91
+ | `digitStyle` | `FlipDigitStyle` | — | Digit typography: `color`, `fontFamily`, `fontSize`, `textShadow` |
92
+ | `labelStyle` | `FlipLabelStyle` | — | Label config: `visible`, `color`, `fontFamily`, `fontSize`, `fontWeight`, `letterSpacing`, `textTransform` |
93
+ | `lineStyle` | `FlipLineStyle` | — | Horizontal divider line: `color`, `height` |
94
+ | `animation` | `FlipAnimationConfig` | — | Animation config: `flipDuration`, `bounceIntensity`, `flipDownEasing`, `flipUpEasing` |
95
+ | `separator` | `FlipSeparatorConfig` | `none` | Separator between groups: `type` (`'none'` \| `'colon'` \| `'dot'`), `color`, `size` |
96
+ | `labels` | `FlipClockLabels` | — | Custom label text: `days`, `hours`, `minutes`, `seconds` |
97
+ | `segments` | `FlipClockSegments` | all `true` | Which segments to display: `days`, `hours`, `minutes`, `seconds` |
98
+ | `dayDigits` | `number` | `2` | Number of digits for the days display |
99
+ | `groupGap` | `string` | `'3rem'` | Gap between time groups (CSS value) |
100
+ | `cardGap` | `string` | `'0.375rem'` | Gap between individual digit cards (CSS value) |
101
+ | `labelGap` | `string` | `'1rem'` | Gap between cards and the label (CSS value) |
102
+ | `onComplete` | `() => void` | — | Callback fired when countdown reaches zero |
103
+ | `orientation` | `'row'` \| `'column'` | `'row'` | Layout direction: row (horizontal) or column (stacked) |
104
+ | `scale` | `number` | `1` | Scale factor for the whole clock (e.g., `0.8` for 80% size) |
105
+ | `className` | `string` | — | Additional className for the outer wrapper |
106
+ | `style` | `CSSProperties` | — | Additional inline style for the outer wrapper |
107
+
108
+ ### Style Configuration Types
109
+
110
+ #### FlipCardStyle
111
+
112
+ | Property | Type | Default |
113
+ |----------|------|---------|
114
+ | `background` | `string` | `'#575757'` |
115
+ | `backgroundDark` | `string` | `'#4a4a4a'` |
116
+ | `width` | `string` | `'7rem'` |
117
+ | `height` | `string` | `'9.5rem'` |
118
+ | `borderRadius` | `string` | `'0.5rem'` |
119
+ | `boxShadow` | `string` | `'0 3px 8px rgba(0,0,0,0.25)'` |
120
+
121
+ #### FlipDigitStyle
122
+
123
+ | Property | Type | Default |
124
+ |----------|------|---------|
125
+ | `color` | `string` | `'#ffffff'` |
126
+ | `fontFamily` | `string` | `"'Bebas Neue', sans-serif"` |
127
+ | `fontSize` | `string` | `'5.5rem'` |
128
+ | `textShadow` | `string` | `'none'` |
129
+
130
+ #### FlipLabelStyle
131
+
132
+ | Property | Type | Default |
133
+ |----------|------|---------|
134
+ | `visible` | `boolean` | `true` |
135
+ | `color` | `string` | `'#999999'` |
136
+ | `fontFamily` | `string` | `"'Inter', sans-serif"` |
137
+ | `fontSize` | `string` | `'0.9rem'` |
138
+ | `fontWeight` | `string` | `'500'` |
139
+ | `letterSpacing` | `string` | `'0.2em'` |
140
+ | `textTransform` | `CSSProperties['textTransform']` | `'uppercase'` |
141
+
142
+ #### FlipAnimationConfig
143
+
144
+ | Property | Type | Default |
145
+ |----------|------|---------|
146
+ | `flipDuration` | `number` | `300` (ms) |
147
+ | `bounceIntensity` | `number` | `8` (degrees) |
148
+ | `flipDownEasing` | `string` | `'ease-in'` |
149
+ | `flipUpEasing` | `string` | `'ease-out'` |
150
+
151
+ #### FlipSeparatorConfig
152
+
153
+ | Property | Type | Default |
154
+ |----------|------|---------|
155
+ | `type` | `'none'` \| `'colon'` \| `'dot'` | `'none'` |
156
+ | `color` | `string` | `'#999999'` |
157
+ | `size` | `string` | `'0.5rem'` |
158
+
159
+ ## License
160
+
161
+ MIT
package/package.json CHANGED
@@ -1,40 +1,46 @@
1
- {
2
- "name": "@hasthiya_/flip-clock",
3
- "version": "1.1.0",
4
- "description": "A fully self-contained, customizable flip clock countdown React component",
5
- "main": "./dist/index.js",
6
- "module": "./dist/index.mjs",
7
- "types": "./dist/index.d.ts",
8
- "exports": {
9
- ".": {
10
- "import": {
11
- "types": "./dist/index.d.ts",
12
- "default": "./dist/index.mjs"
13
- },
14
- "require": {
15
- "types": "./dist/index.d.ts",
16
- "default": "./dist/index.js"
17
- }
18
- }
19
- },
20
- "files": [
21
- "dist"
22
- ],
23
- "sideEffects": false,
24
- "peerDependencies": {
25
- "react": "^18.0.0 || ^19.0.0",
26
- "react-dom": "^18.0.0 || ^19.0.0"
27
- },
28
- "devDependencies": {
29
- "@types/react": "^18.3.12",
30
- "@types/react-dom": "^18.3.1",
31
- "react": "^18.3.1",
32
- "react-dom": "^18.3.1",
33
- "tsup": "^8.3.5",
34
- "typescript": "^5.6.3"
35
- },
36
- "scripts": {
37
- "build": "tsup",
38
- "dev": "tsup --watch"
39
- }
40
- }
1
+ {
2
+ "name": "@hasthiya_/flip-clock",
3
+ "version": "1.1.1",
4
+ "description": "A fully self-contained, customizable flip clock countdown React component",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/Hasthiya/flip.git",
8
+ "directory": "packages/flip-clock"
9
+ },
10
+ "homepage": "https://github.com/Hasthiya/flip/tree/main/packages/flip-clock",
11
+ "main": "./dist/index.js",
12
+ "module": "./dist/index.mjs",
13
+ "types": "./dist/index.d.ts",
14
+ "exports": {
15
+ ".": {
16
+ "import": {
17
+ "types": "./dist/index.d.ts",
18
+ "default": "./dist/index.mjs"
19
+ },
20
+ "require": {
21
+ "types": "./dist/index.d.ts",
22
+ "default": "./dist/index.js"
23
+ }
24
+ }
25
+ },
26
+ "files": [
27
+ "dist"
28
+ ],
29
+ "sideEffects": false,
30
+ "peerDependencies": {
31
+ "react": "^18.0.0 || ^19.0.0",
32
+ "react-dom": "^18.0.0 || ^19.0.0"
33
+ },
34
+ "devDependencies": {
35
+ "@types/react": "^18.3.12",
36
+ "@types/react-dom": "^18.3.1",
37
+ "react": "^18.3.1",
38
+ "react-dom": "^18.3.1",
39
+ "tsup": "^8.3.5",
40
+ "typescript": "^5.6.3"
41
+ },
42
+ "scripts": {
43
+ "build": "tsup",
44
+ "dev": "tsup --watch"
45
+ }
46
+ }