dolphincss 1.2.6 → 1.2.8

package/README.md

@@ -1,182 +1,115 @@
----
-
-## 🧩 More Components: Card, Input, Nav, Sidenav
-
-### Card Example
-```jsx
-<div className="card filled primary">Primary Card</div>
-<div className="card outlined success">Success Outlined Card</div>
-<div className="card glass warning">Glass Warning Card</div>
-<div className="card gradient danger">Gradient Danger Card</div>
-```
-
-### Input Example
-```jsx
-<div className="floatinglabel">
-	<input className="floatinglabel-input" placeholder=" " />
-	<label className="floatinglabel-label">Floating Label</label>
-</div>
-<input className="standardlabel-input" placeholder="Standard Label" />
-<select className="select primary">
-	<option>Option 1</option>
-	<option>Option 2</option>
-</select>
-<div className="radio-group horizontal">
-	<label className="radio-item">
-		<input type="radio" name="r" className="primary" />
-		<span className="radio-label">Radio 1</span>
-	</label>
-	<label className="radio-item">
-		<input type="radio" name="r" className="success" />
-		<span className="radio-label">Radio 2</span>
-	</label>
+<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>
-<input type="checkbox" className="primary" />
-<input type="checkbox" className="success" />
-```
-
-### Nav Example
-```jsx
-<nav className="nav-container">
-	<div className="nav-brand">Brand</div>
-	<ul className="nav-ul nav-ul-right">
-		<li className="nav-li active"><a href="#">Home</a></li>
-		<li className="nav-li"><a href="#">About</a></li>
-		<li className="nav-li"><a href="#">Contact</a></li>
-	</ul>
-</nav>
-```
-
-### Sidenav Example
-```jsx
-<aside className="admin-nav glass-wave">
-	<div className="admin-nav-header">Sidenav Header</div>
-	<ul>
-		<li>Dashboard</li>
-		<li>Settings</li>
-		<li>Logout</li>
-	</ul>
-</aside>
-```
 
 ---
 
-## 🏆 All Global Classes
-
-- **Button:** `.filled`, `.outlined`, `.plain`, `.primary`, `.secondary`, `.success`, `.warning`, `.danger`, `.info`, `.gradient`, `.glass`, `.glow`
-- **Card:** `.card`, `.filled`, `.outlined`, `.glass`, `.gradient`, color variants
-- **Input:** `.floatinglabel`, `.standardlabel`, `.select`, `.radio-group`, `.radio-item`, `.checkbox`, color variants
-- **Nav:** `.nav-container`, `.nav-brand`, `.nav-ul`, `.nav-li`, `.nav-dropdown`, `.nav-toggle`, `.nav-search-container`, etc.
-- **Sidenav:** `.admin-nav`, `.glass-wave`, `.neon-flow`, `.crystal-glass`, `.aqua-depth`, `.admin-nav-header`
+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**.
 
-See `src/App.jsx` for a full working demo of all these classes and effects.
-# 🇳🇵 DolphinCSS + React + Vite
+Say goodbye to heavy vendor lock-ins (MUI, AntD) and tedious CLI commands (Shadcn UI).
 
-यो template ले minimal setup दिन्छ **React** को लागि **Vite**, **HMR**, **TailwindCSS**, र **DolphinCSS theme** सँग काम गर्न।
+## ✨ The 4 Unique Superpowers
 
-DolphinCSS एक lightweight, world-class CSS library हो जसमा ready-to-use components र Tailwind-friendly utilities छन्।
+### 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. 
 
----
-
-## Features
-
-- Prebuilt **Dolphin theme colors** र utilities
-- React-ready **components** (buttons, inputs, tables, etc.)
-- TailwindCSS v4+ compatible
-- Optimized for **Vite + React + HMR**
-- Fully **TypeScript compatible**
-
----
+With DolphinCSS, **you never touch the terminal.** Just type a magic class in your editor and save:
 
