@jepepa/like-button 0.8.1 → 0.8.2

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/dist/styles.css +161 -0
  2. package/package.json +4 -3
package/dist/styles.css ADDED
@@ -0,0 +1,161 @@
1
+ /* LikeButton Vanilla CSS - No Tailwind dependency */
2
+
3
+ /* ============================================
4
+ Animations
5
+ ============================================ */
6
+
7
+ @keyframes wave-scroll-left {
8
+ from {
9
+ transform: translateX(0);
10
+ }
11
+ to {
12
+ transform: translateX(-50%);
13
+ }
14
+ }
15
+
16
+ @keyframes wave-scroll-right {
17
+ from {
18
+ transform: translateX(-50%);
19
+ }
20
+ to {
21
+ transform: translateX(0);
22
+ }
23
+ }
24
+
25
+ /* ============================================
26
+ Container
27
+ ============================================ */
28
+
29
+ .like-button-container {
30
+ position: relative;
31
+ display: inline-block;
32
+ }
33
+
34
+ /* ============================================
35
+ Button Base
36
+ Note: border-radius, border, box-shadow, and
37
+ background-color are set via inline styles
38
+ to support customization props
39
+ ============================================ */
40
+
41
+ .like-button {
42
+ position: relative;
43
+ overflow: hidden;
44
+ z-index: 10;
45
+ border-style: solid;
46
+ display: flex;
47
+ align-items: center;
48
+ justify-content: center;
49
+ transition:
50
+ box-shadow 0.15s ease,
51
+ transform 0.15s ease;
52
+ cursor:
53
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23EF4444'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"),
54
+ pointer;
55
+ }
56
+
57
+ /* ============================================
58
+ Focus States
59
+ ============================================ */
60
+
61
+ .like-button:focus {
62
+ outline: none;
63
+ }
64
+
65
+ .like-button:focus-visible {
66
+ outline: 4px solid #111827;
67
+ outline-offset: 2px;
68
+ }
69
+
70
+ /* ============================================
71
+ Disabled State
72
+ ============================================ */
73
+
74
+ .like-button:disabled {
75
+ cursor: not-allowed;
76
+ opacity: 0.7;
77
+ }
78
+
79
+ .like-button:disabled:hover {
80
+ transform: none;
81
+ }
82
+
83
+ /* ============================================
84
+ Liquid Fill
85
+ ============================================ */
86
+
87
+ .like-button__fill {
88
+ position: absolute;
89
+ bottom: 0;
90
+ left: 0;
91
+ right: 0;
92
+ z-index: 0;
93
+ transition: height 0.5s ease-out;
94
+ }
95
+
96
+ /* ============================================
97
+ Wave Containers
98
+ ============================================ */
99
+
100
+ .like-button__wave {
101
+ position: absolute;
102
+ bottom: 100%;
103
+ left: 0;
104
+ width: 200%;
105
+ height: 16px;
106
+ display: flex;
107
+ }
108
+
109
+ .like-button__wave--back {
110
+ animation: wave-scroll-left 3s linear infinite;
111
+ }
112
+
113
+ .like-button__wave--front {
114
+ animation: wave-scroll-right 1.5s linear infinite;
115
+ }
116
+
117
+ .like-button__wave-svg {
118
+ width: 50%;
119
+ height: 100%;
120
+ fill: currentColor;
121
+ }
122
+
123
+ /* ============================================
124
+ Icon
125
+ ============================================ */
126
+
127
+ .like-button__icon {
128
+ position: relative;
129
+ z-index: 20;
130
+ transition: color 0.3s ease;
131
+ pointer-events: none;
132
+ }
133
+
134
+ /* ============================================
135
+ Particles Container
136
+ ============================================ */
137
+
138
+ .like-button__particles {
139
+ position: absolute;
140
+ top: 50%;
141
+ left: 50%;
142
+ transform: translate(-50%, -50%);
143
+ pointer-events: none;
144
+ }
145
+
146
+ /* Particle Vanilla CSS - No Tailwind dependency */
147
+
148
+ .particle {
149
+ position: absolute;
150
+ width: 40px;
151
+ height: 40px;
152
+ /* Transition properties (duration, timing-function) are set inline via style prop */
153
+ transition-property: transform, opacity;
154
+ }
155
+
156
+ .particle__icon {
157
+ width: 100%;
158
+ height: 100%;
159
+ fill: currentColor;
160
+ }
161
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jepepa/like-button",
3
- "version": "0.8.1",
3
+ "version": "0.8.2",
4
4
  "description": "Animated like button with liquid fill and particle effects",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -14,13 +14,14 @@
14
14
  "./vanilla": {
15
15
  "types": "./dist/vanilla.d.ts",
16
16
  "import": "./dist/vanilla.js"
17
- }
17
+ },
18
+ "./styles.css": "./dist/styles.css"
18
19
  },
19
20
  "files": [
20
21
  "dist"
21
22
  ],
22
23
  "scripts": {
23
- "build": "tsup",
24
+ "build": "tsup && cat src/LikeButton/LikeButton.vanilla.css src/Particle/Particle.vanilla.css > dist/styles.css",
24
25
  "dev": "tsup --watch",
25
26
  "test": "vitest run",
26
27
  "test:watch": "vitest",