telecop 0.1.43 → 0.1.44

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 (7) hide show
  1. package/dist/styles.css +180 -0
  2. package/package.json +3 -6
  3. package/dist/animations.css +0 -143
  4. package/dist/core.css +0 -59
  5. package/dist/motion-styles.css +0 -3
  6. package/dist/style.css +0 -165
  7. package/dist/themes.css +0 -104
package/dist/styles.css ADDED
@@ -0,0 +1,180 @@
1
+ /* src/styles.css */
2
+
3
+ /* ==================== TAILWIND ==================== */
4
+ @tailwind base;
5
+ @tailwind components;
6
+ @tailwind utilities;
7
+
8
+ /* ==================== BUTTON ANIMATIONS ==================== */
9
+ @keyframes shimmer {
10
+ 0% { transform: translateX(-100%); }
11
+ 100% { transform: translateX(100%); }
12
+ }
13
+
14
+ @keyframes ripple {
15
+ 0% { width: 0; height: 0; opacity: 0.6; }
16
+ 100% { width: 500px; height: 500px; opacity: 0; }
17
+ }
18
+
19
+ .animate-shimmer {
20
+ animation: shimmer 3s linear infinite;
21
+ }
22
+
23
+ .animate-ripple {
24
+ animation: ripple 0.8s ease-out forwards;
25
+ }
26
+
27
+ @keyframes fadeInUp {
28
+ from { opacity: 0; transform: translateY(30px); }
29
+ to { opacity: 1; transform: translateY(0); }
30
+ }
31
+
32
+ @keyframes fadeIn {
33
+ from { opacity: 0; }
34
+ to { opacity: 1; }
35
+ }
36
+
37
+ /* ==================== SCROLL ANIMATIONS ==================== */
38
+ @keyframes fadeUp {
39
+ from { opacity: 0; transform: translateY(60px); }
40
+ to { opacity: 1; transform: translateY(0); }
41
+ }
42
+
43
+ @keyframes fadeDown {
44
+ from { opacity: 0; transform: translateY(-60px); }
45
+ to { opacity: 1; transform: translateY(0); }
46
+ }
47
+
48
+ @keyframes fadeLeft {
49
+ from { opacity: 0; transform: translateX(60px); }
50
+ to { opacity: 1; transform: translateX(0); }
51
+ }
52
+
53
+ @keyframes fadeRight {
54
+ from { opacity: 0; transform: translateX(-60px); }
55
+ to { opacity: 1; transform: translateX(0); }
56
+ }
57
+
58
+ @keyframes zoomIn {
59
+ from { opacity: 0; transform: scale(0.8); }
60
+ to { opacity: 1; transform: scale(1); }
61
+ }
62
+
63
+ @keyframes rotateIn {
64
+ from { opacity: 0; transform: rotate(-180deg) scale(0.8); }
65
+ to { opacity: 1; transform: rotate(0deg) scale(1); }
66
+ }
67
+
68
+ .scroll-animation {
69
+ opacity: 0;
70
+ animation-fill-mode: both;
71
+ animation-play-state: paused;
72
+ }
73
+
74
+ .scroll-animation.active {
75
+ animation-play-state: running;
76
+ }
77
+
78
+ .scroll-fade-up {
79
+ animation-name: fadeUp;
80
+ animation-duration: 0.8s;
81
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
82
+ }
83
+
84
+ .scroll-fade-down {
85
+ animation-name: fadeDown;
86
+ animation-duration: 0.8s;
87
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
88
+ }
89
+
90
+ .scroll-fade-left {
91
+ animation-name: fadeLeft;
92
+ animation-duration: 0.8s;
93
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
94
+ }
95
+
96
+ .scroll-fade-right {
97
+ animation-name: fadeRight;
98
+ animation-duration: 0.8s;
99
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
100
+ }
101
+
102
+ .scroll-zoom-in {
103
+ animation-name: zoomIn;
104
+ animation-duration: 0.6s;
105
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
106
+ }
107
+
108
+ .scroll-rotate-in {
109
+ animation-name: rotateIn;
110
+ animation-duration: 0.8s;
111
+ animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
112
+ }
113
+
114
+ /* ==================== GRADIENT ANIMATIONS ==================== */
115
+ @keyframes gradient-shift {
116
+ 0%, 100% { background-position: 0% 50%; }
117
+ 50% { background-position: 100% 50%; }
118
+ }
119
+
120
+ @keyframes gradient-wave {
121
+ 0%, 100% { background-position: 0% 0%; }
122
+ 25% { background-position: 100% 0%; }
123
+ 50% { background-position: 100% 100%; }
124
+ 75% { background-position: 0% 100%; }
125
+ }
126
+
127
+ @keyframes gradient-pulse {
128
+ 0%, 100% { background-size: 100% 100%; opacity: 1; }
129
+ 50% { background-size: 150% 150%; opacity: 0.8; }
130
+ }
131
+
132
+ @keyframes gradient-rotate {
133
+ 0% { filter: hue-rotate(0deg); }
134
+ 100% { filter: hue-rotate(360deg); }
135
+ }
136
+
137
+ @keyframes gradient-flow {
138
+ 0% { background-position: 0% 50%; }
139
+ 50% { background-position: 100% 50%; }
140
+ 100% { background-position: 0% 50%; }
141
+ }
142
+
143
+ @keyframes gradient-zoom {
144
+ 0%, 100% { background-size: 100% 100%; }
145
+ 50% { background-size: 200% 200%; }
146
+ }
147
+
148
+ .animate-gradient-shift {
149
+ background-size: 200% 200% !important;
150
+ animation: gradient-shift 8s ease infinite;
151
+ }
152
+
153
+ .animate-gradient-wave {
154
+ background-size: 200% 200% !important;
155
+ animation: gradient-wave 12s ease infinite;
156
+ }
157
+
158
+ .animate-gradient-pulse {
159
+ background-position: center !important;
160
+ animation: gradient-pulse 6s ease infinite;
161
+ }
162
+
163
+ .animate-gradient-rotate {
164
+ animation: gradient-rotate 10s linear infinite;
165
+ }
166
+
167
+ .animate-gradient-flow {
168
+ background-size: 300% 300% !important;
169
+ animation: gradient-flow 15s ease infinite;
170
+ }
171
+
172
+ .animate-gradient-zoom {
173
+ background-position: center !important;
174
+ animation: gradient-zoom 8s ease infinite;
175
+ }
176
+
177
+ /* ==================== PARALLAX ==================== */
178
+ .parallax-container {
179
+ overflow-x: hidden;
180
+ }
package/package.json CHANGED
@@ -1,11 +1,12 @@
1
1
  {
2
2
  "name": "telecop",
3
- "version": "0.1.43",
3
+ "version": "0.1.44",
4
4
  "description": "Modern React UI Components Library with optional GSAP animations",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.mjs",
8
8
  "types": "./dist/index.d.ts",
9
+ "style": "./dist/styles.css",
9
10
  "exports": {
10
11
  ".": {
11
12
  "types": "./dist/index.d.ts",
@@ -22,11 +23,7 @@
22
23
  "import": "./dist/motion.mjs",
23
24
  "require": "./dist/motion.js"
24
25
  },
25
- "./style.css": "./dist/style.css",
26
- "./core.css": "./dist/core.css",
27
- "./themes.css": "./dist/themes.css",
28
- "./animations.css": "./dist/animations.css",
29
- "./motion.css": "./dist/motion-styles.css"
26
+ "./style.css": "./dist/styles.css"
30
27
  },
31
28
  "files": [
32
29
  "dist",
package/dist/animations.css DELETED
@@ -1,143 +0,0 @@
1
- /* src/styles/animations.css */
2
- /* Scroll-triggered animations */
3
-
4
- /* ==================== SCROLL ANIMATIONS ==================== */
5
-
6
- /* Fade Up */
7
- @keyframes fadeUp {
8
- from {
9
- opacity: 0;
10
- transform: translateY(60px);
11
- }
12
- to {
13
- opacity: 1;
14
- transform: translateY(0);
15
- }
16
- }
17
-
18
- /* Fade Down */
19
- @keyframes fadeDown {
20
- from {
21
- opacity: 0;
22
- transform: translateY(-60px);
23
- }
24
- to {
25
- opacity: 1;
26
- transform: translateY(0);
27
- }
28
- }
29
-
30
- /* Fade Left */
31
- @keyframes fadeLeft {
32
- from {
33
- opacity: 0;
34
- transform: translateX(60px);
35
- }
36
- to {
37
- opacity: 1;
38
- transform: translateX(0);
39
- }
40
- }
41
-
42
- /* Fade Right */
43
- @keyframes fadeRight {
44
- from {
45
- opacity: 0;
46
- transform: translateX(-60px);
47
- }
48
- to {
49
- opacity: 1;
50
- transform: translateX(0);
51
- }
52
- }
53
-
54
- /* Zoom In */
55
- @keyframes zoomIn {
56
- from {
57
- opacity: 0;
58
- transform: scale(0.8);
59
- }
60
- to {
61
- opacity: 1;
62
- transform: scale(1);
63
- }
64
- }
65
-
66
- /* Zoom Out */
67
- @keyframes zoomOut {
68
- from {
69
- opacity: 0;
70
- transform: scale(1.2);
71
- }
72
- to {
73
- opacity: 1;
74
- transform: scale(1);
75
- }
76
- }
77
-
78
- /* Rotate In */
79
- @keyframes rotateIn {
80
- from {
81
- opacity: 0;
82
- transform: rotate(-180deg) scale(0.8);
83
- }
84
- to {
85
- opacity: 1;
86
- transform: rotate(0deg) scale(1);
87
- }
88
- }
89
-
90
- /* ==================== BASE CLASSES ==================== */
91
-
92
- .scroll-animation {
93
- opacity: 0;
94
- animation-fill-mode: both;
95
- animation-play-state: paused;
96
- }
97
-
98
- .scroll-animation.active {
99
- animation-play-state: running;
100
- }
101
-
102
- /* Animation Directions */
103
- .scroll-fade-up {
104
- animation-name: fadeUp;
105
- animation-duration: 0.8s;
106
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
107
- }
108
-
109
- .scroll-fade-down {
110
- animation-name: fadeDown;
111
- animation-duration: 0.8s;
112
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
113
- }
114
-
115
- .scroll-fade-left {
116
- animation-name: fadeLeft;
117
- animation-duration: 0.8s;
118
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
119
- }
120
-
121
- .scroll-fade-right {
122
- animation-name: fadeRight;
123
- animation-duration: 0.8s;
124
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
125
- }
126
-
127
- .scroll-zoom-in {
128
- animation-name: zoomIn;
129
- animation-duration: 0.6s;
130
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
131
- }
132
-
133
- .scroll-zoom-out {
134
- animation-name: zoomOut;
135
- animation-duration: 0.6s;
136
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
137
- }
138
-
139
- .scroll-rotate-in {
140
- animation-name: rotateIn;
141
- animation-duration: 0.8s;
142
- animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
143
- }
package/dist/core.css DELETED
@@ -1,59 +0,0 @@
1
- /* src/styles/core.css */
2
- /* Core styles for buttons, cards, containers */
3
-
4
- /* ✅ أضف Tailwind directives */
5
- @tailwind base;
6
- @tailwind components;
7
- @tailwind utilities;
8
-
9
- /* ==================== BUTTON ANIMATIONS ==================== */
10
-
11
- @keyframes shimmer {
12
- 0% {
13
- transform: translateX(-100%);
14
- }
15
- 100% {
16
- transform: translateX(100%);
17
- }
18
- }
19
-
20
- @keyframes ripple {
21
- 0% {
22
- width: 0;
23
- height: 0;
24
- opacity: 0.6;
25
- }
26
- 100% {
27
- width: 500px;
28
- height: 500px;
29
- opacity: 0;
30
- }
31
- }
32
-
33
- .animate-shimmer {
34
- animation: shimmer 3s linear infinite;
35
- }
36
-
37
- .animate-ripple {
38
- animation: ripple 0.8s ease-out forwards;
39
- }
40
-
41
- @keyframes fadeInUp {
42
- from {
43
- opacity: 0;
44
- transform: translateY(30px);
45
- }
46
- to {
47
- opacity: 1;
48
- transform: translateY(0);
49
- }
50
- }
51
-
52
- @keyframes fadeIn {
53
- from {
54
- opacity: 0;
55
- }
56
- to {
57
- opacity: 1;
58
- }
59
- }
package/dist/motion-styles.css DELETED
@@ -1,3 +0,0 @@
1
- .parallax-container {
2
- overflow-x: hidden;
3
- }
package/dist/style.css DELETED
@@ -1,165 +0,0 @@
1
- /* ========== IMPORTS (يجب أن تكون أولاً) ========== */
2
-
3
- /* ========== TAILWIND ========== */
4
- @tailwind base;
5
- @tailwind components;
6
- @tailwind utilities;
7
-
8
- /* ثم استيراد الملفات الأخرى (بدون @tailwind فيها) */
9
- @import './themes.css';
10
- @import './animations.css';
11
- /* ========== CUSTOM ANIMATIONS ========== */
12
-
13
- @keyframes shimmer {
14
- 0% {
15
- transform: translateX(-100%);
16
- }
17
- 100% {
18
- transform: translateX(100%);
19
- }
20
- }
21
-
22
- @keyframes ripple {
23
- 0% {
24
- width: 0;
25
- height: 0;
26
- opacity: 0.6;
27
- }
28
- 100% {
29
- width: 500px;
30
- height: 500px;
31
- opacity: 0;
32
- }
33
- }
34
-
35
- .animate-shimmer {
36
- animation: shimmer 3s linear infinite;
37
- }
38
-
39
- .animate-ripple {
40
- animation: ripple 0.8s ease-out forwards;
41
- }
42
-
43
-
44
- @keyframes fadeInUp {
45
- from {
46
- opacity: 0;
47
- transform: translateY(30px);
48
- }
49
- to {
50
- opacity: 1;
51
- transform: translateY(0);
52
- }
53
- }
54
-
55
- @keyframes fadeIn {
56
- from {
57
- opacity: 0;
58
- }
59
- to {
60
- opacity: 1;
61
- }
62
- }
63
-
64
- /* ==================== GRADIENT ANIMATIONS ==================== */
65
-
66
- /* Animation 1: Gradient Shift */
67
- @keyframes gradient-shift {
68
- 0%, 100% {
69
- background-position: 0% 50%;
70
- }
71
- 50% {
72
- background-position: 100% 50%;
73
- }
74
- }
75
-
76
- /* Animation 2: Gradient Wave */
77
- @keyframes gradient-wave {
78
- 0%, 100% {
79
- background-position: 0% 0%;
80
- }
81
- 25% {
82
- background-position: 100% 0%;
83
- }
84
- 50% {
85
- background-position: 100% 100%;
86
- }
87
- 75% {
88
- background-position: 0% 100%;
89
- }
90
- }
91
-
92
- /* Animation 3: Gradient Pulse */
93
- @keyframes gradient-pulse {
94
- 0%, 100% {
95
- background-size: 100% 100%;
96
- opacity: 1;
97
- }
98
- 50% {
99
- background-size: 150% 150%;
100
- opacity: 0.8;
101
- }
102
- }
103
-
104
- /* Animation 4: Gradient Rotate */
105
- @keyframes gradient-rotate {
106
- 0% {
107
- filter: hue-rotate(0deg);
108
- }
109
- 100% {
110
- filter: hue-rotate(360deg);
111
- }
112
- }
113
-
114
- /* Animation 5: Gradient Flow */
115
- @keyframes gradient-flow {
116
- 0% {
117
- background-position: 0% 50%;
118
- }
119
- 50% {
120
- background-position: 100% 50%;
121
- }
122
- 100% {
123
- background-position: 0% 50%;
124
- }
125
- }
126
-
127
- /* Animation 6: Gradient Zoom */
128
- @keyframes gradient-zoom {
129
- 0%, 100% {
130
- background-size: 100% 100%;
131
- }
132
- 50% {
133
- background-size: 200% 200%;
134
- }
135
- }
136
-
137
- /* Utility Classes */
138
- .animate-gradient-shift {
139
- background-size: 200% 200% !important;
140
- animation: gradient-shift 8s ease infinite;
141
- }
142
-
143
- .animate-gradient-wave {
144
- background-size: 200% 200% !important;
145
- animation: gradient-wave 12s ease infinite;
146
- }
147
-
148
- .animate-gradient-pulse {
149
- background-position: center !important;
150
- animation: gradient-pulse 6s ease infinite;
151
- }
152
-
153
- .animate-gradient-rotate {
154
- animation: gradient-rotate 10s linear infinite;
155
- }
156
-
157
- .animate-gradient-flow {
158
- background-size: 300% 300% !important;
159
- animation: gradient-flow 15s ease infinite;
160
- }
161
-
162
- .animate-gradient-zoom {
163
- background-position: center !important;
164
- animation: gradient-zoom 8s ease infinite;
165
- }
package/dist/themes.css DELETED
@@ -1,104 +0,0 @@
1
- /* src/styles/themes.css */
2
- /* Gradient animations for themes */
3
-
4
- /* ==================== GRADIENT ANIMATIONS ==================== */
5
-
6
- /* Animation 1: Gradient Shift */
7
- @keyframes gradient-shift {
8
- 0%, 100% {
9
- background-position: 0% 50%;
10
- }
11
- 50% {
12
- background-position: 100% 50%;
13
- }
14
- }
15
-
16
- .animate-gradient-shift {
17
- background-size: 200% 200% !important;
18
- animation: gradient-shift 8s ease infinite;
19
- }
20
-
21
- /* Animation 2: Gradient Wave */
22
- @keyframes gradient-wave {
23
- 0%, 100% {
24
- background-position: 0% 0%;
25
- }
26
- 25% {
27
- background-position: 100% 0%;
28
- }
29
- 50% {
30
- background-position: 100% 100%;
31
- }
32
- 75% {
33
- background-position: 0% 100%;
34
- }
35
- }
36
-
37
- .animate-gradient-wave {
38
- background-size: 200% 200% !important;
39
- animation: gradient-wave 12s ease infinite;
40
- }
41
-
42
- /* Animation 3: Gradient Pulse */
43
- @keyframes gradient-pulse {
44
- 0%, 100% {
45
- background-size: 100% 100%;
46
- opacity: 1;
47
- }
48
- 50% {
49
- background-size: 150% 150%;
50
- opacity: 0.8;
51
- }
52
- }
53
-
54
- .animate-gradient-pulse {
55
- background-position: center !important;
56
- animation: gradient-pulse 6s ease infinite;
57
- }
58
-
59
- /* Animation 4: Gradient Rotate */
60
- @keyframes gradient-rotate {
61
- 0% {
62
- filter: hue-rotate(0deg);
63
- }
64
- 100% {
65
- filter: hue-rotate(360deg);
66
- }
67
- }
68
-
69
- .animate-gradient-rotate {
70
- animation: gradient-rotate 10s linear infinite;
71
- }
72
-
73
- /* Animation 5: Gradient Flow */
74
- @keyframes gradient-flow {
75
- 0% {
76
- background-position: 0% 50%;
77
- }
78
- 50% {
79
- background-position: 100% 50%;
80
- }
81
- 100% {
82
- background-position: 0% 50%;
83
- }
84
- }
85
-
86
- .animate-gradient-flow {
87
- background-size: 300% 300% !important;
88
- animation: gradient-flow 15s ease infinite;
89
- }
90
-
91
- /* Animation 6: Gradient Zoom */
92
- @keyframes gradient-zoom {
93
- 0%, 100% {
94
- background-size: 100% 100%;
95
- }
96
- 50% {
97
- background-size: 200% 200%;
98
- }
99
- }
100
-
101
- .animate-gradient-zoom {
102
- background-position: center !important;
103
- animation: gradient-zoom 8s ease infinite;
104
- }