iconflow 1.2.2 → 1.3.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.
Files changed (5) hide show
  1. package/dist/index.css +6 -6
  2. package/dist/index.js +13 -11
  3. package/dist/index.mjs +12 -10
  4. package/dist/styles.css/styles.css +22 -79
  5. package/package.json +4 -4
package/dist/index.css CHANGED
@@ -5,22 +5,22 @@
5
5
  justify-content: center;
6
6
  }
7
7
  .iconflow-shake.iconflow-active {
8
- animation: iconflow-shake calc(0.5s / var(--iconflow-speed)) ease-in-out;
8
+ animation: iconflow-shake var(--iconflow-duration, 0.5s) ease-in-out;
9
9
  }
10
10
  .iconflow-spin.iconflow-active {
11
- animation: iconflow-spin calc(1s / var(--iconflow-speed)) linear infinite;
11
+ animation: iconflow-spin var(--iconflow-duration, 1s) linear infinite;
12
12
  }
13
13
  .iconflow-bounce.iconflow-active {
14
- animation: iconflow-bounce calc(0.6s / var(--iconflow-speed)) ease infinite;
14
+ animation: iconflow-bounce var(--iconflow-duration, 0.6s) ease infinite;
15
15
  }
16
16
  .iconflow-swing.iconflow-active {
17
- animation: iconflow-swing calc(0.8s / var(--iconflow-speed)) ease-in-out infinite;
17
+ animation: iconflow-swing var(--iconflow-duration, 0.8s) ease-in-out infinite;
18
18
  }
19
19
  .iconflow-pulse.iconflow-active {
20
- animation: iconflow-pulse calc(1s / var(--iconflow-speed)) ease-in-out infinite;
20
+ animation: iconflow-pulse var(--iconflow-duration, 1s) ease-in-out infinite;
21
21
  }
22
22
  .iconflow-heartbeat.iconflow-active {
23
- animation: iconflow-heartbeat calc(0.8s / var(--iconflow-speed)) ease-in-out infinite;
23
+ animation: iconflow-heartbeat var(--iconflow-duration, 0.8s) ease-in-out infinite;
24
24
  }