-## Installation
+```jsx
+// 1. You type this in your App.jsx:
+<div className="dolphin-card"></div>
 
-Install TailwindCSS & DolphinCSS:
+// 2. You hit Save (Ctrl+S)
 
-```bash
-npm install tailwindcss dolphincss
-import 'dolphincss/dolphin-css.css';
+// 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).
 
-## 🚀 DolphinCSS Tutorial & Demo
+```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>
+```
 
-### 1. GitHub Link
+### 3. 🧩 Infinite Class Composability (Nesting)
+Classes in DolphinCSS are designed to stack perfectly. Combine background colors, gradients, glows, and animations endlessly without conflicts!
 
-[View on GitHub](https://github.com/Phuyalshankar/dolphincss)
+```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>
+```
 
-### 2. All Button & Global Classes
+### 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.
 
-#### Button Variants
+- **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
-<button className="filled primary md">Primary</button>
-<button className="outlined primary md">Primary Outlined</button>
-<button className="plain primary md">Primary Plain</button>
-<button className="filled secondary md">Secondary</button>
-<button className="outlined danger md">Danger Outlined</button>
-<button className="filled success glow md">Success Glow</button>
-<button className="gradient primary md">Gradient Primary</button>
-<button className="gradient outlined primary md">Gradient Outlined</button>
-<button className="gradient plain primary md">Gradient Text</button>
-<button className="glass primary md">Glass Primary</button>
-<button className="glass primary glow md">Glass + Glow</button>
-<button className="glass primary gradient glow md">Glass + Gradient + Glow</button>
+<img src="logo.png" className="float hover-jelly fade-in delay-200" />
 ```
 
-#### Global Classes
+---
 
-- `.filled`, `.outlined`, `.plain` (from varient.css)
-- `.primary`, `.secondary`, `.success`, `.warning`, `.danger`, `.info`
-- `.glow` (from glow.css)
-- `.gradient` (from gradient.css)
-- `.glass` (from glass.css)
+## 📦 Installation & Setup
 
----
+1. **Install via npm:**
+```bash
+npm install tailwindcss dolphincss
+```
 
-### 3. Demo: All Effects in One Component
+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'
 
-You can see all global classes in action in the main demo component:
+export default defineConfig({
+  plugins: [react(), dolphincssPlugin()]
+})
+```
 
-```jsx
-// src/App.jsx
-import React from 'react';
-
-export default function Demo() {
-	return (
-		<div>
-			<button className="filled primary md">Primary</button>
-			<button className="outlined primary md">Primary Outlined</button>
-			<button className="plain primary md">Primary Plain</button>
-			<button className="filled success glow md">Success Glow</button>
-			<button className="gradient primary md">Gradient Primary</button>
-			<button className="gradient outlined primary md">Gradient Outlined</button>
-			<button className="gradient plain primary md">Gradient Text</button>
-			<button className="glass primary md">Glass Primary</button>
-			<button className="glass primary glow md">Glass + Glow</button>
-			<button className="glass primary gradient glow md">Glass + Gradient + Glow</button>
-		</div>
-	);
-}
+3. **Import Styles:** (In your main `main.jsx` or `index.css`)
+```javascript
+import 'dolphincss/dolphin-css.css';
 ```
 
 ---
 
-### 4. Try All Effects
-
-All global classes from `glow.css`, `gradient.css`, and `varient.css` are already used in the main demo (`src/App.jsx`).
+## 🐬 Available Magic Components
 
-**To test:**
+Type any of these magic markers in your `.jsx` or `.tsx` file, hit save, and watch the code generate instantly:
 
-1. Run the project:
-	 ```bash
-	 npm install
-	 npm run dev
-	 ```
-2. Open [http://localhost:5173](http://localhost:5173) in your browser.
-3. You will see all button variants, glow, gradient, and glass effects in one place.
+- `<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)
 
 ---
 
-**For more, see the [GitHub repo](https://github.com/Phuyalshankar/dolphincss) and explore `src/App.jsx` for all global class usage.**
+**Built with ❤️ in Nepal.** Ready for the future of UI development.