telecop 0.1.12 → 0.1.16
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 +94 -21
- package/package.json +8 -6
package/README.md
CHANGED
|
@@ -1,33 +1,106 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 🎨 Telecop
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Modern React UI Components Library with beautiful buttons and gradients.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 📦 Installation
|
|
6
|
+
```bash
|
|
7
|
+
npm install telecop
|
|
8
|
+
```
|
|
6
9
|
|
|
7
|
-
|
|
10
|
+
## ⚠️ Important: Import Styles
|
|
8
11
|
|
|
9
|
-
|
|
12
|
+
**You must import the CSS file in your main layout or app file:**
|
|
13
|
+
```tsx
|
|
14
|
+
// app/layout.tsx (Next.js App Router)
|
|
15
|
+
import 'telecop/style.css';
|
|
10
16
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
- ⚡ Lightweight and fast
|
|
14
|
-
- 📦 TypeScript support
|
|
15
|
-
- 🎭 Tailwind CSS styling
|
|
16
|
-
- 🔥 Modern design patterns
|
|
17
|
+
// or _app.tsx (Next.js Pages Router)
|
|
18
|
+
import 'telecop/style.css';
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
// or main.tsx (React/Vite)
|
|
21
|
+
import 'telecop/style.css';
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## 🚀 Usage
|
|
25
|
+
|
|
26
|
+
### Buttons
|
|
27
|
+
```tsx
|
|
28
|
+
import {
|
|
29
|
+
SolidBlue,
|
|
30
|
+
GradientPurplePink,
|
|
31
|
+
GlassBlue,
|
|
32
|
+
AnimatedShimmer,
|
|
33
|
+
NeonPink
|
|
34
|
+
} from 'telecop';
|
|
35
|
+
|
|
36
|
+
function App() {
|
|
37
|
+
return (
|
|
38
|
+
<div>
|
|
39
|
+
<SolidBlue onClick={() => alert('Clicked!')}>
|
|
40
|
+
Click Me
|
|
41
|
+
</SolidBlue>
|
|
42
|
+
|
|
43
|
+
<GradientPurplePink>
|
|
44
|
+
Beautiful Gradient
|
|
45
|
+
</GradientPurplePink>
|
|
46
|
+
|
|
47
|
+
<GlassBlue>
|
|
48
|
+
Glass Effect
|
|
49
|
+
</GlassBlue>
|
|
50
|
+
</div>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Home Template
|
|
56
|
+
```tsx
|
|
57
|
+
import { Home } from 'telecop';
|
|
58
|
+
|
|
59
|
+
function HomePage() {
|
|
60
|
+
return (
|
|
61
|
+
<Home
|
|
62
|
+
name="Your Name"
|
|
63
|
+
title="Full Stack Developer"
|
|
64
|
+
description="Building amazing things"
|
|
65
|
+
backgroundGradient="linear-gradient(308deg, #a70b0b 0%, #000000 75%)"
|
|
66
|
+
animationType="flow"
|
|
67
|
+
primaryButtonText="Get Started"
|
|
68
|
+
secondaryButtonText="Learn More"
|
|
69
|
+
/>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
21
72
|
```
|
|
22
73
|
|
|
23
|
-
|
|
74
|
+
## 📋 Available Components
|
|
75
|
+
|
|
76
|
+
### Buttons (30 styles)
|
|
77
|
+
- Solid Buttons (5)
|
|
78
|
+
- Gradient Buttons (5)
|
|
79
|
+
- Glass Buttons (4)
|
|
80
|
+
- Animated Buttons (4)
|
|
81
|
+
- Outlined Buttons (3)
|
|
82
|
+
- Ghost Buttons (3)
|
|
83
|
+
- 3D Buttons (3)
|
|
84
|
+
- Neon Buttons (3)
|
|
85
|
+
|
|
86
|
+
### Templates
|
|
87
|
+
- Home - Beautiful hero section with gradients
|
|
88
|
+
|
|
89
|
+
## 🎨 Features
|
|
90
|
+
|
|
91
|
+
- ✅ 30+ Beautiful Button Styles
|
|
92
|
+
- ✅ Gradient Animations
|
|
93
|
+
- ✅ Glass Morphism Effects
|
|
94
|
+
- ✅ Neon Effects
|
|
95
|
+
- ✅ 3D Buttons
|
|
96
|
+
- ✅ TypeScript Support
|
|
97
|
+
- ✅ Tailwind CSS
|
|
98
|
+
- ✅ Zero Dependencies
|
|
24
99
|
|
|
25
|
-
|
|
100
|
+
## 📚 Documentation
|
|
26
101
|
|
|
27
|
-
|
|
102
|
+
Visit [telecop.dev](https://telecop.dev) for full documentation and live examples.
|
|
28
103
|
|
|
29
|
-
|
|
104
|
+
## 📄 License
|
|
30
105
|
|
|
31
|
-
|
|
32
|
-
**License:** MIT
|
|
33
|
-
**Author:** Laith Alawad
|
|
106
|
+
MIT © Laith Alawad
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "telecop",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.16",
|
|
4
4
|
"description": "Modern React UI Components Library",
|
|
5
|
-
"type": "module",
|
|
6
5
|
"main": "./dist/index.js",
|
|
7
6
|
"module": "./dist/index.mjs",
|
|
8
7
|
"types": "./dist/index.d.ts",
|
|
9
8
|
"exports": {
|
|
10
9
|
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
11
|
"import": "./dist/index.mjs",
|
|
12
|
-
"require": "./dist/index.js"
|
|
13
|
-
"types": "./dist/index.d.ts"
|
|
12
|
+
"require": "./dist/index.js"
|
|
14
13
|
},
|
|
15
14
|
"./style.css": "./dist/style.css"
|
|
16
15
|
},
|
|
17
16
|
"files": [
|
|
18
|
-
"dist"
|
|
17
|
+
"dist",
|
|
18
|
+
"README.md"
|
|
19
19
|
],
|
|
20
20
|
"scripts": {
|
|
21
21
|
"build": "vite build",
|
|
@@ -26,7 +26,9 @@
|
|
|
26
26
|
"ui",
|
|
27
27
|
"components",
|
|
28
28
|
"tailwind",
|
|
29
|
-
"telecop"
|
|
29
|
+
"telecop",
|
|
30
|
+
"buttons",
|
|
31
|
+
"gradient"
|
|
30
32
|
],
|
|
31
33
|
"author": "Laith Alawad",
|
|
32
34
|
"license": "MIT",
|