25
25
  @keyframes iconflow-shake {
26
26
  0%, 100% {
package/dist/index.js CHANGED
@@ -36,15 +36,8 @@ __export(index_exports, {
36
36
  module.exports = __toCommonJS(index_exports);
37
37
 
38
38
  // src/AnimatedIcon.jsx
39
- var import_react = __toESM(require("react"));
40
- var ANIMATION_TYPES = [
41
- "shake",
42
- "spin",
43
- "bounce",
44
- "swing",
45
- "pulse",
46
- "heartbeat"
47
- ];
39
+ var import_react = __toESM(require("react"), 1);
40
+ var ANIMATION_TYPES = ["shake", "spin", "bounce", "swing", "pulse", "heartbeat"];
48
41
  var TRIGGERS = ["hover", "click", "mount", "loop"];
49
42
  var AnimatedIcon = ({
50
43
  icon: Icon,
@@ -72,13 +65,22 @@ var AnimatedIcon = ({
72
65
  onMouseLeave: () => setIsTriggered(false)
73
66
  },
74
67
  click: { onClick: () => setIsTriggered((prev) => !prev) },
75
- mount: {}
68
+ mount: {},
69
+ loop: {}
70
+ };
71
+ const durations = {
72
+ shake: `${0.5 / speed}s`,
73
+ spin: `${1 / speed}s`,
74
+ bounce: `${0.6 / speed}s`,
75
+ swing: `${0.8 / speed}s`,
76
+ pulse: `${1 / speed}s`,
77
+ heartbeat: `${0.8 / speed}s`
76
78
  };
77
79
  return /* @__PURE__ */ import_react.default.createElement(
78
80
  "span",
79
81
  {
80
82
  className: `iconflow-wrapper iconflow-${animationType} ${isTriggered ? "iconflow-active" : ""} ${className}`.trim(),
81
- style: { "--iconflow-speed": `${speed}s` },
83
+ style: { "--iconflow-duration": durations[animationType] },
82
84
  ...handlers[triggerType]
83
85
  },
84
86
  /* @__PURE__ */ import_react.default.createElement(Icon, { size, color, strokeWidth })
package/dist/index.mjs CHANGED
@@ -1,13 +1,6 @@
1
1
  // src/AnimatedIcon.jsx
2
2
  import React, { useEffect, useState } from "react";
3
- var ANIMATION_TYPES = [
4
- "shake",
5
- "spin",
6
- "bounce",
7
- "swing",
8
- "pulse",
9
- "heartbeat"
10
- ];
3
+ var ANIMATION_TYPES = ["shake", "spin", "bounce", "swing", "pulse", "heartbeat"];
11
4
  var TRIGGERS = ["hover", "click", "mount", "loop"];
12
5
  var AnimatedIcon = ({
13
6
  icon: Icon,
@@ -35,13 +28,22 @@ var AnimatedIcon = ({
35
28
  onMouseLeave: () => setIsTriggered(false)
36
29
  },
37
30
  click: { onClick: () => setIsTriggered((prev) => !prev) },
38
- mount: {}
31
+ mount: {},
32
+ loop: {}
33
+ };
34
+ const durations = {
35
+ shake: `${0.5 / speed}s`,
36
+ spin: `${1 / speed}s`,
37
+ bounce: `${0.6 / speed}s`,
38
+ swing: `${0.8 / speed}s`,
39
+ pulse: `${1 / speed}s`,
40
+ heartbeat: `${0.8 / speed}s`
39
41
  };
40
42
  return /* @__PURE__ */ React.createElement(
41
43
  "span",
42
44
  {
43
45
  className: `iconflow-wrapper iconflow-${animationType} ${isTriggered ? "iconflow-active" : ""} ${className}`.trim(),
44
- style: { "--iconflow-speed": `${speed}s` },
46
+ style: { "--iconflow-duration": durations[animationType] },
45
47
  ...handlers[triggerType]
46
48
  },
47
49
  /* @__PURE__ */ React.createElement(Icon, { size, color, strokeWidth })
package/dist/styles.css/styles.css CHANGED
@@ -7,122 +7,65 @@
7
7
 
8
8
  /* SHAKE */
9
9
  .iconflow-shake.iconflow-active {
10
- animation: iconflow-shake calc(0.5s / var(--iconflow-speed)) ease-in-out;
10
+ animation: iconflow-shake var(--iconflow-duration, 0.5s) ease-in-out;
11
11
  }
12
12
 
13
13
  /* SPIN */
14
14
  .iconflow-spin.iconflow-active {
15
- animation: iconflow-spin calc(1s / var(--iconflow-speed)) linear infinite;
15
+ animation: iconflow-spin var(--iconflow-duration, 1s) linear infinite;
16
16
  }
17
17
 
18
18
  /* BOUNCE */
19
19
  .iconflow-bounce.iconflow-active {
20
- animation: iconflow-bounce calc(0.6s / var(--iconflow-speed)) ease infinite;
20
+ animation: iconflow-bounce var(--iconflow-duration, 0.6s) ease infinite;
21
21
  }
22
22
 
23
23
  /* SWING */
24
24
  .iconflow-swing.iconflow-active {
25
- animation: iconflow-swing calc(0.8s / var(--iconflow-speed)) ease-in-out infinite;
25
+ animation: iconflow-swing var(--iconflow-duration, 0.8s) ease-in-out infinite;
26
26
  }
27
27
 
28
28
  /* PULSE */
29
29
  .iconflow-pulse.iconflow-active {
30
- animation: iconflow-pulse calc(1s / var(--iconflow-speed)) ease-in-out infinite;
30
+ animation: iconflow-pulse var(--iconflow-duration, 1s) ease-in-out infinite;
31
31
  }
32
32
 
33
33
  /* HEARTBEAT */
34
34
  .iconflow-heartbeat.iconflow-active {
35
- animation: iconflow-heartbeat calc(0.8s / var(--iconflow-speed)) ease-in-out infinite;
35
+ animation: iconflow-heartbeat var(--iconflow-duration, 0.8s) ease-in-out infinite;
36
36
  }
37
37
 
38
38
  /* KEYFRAMES */
39
39
  @keyframes iconflow-shake {
40
-
41
- 0%,
42
- 100% {
43
- transform: rotate(0deg);
44
- }
45
-
46
- 25% {
47
- transform: rotate(-15deg);
48
- }
49
-
50
- 75% {
51
- transform: rotate(15deg);
52
- }
40
+ 0%, 100% { transform: rotate(0deg); }
41
+ 25% { transform: rotate(-15deg); }
42
+ 75% { transform: rotate(15deg); }
53
43
  }
54
44
 
55
45
  @keyframes iconflow-spin {
56
- from {
57
- transform: rotate(0deg);
58
- }
59
-
60
- to {
61
- transform: rotate(360deg);
62
- }
46
+ from { transform: rotate(0deg); }
47
+ to { transform: rotate(360deg); }
63
48
  }
64
49
 
65
50
  @keyframes iconflow-bounce {
66
-
67
- 0%,
68
- 100% {
69
- transform: translateY(0);
70
- }
71
-
72
- 50% {
73
- transform: translateY(-6px);
74
- }
51
+ 0%, 100% { transform: translateY(0); }
52
+ 50% { transform: translateY(-6px); }
75
53
  }
76
54
 
77
55
  @keyframes iconflow-swing {
78
-
79
- 0%,
80
- 100% {
81
- transform: rotate(0deg);
82
- transform-origin: top center;
83
- }
84
-
85
- 25% {
86
- transform: rotate(15deg);
87
- transform-origin: top center;
88
- }
89
-
90
- 75% {
91
- transform: rotate(-15deg);
92
- transform-origin: top center;
93
- }
56
+ 0%, 100% { transform: rotate(0deg); transform-origin: top center; }
57
+ 25% { transform: rotate(15deg); transform-origin: top center; }
58
+ 75% { transform: rotate(-15deg); transform-origin: top center; }
94
59
  }
95
60
 
96
61
  @keyframes iconflow-pulse {
97
-
98
- 0%,
99
- 100% {
100
- opacity: 1;
101
- transform: scale(1);
102
- }
103
-
104
- 50% {
105
- opacity: 0.6;
106
- transform: scale(0.9);
107
- }
62
+ 0%, 100% { opacity: 1; transform: scale(1); }
63
+ 50% { opacity: 0.6; transform: scale(0.9); }
108
64
  }
109
65
 
110
66
  @keyframes iconflow-heartbeat {
111
-
112
- 0%,
113
- 100% {
114
- transform: scale(1);
115
- }
116
-
117
- 25% {
118
- transform: scale(1.3);
119
- }
120
-
121
- 50% {
122
- transform: scale(1);
123
- }
124
-
125
- 75% {
126
- transform: scale(1.2);
127
- }
67
+ 0%, 100% { transform: scale(1); }
68
+ 25% { transform: scale(1.3); }
69
+ 50% { transform: scale(1); }
70
+ 75% { transform: scale(1.2); }
128
71
  }
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "iconflow",
3
- "version": "1.2.2",
3
+ "version": "1.3.0",
4
4
  "description": "Animated icon wrapper for Lucide React icons",
5
+ "type": "module",
5
6
  "main": "dist/index.js",
6
7
  "module": "dist/index.mjs",
7
8
  "exports": {
@@ -15,7 +16,7 @@
15
16
  "dist"
16
17
  ],
17
18
  "scripts": {
18
- "build:js": "tsup",
19
+ "build:js": "tsup --config tsup.config.js",
19
20
  "build:css": "cpx src/styles.css dist/styles.css",
20
21
  "build": "npm run build:js && npm run build:css",
21
22
  "prepublishOnly": "npm run build"
@@ -27,8 +28,7 @@
27
28
  },
28
29
  "devDependencies": {
29
30
  "cpx": "^1.5.0",
30
- "tsup": "^8.5.1",
31
- "typescript": "^6.0.3"
31
+ "tsup": "^8.5.1"
32
32
  },
33
33
  "keywords": [
34
34
  "icons",