telecop 0.1.14 → 0.1.16

package/README.md

@@ -1,33 +1,106 @@
-# 🚀 Telecop
+# 🎨 Telecop
 
-> Modern React UI Components Library
+Modern React UI Components Library with beautiful buttons and gradients.
 
-## ⚠️ Coming Soon
+## 📦 Installation
+```bash
+npm install telecop
+```
 
-**Telecop** is a modern, lightweight React UI components library built with TypeScript and Tailwind CSS.
+## ⚠️ Important: Import Styles
 
-### 🎯 What's Coming
+**You must import the CSS file in your main layout or app file:**
+```tsx
+// app/layout.tsx (Next.js App Router)
+import 'telecop/style.css';
 
-- ✨ Beautiful, customizable components
-- 🎨 Glass morphism effects
-- ⚡ Lightweight and fast
-- 📦 TypeScript support
-- 🎭 Tailwind CSS styling
-- 🔥 Modern design patterns
+// or _app.tsx (Next.js Pages Router)
+import 'telecop/style.css';
 
-### 📦 Installation
-```bash
-npm install telecop
+// or main.tsx (React/Vite)
+import 'telecop/style.css';
+```
+
+## 🚀 Usage
+
+### Buttons
+```tsx
+import { 
+  SolidBlue, 
+  GradientPurplePink, 
+  GlassBlue,
+  AnimatedShimmer,
+  NeonPink 
+} from 'telecop';
+
+function App() {
+  return (
+    <div>
+      <SolidBlue onClick={() => alert('Clicked!')}>
+        Click Me
+      </SolidBlue>
+      
+      <GradientPurplePink>
+        Beautiful Gradient
+      </GradientPurplePink>
+      
+      <GlassBlue>
+        Glass Effect
+      </GlassBlue>
+    </div>
+  );
+}
+```
+
+### Home Template
+```tsx
+import { Home } from 'telecop';
+
+function HomePage() {
+  return (
+    <Home
+      name="Your Name"
+      title="Full Stack Developer"
+      description="Building amazing things"
+      backgroundGradient="linear-gradient(308deg, #a70b0b 0%, #000000 75%)"
+      animationType="flow"
+      primaryButtonText="Get Started"
+      secondaryButtonText="Learn More"
+    />
+  );
+}
 ```
 
-### 🔜 Official Release
+## 📋 Available Components
+
+### Buttons (30 styles)
+- Solid Buttons (5)
+- Gradient Buttons (5)
+- Glass Buttons (4)
+- Animated Buttons (4)
+- Outlined Buttons (3)
+- Ghost Buttons (3)
+- 3D Buttons (3)
+- Neon Buttons (3)
+
+### Templates
+- Home - Beautiful hero section with gradients
+
+## 🎨 Features
+
+- ✅ 30+ Beautiful Button Styles
+- ✅ Gradient Animations
+- ✅ Glass Morphism Effects
+- ✅ Neon Effects
+- ✅ 3D Buttons
+- ✅ TypeScript Support
+- ✅ Tailwind CSS
+- ✅ Zero Dependencies
 
-The first stable version will be available soon. Stay tuned!
+## 📚 Documentation
 
----
+Visit [telecop.dev](https://telecop.dev) for full documentation and live examples.
 
-**Follow updates:** [npm package](https://www.npmjs.com/package/telecop)
+## 📄 License
 
-**Version:** 0.1.0  
-**License:** MIT  
-**Author:** Laith Alawad
+MIT © Laith Alawad

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "telecop",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "Modern React UI Components Library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -11,12 +11,10 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
-    "./plugin": "./tailwind-plugin.js",
     "./style.css": "./dist/style.css"
   },
   "files": [
     "dist",
-    "tailwind-plugin.js",
     "README.md"
   ],
   "scripts": {
@@ -30,19 +28,10 @@
     "tailwind",
     "telecop",
     "buttons",
-    "gradient",
-    "glass-morphism"
+    "gradient"
   ],
   "author": "Laith Alawad",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/yourusername/telecop"
-  },
-  "bugs": {
-    "url": "https://github.com/yourusername/telecop/issues"
-  },
-  "homepage": "https://github.com/yourusername/telecop#readme",
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"

package/tailwind-plugin.js

@@ -1,68 +0,0 @@
-// src/tailwind-plugin.js
-
-const plugin = require('tailwindcss/plugin');
-
-module.exports = plugin(function({ addUtilities }) {
-  const newUtilities = {
-    // Gradient Animations
-    '.animate-gradient-shift': {
-      'background-size': '200% 200%',
-      'animation': 'gradient-shift 8s ease infinite',
-    },
-    '.animate-gradient-wave': {
-      'background-size': '200% 200%',
-      'animation': 'gradient-wave 12s ease infinite',
-    },
-    '.animate-gradient-pulse': {
-      'background-position': 'center',
-      'animation': 'gradient-pulse 6s ease infinite',
-    },
-    '.animate-gradient-rotate': {
-      'animation': 'gradient-rotate 10s linear infinite',
-    },
-    '.animate-gradient-flow': {
-      'background-size': '300% 300%',
-      'animation': 'gradient-flow 15s ease infinite',
-    },
-    '.animate-gradient-zoom': {
-      'background-position': 'center',
-      'animation': 'gradient-zoom 8s ease infinite',
-    },
-  };
-
-  addUtilities(newUtilities);
-}, {
-  theme: {
-    extend: {
-      keyframes: {
-        'gradient-shift': {
-          '0%, 100%': { 'background-position': '0% 50%' },
-          '50%': { 'background-position': '100% 50%' },
-        },
-        'gradient-wave': {
-          '0%, 100%': { 'background-position': '0% 0%' },
-          '25%': { 'background-position': '100% 0%' },
-          '50%': { 'background-position': '100% 100%' },
-          '75%': { 'background-position': '0% 100%' },
-        },
-        'gradient-pulse': {
-          '0%, 100%': { 'background-size': '100% 100%', opacity: '1' },
-          '50%': { 'background-size': '150% 150%', opacity: '0.8' },
-        },
-        'gradient-rotate': {
-          '0%': { filter: 'hue-rotate(0deg)' },
-          '100%': { filter: 'hue-rotate(360deg)' },
-        },
-        'gradient-flow': {
-          '0%': { 'background-position': '0% 50%' },
-          '50%': { 'background-position': '100% 50%' },
-          '100%': { 'background-position': '0% 50%' },
-        },
-        'gradient-zoom': {
-          '0%, 100%': { 'background-size': '100% 100%' },
-          '50%': { 'background-size': '200% 200%' },
-        },
-      },
-    },
-  },
-});