dolphincss 1.2.5 → 1.2.7

package/README.md

@@ -1,25 +1,115 @@
-# 🇳🇵 DolphinCSS + React + Vite
-
-यो template ले minimal setup दिन्छ **React** को लागि **Vite**, **HMR**, **TailwindCSS**, र **DolphinCSS theme** सँग काम गर्न।
-
-DolphinCSS एक lightweight, world-class CSS library हो जसमा ready-to-use components र Tailwind-friendly utilities छन्।
-
----
-
-## Features
-
-- Prebuilt **Dolphin theme colors** र utilities
-- React-ready **components** (buttons, inputs, tables, etc.)
-- TailwindCSS v4+ compatible
-- Optimized for **Vite + React + HMR**
-- Fully **TypeScript compatible**
-
----
-
-## Installation
-
-Install TailwindCSS & DolphinCSS:
-
-```bash
-npm install tailwindcss dolphincss
-import 'dolphincss/dolphin-css.css';
+<div align="center">
+  <h1>🐬 DolphinCSS</h1>
+  <p><strong>A Next-Generation UI Library for React + TailwindCSS</strong></p>
+  <p><em>Where Magic Component Generation meets Beautiful Global Classes.</em></p>
+</div>
+
+---
+
+DolphinCSS is not just another CSS framework. It fundamentally reimagines how developers build UI by combining the extreme customizability of **TailwindCSS**, the simplicity of **Bootstrap's Global Classes**, and an unprecedented **Vite-powered Magic Component Generator**.
+
+Say goodbye to heavy vendor lock-ins (MUI, AntD) and tedious CLI commands (Shadcn UI).
+
+## ✨ The 4 Unique Superpowers
+
+### 1. 🪄 Magic Component Generation (Zero CLI)
+We loved the idea of Shadcn giving you ownership of the code, but hated running CLI commands for every single component. 
+
+With DolphinCSS, **you never touch the terminal.** Just type a magic class in your editor and save:
+
+```jsx
+// 1. You type this in your App.jsx:
+<div className="dolphin-card"></div>
+
+// 2. You hit Save (Ctrl+S)
+
+// 3. 🪄 MAGIC! Vite instantly replaces that line IN YOUR FILE with the full React Component code!
+<div className="glass card p-6 border border-white/20 rounded-2xl max-w-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 relative overflow-hidden" style={{ backdropFilter: 'blur(20px)' }}>
+  {/* Full customizable code is now YOURS */}
+</div>
+```
+
+### 2. 🎨 High-Level Global Classes
+Tired of writing 20 utility classes for a single button? DolphinCSS brings back the simplicity of Global Classes, but with breathtaking modern aesthetics (Glassmorphism, Neon Glows).
+
+```jsx
+/* The Tailwind Way (Messy) */
+<button className="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-bold rounded-lg shadow-lg shadow-blue-500/50 transition-all">
+  Click
+</button>
+
+/* The DolphinCSS Way (Clean & Global) */
+<button className="filled primary-500 glow btn-lg">
+  Click
+</button>
+```
+
+### 3. 🧩 Infinite Class Composability (Nesting)
+Classes in DolphinCSS are designed to stack perfectly. Combine background colors, gradients, glows, and animations endlessly without conflicts!
+
+```jsx
+// Combine classes to create complex, animated, glowing UI instantly:
+<button className="filled success gradient glow glow-pulse rounded-full">
+  I am a Glowing, Pulsing, Gradient Green Button!
+</button>
+
+// Create a frosted glass overlay with a dark tint:
+<div className="overlay overlay-blur-xl overlay-dark-50"></div>
+```
+
+### 4. 🎬 World-Class Built-in Animations
+No need for `framer-motion` or `animate.css`. DolphinCSS ships with a complete `@layer utilities` animation engine that you can drop on any HTML element.
+
+- **Continuous:** `float`, `spin-slow`, `pulse`, `bounce`, `shimmer`, `gradient-flow`, `neon-flicker`
+- **Hover:** `hover-pulse`, `hover-jelly`, `hover-glow`, `hover-ripple`
+- **Entrance:** `fade-in`, `slide-up`, `zoom-in`, `rotate-3d`
+- **Controls:** `delay-200`, `duration-500`
+
+```jsx
+<img src="logo.png" className="float hover-jelly fade-in delay-200" />
+```
+
+---
+
+## 📦 Installation & Setup
+
+1. **Install via npm:**
+```bash
+npm install tailwindcss dolphincss
+```
+
+2. **Add the Magic Vite Plugin:** (In `vite.config.js`)
+```javascript
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import dolphincssPlugin from 'dolphincss/vite-plugin'
+
+export default defineConfig({
+  plugins: [react(), dolphincssPlugin()]
+})
+```
+
+3. **Import Styles:** (In your main `main.jsx` or `index.css`)
+```javascript
+import 'dolphincss/dolphin-css.css';
+```
+
+---
+
+## 🐬 Available Magic Components
+
+Type any of these magic markers in your `.jsx` or `.tsx` file, hit save, and watch the code generate instantly:
+
+- `<div className="dolphin-form"></div>` (Beautiful Login/Action Form)
+- `<div className="dolphin-table"></div>` (Responsive Data Table)
+- `<div className="dolphin-toast"></div>` (Notification Toast)
+- `<div className="dolphin-modal"></div>` (Native HTML Dialog Modal)
+- `<div className="dolphin-button"></div>` (Button Variants Showcase)
+- `<div className="dolphin-card"></div>` (Glassmorphic Profile Card)
+- `<div className="dolphin-navbar"></div>` (Sleek Navigation Bar)
+- `<div className="dolphin-alert"></div>` (Modern Alert Box)
+- `<div className="dolphin-badge"></div>` (Status Badges)
+
+---
+
+**Built with ❤️ in Nepal.** Ready for the future of UI development.