dolphincss 1.2.4 → 1.2.6

package/README.md

@@ -1,3 +1,75 @@
+---
+
+## 🧩 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>
+<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`
+
+See `src/App.jsx` for a full working demo of all these classes and effects.
 # 🇳🇵 DolphinCSS + React + Vite
 
 यो template ले minimal setup दिन्छ **React** को लागि **Vite**, **HMR**, **TailwindCSS**, र **DolphinCSS theme** सँग काम गर्न।
@@ -23,3 +95,88 @@ Install TailwindCSS & DolphinCSS:
 ```bash
 npm install tailwindcss dolphincss
 import 'dolphincss/dolphin-css.css';
+
+---
+
+## 🚀 DolphinCSS Tutorial & Demo
+
+### 1. GitHub Link
+
+[View on GitHub](https://github.com/Phuyalshankar/dolphincss)
+
+---
+
+### 2. All Button & Global Classes
+
+#### Button Variants
+
+```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>
+```
+
+#### 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)
+
+---
+
+### 3. Demo: All Effects in One Component
+
+You can see all global classes in action in the main demo component:
+
+```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>
+	);
+}
+```
+
+---
+
+### 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`).
+
+**To test:**
+
+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.
+
+---
+
+**For more, see the [GitHub repo](https://github.com/Phuyalshankar/dolphincss) and explore `src/App.jsx` for all global class usage.**