dolphincss 1.2.6 → 1.2.7

package/package.json

@@ -1,22 +1,31 @@
 {
   "name": "dolphincss",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "type": "module",
   "description": "DolphinCSS - World-class TailwindCSS + React component library",
   "main": "dolphin-css.css",
+  "exports": {
+    ".": "./dolphin-css.css",
+    "./vite-plugin": "./vite-plugin.js"
+  },
   "files": [
     "dist/",
     "dolphin-css.css",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "snippets/",
+    "scripts/",
+    "vite-plugin.js"
   ],
   "scripts": {
-    "dev": "vite",
+    "dev": "concurrently \"vite\" \"npm run watch:dolphin\"",
+    "watch:dolphin": "node scripts/dolphin-watch.js",
     "build:css": "npx @tailwindcss/cli -i ./src/dolphin-css/App.css -o ./dolphin-css.css --minify",
     "watch:css": "npx @tailwindcss/cli -i ./src/dolphin-css/App.css -o ./dolphin-css.css --watch",
     "build": "vite build && npm run build:css",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "postinstall": "node scripts/setup-snippets.cjs"
   },
   "keywords": [
     "css",
@@ -28,22 +37,24 @@
   "author": "Shankar Phunyal",
   "license": "MIT",
   "peerDependencies": {
+    "lucide-react": ">=0.4",
     "react": ">=18",
-    "react-dom": ">=18",
-    "lucide-react": ">=0.4"
+    "react-dom": ">=18"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.16",
-    "tailwindcss": "^4.1.16",
     "@eslint/js": "^9.36.0",
+    "@tailwindcss/vite": "^4.1.16",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.0.4",
+    "chokidar": "^5.0.0",
+    "concurrently": "^10.0.0",
     "eslint": "^9.36.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.4.0",
+    "tailwindcss": "^4.1.16",
     "vite": "^7.1.7"
   }
 }

package/scripts/components.js

@@ -0,0 +1,195 @@
+export default {
+  "dolphin-form": `
+<div className="glass card p-6 lg:p-8 border border-white/20 rounded-2xl" style={{ backdropFilter: 'blur(20px)' }}>
+  <h3 className="text-xl font-bold text-white mb-6">Quick Actions</h3>
+  <form className="flex-col-left w-full gap-5">
+    <div className="w-full">
+      <div className="floatinglabel input-icon-left w-full">
+        <Mail size={20} className="icon-left text-primary-500" style={{ left: '1rem' }} />
+        <input type="email" id="email" className="floatinglabel-input lg w-full bg-white/10 border-white/20 focus:border-primary-400 transition-colors rounded-xl text-white placeholder:text-transparent" style={{ paddingLeft: '3.5rem' }} placeholder=" " />
+        <label htmlFor="email" className="floatinglabel-label text-white/70 font-medium" style={{ zIndex: 10 }}>Email Address</label>
+      </div>
+    </div>
+    
+    <div className="w-full">
+      <div className="floatinglabel input-icon-both w-full">
+        <Lock size={20} className="icon-left text-primary-500" style={{ left: '1rem' }} />
+        <input type="password" id="password" className="floatinglabel-input lg w-full bg-white/10 border-white/20 focus:border-primary-400 transition-colors rounded-xl text-white placeholder:text-transparent" style={{ paddingLeft: '3.5rem', paddingRight: '3.5rem' }} placeholder=" " />
+        <label htmlFor="password" className="floatinglabel-label text-white/70 font-medium" style={{ zIndex: 10 }}>Password</label>
+        <button type="button" className="icon-right text-white/50 hover:text-white transition-colors" style={{ zIndex: 20, right: '1rem' }}>
+          <Eye size={20} />
+        </button>
+      </div>
+    </div>
+
+    <label className="radio-item flex-left gap-2 cursor-pointer w-full mt-2">
+      <input type="checkbox" className="accent-primary-500 w-4 h-4 rounded border-white/30 bg-white/10" />
+      <span className="text-sm font-medium text-white/80">Subscribe to newsletter</span>
+    </label>
+
+    <button type="button" className="filled primary-600 w-full py-3 rounded-xl text-white font-bold hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300 mt-2 glow">
+      Submit Data
+    </button>
+  </form>
+</div>
+  `.trim(),
+  "dolphin-table": `
+<div className="glass card p-6 border border-white/20 rounded-2xl overflow-hidden" style={{ backdropFilter: 'blur(20px)' }}>
+  <div className="flex-between mb-6">
+    <h3 className="text-xl font-bold text-white m-0">Recent Transactions</h3>
+    <button className="text-primary-300 text-sm font-medium hover:underline bg-transparent border-none cursor-pointer flex-center">
+      View All <ChevronRight size={16} />
+    </button>
+  </div>
+  
+  <div className="w-full overflow-x-auto">
+    <table className="w-full text-left border-collapse">
+      <thead>
+        <tr className="border-b border-white/10 text-white/60 text-sm uppercase tracking-wider">
+          <th className="pb-3 font-medium">Customer</th>
+          <th className="pb-3 font-medium">Date</th>
+          <th className="pb-3 font-medium">Amount</th>
+          <th className="pb-3 font-medium">Status</th>
+        </tr>
+      </thead>
+      <tbody className="text-white">
+        <tr className="border-b border-white/5 hover:bg-white/5 transition-colors">
+          <td className="py-4 flex-left gap-3">
+            <div className="circle sm filled primary-500 text-white font-bold text-xs flex-center">JD</div>
+            <span className="font-medium">John Doe</span>
+          </td>
+          <td className="py-4 text-white/70">Oct 24, 2025</td>
+          <td className="py-4 font-bold">$120.50</td>
+          <td className="py-4"><span className="px-2 py-1 rounded-md bg-success-500/20 text-success-300 text-xs font-bold">Completed</span></td>
+        </tr>
+        <tr className="hover:bg-white/5 transition-colors">
+          <td className="py-4 flex-left gap-3">
+            <div className="circle sm filled secondary-500 text-white font-bold text-xs flex-center">SS</div>
+            <span className="font-medium">Sarah Smith</span>
+          </td>
+          <td className="py-4 text-white/70">Oct 23, 2025</td>
+          <td className="py-4 font-bold">$340.00</td>
+          <td className="py-4"><span className="px-2 py-1 rounded-md bg-warning-500/20 text-warning-300 text-xs font-bold">Pending</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+  `.trim(),
+  "dolphin-toast": `
+{/* Ultra Simple Toast */}
+<div className="fixed bottom-6 right-6 z-[9999]">
+  <div className="toast">
+    <span className="text-2xl drop-shadow-md">✅</span>
+    <div className="flex-1">
+      <span className="font-bold block">Success!</span>
+      <span className="opacity-70 text-sm">Action completed beautifully.</span>
+    </div>
+    <button className="opacity-50 hover:opacity-100 transition-opacity cursor-pointer text-lg">✕</button>
+  </div>
+</div>
+  `.trim(),
+  "dolphin-modal": `
+{/* Ultra Simple Native Modal */}
+<dialog className="modal" open>
+  <h3 className="text-2xl font-bold mb-3">Action Required</h3>
+  <p className="opacity-80 mb-6 leading-relaxed">
+    This modal uses the native HTML <code>&lt;dialog&gt;</code> element. 
+    No wrapper divs, no complex positioning classes. Just pure CSS magic!
+  </p>
+  <div className="flex-right gap-3">
+    <button className="outlined plain py-2 px-4 rounded-lg">Cancel</button>
+    <button className="filled primary-500 text-white py-2 px-4 rounded-lg glow">Confirm Action</button>
+  </div>
+</dialog>
+  `.trim(),
+  "dolphin-button": `
+<div className="flex-left gap-4 flex-wrap p-4 glass rounded-xl border border-white/10" style={{ backdropFilter: 'blur(10px)' }}>
+  <button className="filled primary-500 text-white py-2 px-6 rounded-lg font-bold hover:shadow-lg hover:-translate-y-0.5 transition-all glow">
+    Primary Action
+  </button>
+  <button className="filled secondary-500 text-white py-2 px-6 rounded-lg font-bold hover:shadow-lg hover:-translate-y-0.5 transition-all glow">
+    Secondary
+  </button>
+  <button className="outlined plain py-2 px-6 rounded-lg font-bold border-2 border-white/30 hover:border-white hover:bg-white/10 transition-all">
+    Outlined
+  </button>
+  <button className="ghost py-2 px-6 rounded-lg font-bold hover:bg-white/10 transition-colors">
+    Ghost Button
+  </button>
+</div>
+  `.trim(),
+  "dolphin-card": `
+<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)' }}>
+  <div className="absolute top-0 right-0 w-32 h-32 bg-primary-500/20 rounded-full blur-2xl"></div>
+  <div className="flex-left gap-4 mb-4 relative z-10">
+    <div className="w-16 h-16 rounded-full border-2 border-primary-400 overflow-hidden shadow-lg p-0.5">
+      <img src="https://i.pravatar.cc/150?img=11" alt="Profile" className="w-full h-full rounded-full object-cover" />
+    </div>
+    <div>
+      <h3 className="text-xl font-bold text-white m-0">Alex Developer</h3>
+      <p className="text-primary-300 text-sm font-medium">Software Engineer</p>
+    </div>
+  </div>
+  <p className="text-white/70 text-sm leading-relaxed mb-6 relative z-10">
+    Passionate about building magical user experiences and world-class design systems using DolphinCSS.
+  </p>
+  <div className="flex-between relative z-10">
+    <div className="flex gap-2">
+      <span className="px-3 py-1 rounded-full bg-white/10 text-xs font-medium text-white/90">React</span>
+      <span className="px-3 py-1 rounded-full bg-white/10 text-xs font-medium text-white/90">Tailwind</span>
+    </div>
+    <button className="circle filled primary-500 text-white p-2 hover:shadow-lg hover:scale-110 transition-all flex-center">
+      <ChevronRight size={16} />
+    </button>
+  </div>
+</div>
+  `.trim(),
+  "dolphin-navbar": `
+<nav className="glass w-full py-4 px-6 md:px-8 border-b border-white/10 flex-between sticky top-0 z-50 shadow-sm" style={{ backdropFilter: 'blur(24px)' }}>
+  <div className="flex-left gap-2 cursor-pointer">
+    <div className="circle sm filled primary-500 text-white font-bold flex-center glow">🐬</div>
+    <span className="text-xl font-bold text-white tracking-tight">Dolphin</span>
+  </div>
+  <div className="hidden md:flex gap-6">
+    <a href="#" className="text-white/80 hover:text-white font-medium transition-colors">Home</a>
+    <a href="#" className="text-white/80 hover:text-white font-medium transition-colors">Features</a>
+    <a href="#" className="text-white/80 hover:text-white font-medium transition-colors">Pricing</a>
+    <a href="#" className="text-white/80 hover:text-white font-medium transition-colors">Docs</a>
+  </div>
+  <div className="flex-right gap-3">
+    <button className="hidden md:block outlined plain py-2 px-4 rounded-lg font-medium text-sm">Log In</button>
+    <button className="filled primary-600 text-white py-2 px-4 rounded-lg font-medium text-sm hover:shadow-lg transition-all glow">Sign Up</button>
+  </div>
+</nav>
+  `.trim(),
+  "dolphin-alert": `
+<div className="flex flex-col gap-3">
+  <div className="w-full p-4 rounded-xl border border-info-500/30 bg-info-500/10 flex-left gap-3 text-info-100">
+    <Activity size={20} className="text-info-400 shrink-0" />
+    <div>
+      <h4 className="font-bold text-info-300 text-sm">System Update</h4>
+      <p className="text-xs opacity-80 mt-1">A new version of DolphinCSS is available with magical features.</p>
+    </div>
+  </div>
+  <div className="w-full p-4 rounded-xl border border-warning-500/30 bg-warning-500/10 flex-left gap-3 text-warning-100">
+    <Bell size={20} className="text-warning-400 shrink-0" />
+    <div>
+      <h4 className="font-bold text-warning-300 text-sm">Action Needed</h4>
+      <p className="text-xs opacity-80 mt-1">Please verify your email address to continue using all features.</p>
+    </div>
+  </div>
+</div>
+  `.trim(),
+  "dolphin-badge": `
+<div className="flex gap-3 flex-wrap">
+  <span className="px-3 py-1 rounded-full bg-primary-500/20 text-primary-300 text-xs font-bold border border-primary-500/30">Primary</span>
+  <span className="px-3 py-1 rounded-full bg-success-500/20 text-success-300 text-xs font-bold border border-success-500/30 flex-left gap-1">
+    <span className="w-1.5 h-1.5 rounded-full bg-success-400"></span> Active
+  </span>
+  <span className="px-3 py-1 rounded-full bg-warning-500/20 text-warning-300 text-xs font-bold border border-warning-500/30">Pending</span>
+  <span className="px-3 py-1 rounded-full bg-danger-500/20 text-danger-300 text-xs font-bold border border-danger-500/30">Failed</span>
+  <span className="px-3 py-1 rounded-full bg-white/10 text-white/80 text-xs font-bold border border-white/20">Neutral</span>
+</div>
+  `.trim()
+};

package/scripts/dolphin-watch.js

@@ -0,0 +1,53 @@
+import chokidar from 'chokidar';
+import fs from 'fs';
+import path from 'path';
+import components from './components.js';
+
+// Setup watcher for src folder
+const targetDir = './src';
+const watcher = chokidar.watch(targetDir, {
+  ignored: /(^|[\/\\])\../, // ignore dotfiles
+  persistent: true
+});
+
+const log = console.log.bind(console);
+log(`\n🐬 DolphinCSS Magic Watcher Started!`);
+log(`👀 Listening for magic markers (like <div className="dolphin-form"></div>) in ${targetDir} for .js, .jsx, .tsx, .html files\n`);
+
+watcher.on('all', (event, filePath) => {
+  if (event !== 'add' && event !== 'change') return;
+  const ext = path.extname(filePath);
+  if (!['.jsx', '.tsx', '.js', '.html'].includes(ext)) return;
+  try {
+    let content = fs.readFileSync(filePath, 'utf8');
+    let modified = false;
+
+    for (const [marker, replacement] of Object.entries(components)) {
+      
+      // Much simpler: we can just use replace directly if we don't care about the regex complexity
+      // Let's use simple string replacements for the most common cases:
+      const cases = [
+        `<div className="${marker}"></div>`,
+        `<div class="${marker}"></div>`,
+        `<div className="${marker}" />`,
+        `<div class="${marker}" />`,
+        `<div className='${marker}'></div>`,
+        `<div class='${marker}'></div>`
+      ];
+
+      for (const pattern of cases) {
+        if (content.includes(pattern)) {
+          content = content.replace(pattern, replacement);
+          modified = true;
+          log(`✨ MAGIC INJECTION: Injected '${marker}' into ${path.basename(filePath)}`);
+        }
+      }
+    }
+
+    if (modified) {
+      fs.writeFileSync(filePath, content, 'utf8');
+    }
+  } catch (error) {
+    console.error(`❌ Error processing file ${filePath}:`, error);
+  }
+});

package/scripts/setup-snippets.cjs

@@ -0,0 +1,44 @@
+const fs = require('fs');
+const path = require('path');
+
+// Determine the root directory of the project where dolphincss is installed
+// In npm scripts, INIT_CWD is the directory where the npm command was run
+const projectRoot = process.env.INIT_CWD || path.resolve(process.cwd(), '../..');
+
+console.log(`[DolphinCSS] Post-install setup...`);
+console.log(`[DolphinCSS] Checking project root: ${projectRoot}`);
+
+try {
+  // If we are in the dolphincss package itself (development mode), don't install snippets to its own root
+  // We check this by seeing if the package.json name is dolphincss
+  const rootPackagePath = path.join(projectRoot, 'package.json');
+  if (fs.existsSync(rootPackagePath)) {
+    const pkg = JSON.parse(fs.readFileSync(rootPackagePath, 'utf8'));
+    if (pkg.name === 'dolphincss') {
+      console.log(`[DolphinCSS] Development mode detected. Skipping snippets auto-install.`);
+      process.exit(0);
+    }
+  }
+
+  const vscodeDir = path.join(projectRoot, '.vscode');
+  const snippetsDest = path.join(vscodeDir, 'dolphincss.code-snippets');
+  const snippetsSource = path.join(__dirname, '../snippets/dolphincss.json');
+
+  // Create .vscode directory if it doesn't exist
+  if (!fs.existsSync(vscodeDir)) {
+    console.log(`[DolphinCSS] Creating .vscode directory...`);
+    fs.mkdirSync(vscodeDir, { recursive: true });
+  }
+
+  // Copy snippets file
+  if (fs.existsSync(snippetsSource)) {
+    console.log(`[DolphinCSS] Installing VS Code snippets...`);
+    fs.copyFileSync(snippetsSource, snippetsDest);
+    console.log(`[DolphinCSS] Success! IntelliSense snippets added to ${snippetsDest}`);
+  } else {
+    console.warn(`[DolphinCSS] Warning: Snippets source file not found at ${snippetsSource}`);
+  }
+
+} catch (error) {
+  console.warn(`[DolphinCSS] Warning: Could not install VS Code snippets automatically. (${error.message})`);
+}

package/snippets/dolphincss.json

@@ -0,0 +1,74 @@
+{
+  "DolphinCSS Effect - Neon": { "prefix": "fx-neon", "body": ["fx-neon"], "description": "Bright cyber neon glow effect" },
+  "DolphinCSS Effect - Glass": { "prefix": "fx-glass", "body": ["fx-glass"], "description": "Translucent glassmorphism effect" },
+  "DolphinCSS Effect - Metal": { "prefix": "fx-metal", "body": ["fx-metal"], "description": "Liquid metal gradient effect" },
+  "DolphinCSS Effect - Rainbow": { "prefix": "fx-rainbow", "body": ["fx-rainbow"], "description": "Psychedelic animated rainbow gradient" },
+  "DolphinCSS Effect - Float": { "prefix": "fx-float", "body": ["fx-float"], "description": "Floating element with shadow" },
+  "DolphinCSS Effect - Flare": { "prefix": "fx-flare", "body": ["fx-flare"], "description": "Solar flare warm gradient" },
+  "DolphinCSS Effect - Holo": { "prefix": "fx-holo", "body": ["fx-holo"], "description": "Holographic matrix grid effect" },
+  "DolphinCSS Effect - Crystal": { "prefix": "fx-crystal", "body": ["fx-crystal"], "description": "Crystal clear glass effect" },
+  "DolphinCSS Effect - Aqua": { "prefix": "fx-aqua", "body": ["fx-aqua"], "description": "Deep aqua water effect" },
+  "DolphinCSS Effect - Nebula": { "prefix": "fx-nebula", "body": ["fx-nebula"], "description": "Galactic purple/blue nebula effect" },
+  "DolphinCSS Effect - Aurora": { "prefix": "fx-aurora", "body": ["fx-aurora"], "description": "Frosted aurora light effect" },
+
+  "DolphinCSS Theme - Sagarmatha": { "prefix": "bg-sagarmatha", "body": ["bg-sagarmatha"], "description": "Ice Blue to Deep Ocean Blue Premium Theme" },
+  "DolphinCSS Theme - Danphe": { "prefix": "bg-danphe", "body": ["bg-danphe"], "description": "Vibrant Multi-color Premium Theme" },
+  "DolphinCSS Theme - Munal": { "prefix": "bg-munal", "body": ["bg-munal"], "description": "Royal Deep Purple and Gold Premium Theme" },
+  "DolphinCSS Theme - Laligurans": { "prefix": "bg-laligurans", "body": ["bg-laligurans"], "description": "Crimson Red to Soft Pink Premium Theme" },
+  "DolphinCSS Theme - Machhapuchhre": { "prefix": "bg-machhapuchhre", "body": ["bg-machhapuchhre"], "description": "Dark Slate and Frosty Silver Premium Theme" },
+  "DolphinCSS Theme - Mustang": { "prefix": "bg-mustang", "body": ["bg-mustang"], "description": "Earthy Terracotta and Warm Orange Premium Theme" },
+  "DolphinCSS Theme - Tilicho": { "prefix": "bg-tilicho", "body": ["bg-tilicho"], "description": "High Altitude Turquoise to Deep Teal Premium Theme" },
+  "DolphinCSS Theme - Lumbini": { "prefix": "bg-lumbini", "body": ["bg-lumbini"], "description": "Peaceful Soft Gold and Calm White Premium Theme" },
+
+  "DolphinCSS Layout - Flex Center": { "prefix": "flex-center", "body": ["flex-center"], "description": "Flexbox centered items (both axes)" },
+  "DolphinCSS Layout - Flex Between": { "prefix": "flex-between", "body": ["flex-between"], "description": "Flexbox justify space-between" },
+  "DolphinCSS Layout - Flex Left": { "prefix": "flex-left", "body": ["flex-left"], "description": "Flexbox items-center justify-start" },
+  "DolphinCSS Layout - Flex Right": { "prefix": "flex-right", "body": ["flex-right"], "description": "Flexbox items-center justify-end" },
+  "DolphinCSS Layout - Flex Col Center": { "prefix": "flex-col-center", "body": ["flex-col-center"], "description": "Flex column centered items" },
+  "DolphinCSS Layout - Flex Col Left": { "prefix": "flex-col-left", "body": ["flex-col-left"], "description": "Flex column items start" },
+  "DolphinCSS Layout - Flex Col Right": { "prefix": "flex-col-right", "body": ["flex-col-right"], "description": "Flex column items end" },
+  
+  "DolphinCSS Layout - Grid Center": { "prefix": "grid-center", "body": ["grid-center"], "description": "Grid place-items center" },
+  "DolphinCSS Layout - Grid 2 Col": { "prefix": "grid-col-2", "body": ["grid-col-2"], "description": "CSS Grid 2 columns" },
+  "DolphinCSS Layout - Grid 3 Col": { "prefix": "grid-col-3", "body": ["grid-col-3"], "description": "CSS Grid 3 columns" },
+  "DolphinCSS Layout - Grid 4 Col": { "prefix": "grid-col-4", "body": ["grid-col-4"], "description": "CSS Grid 4 columns" },
+
+  "DolphinCSS Component - Button Filled": { "prefix": "btn-filled", "body": ["filled primary"], "description": "Primary solid button" },
+  "DolphinCSS Component - Button Outlined": { "prefix": "btn-outlined", "body": ["outlined primary"], "description": "Primary outlined button" },
+  "DolphinCSS Component - Button Circle": { "prefix": "btn-circle", "body": ["circle md filled primary"], "description": "Medium circular button" },
+  "DolphinCSS Component - Card": { "prefix": "card", "body": ["card"], "description": "Base modern AI card" },
+  "DolphinCSS Component - Card Glass": { "prefix": "card-glass", "body": ["card glass"], "description": "Glassmorphism card" },
+  "DolphinCSS Component - Card Outlined": { "prefix": "card-outlined", "body": ["card outlined"], "description": "Bordered modern AI card" },
+
+  "DolphinCSS Component - Form Floating Label": { 
+    "prefix": "form-floating", 
+    "body": [
+      "<div className=\"floatinglabel w-full\">",
+      "  <input type=\"text\" id=\"$1\" className=\"floatinglabel-input w-full\" placeholder=\" \" />",
+      "  <label htmlFor=\"$1\" className=\"floatinglabel-label\">$2</label>",
+      "</div>"
+    ], 
+    "description": "Input with animated floating label" 
+  },
+  "DolphinCSS Component - Form Standard Label": { 
+    "prefix": "form-standard", 
+    "body": [
+      "<div className=\"standardlabel w-full\">",
+      "  <input type=\"text\" id=\"$1\" className=\"standardlabel-input w-full\" placeholder=\" \" />",
+      "  <label htmlFor=\"$1\" className=\"standardlabel-label\">$2</label>",
+      "</div>"
+    ], 
+    "description": "Input with minimalist bottom border" 
+  },
+  "DolphinCSS Component - Form Icon Left": { 
+    "prefix": "form-icon-left", 
+    "body": [
+      "<div className=\"floatinglabel input-icon-left w-full\">",
+      "  <Icon className=\"icon-left text-muted\" />",
+      "  <input type=\"text\" id=\"$1\" className=\"floatinglabel-input w-full\" placeholder=\" \" />",
+      "  <label htmlFor=\"$1\" className=\"floatinglabel-label\">$2</label>",
+      "</div>"
+    ], 
+    "description": "Floating label input with left icon" 
+  }
+}

package/vite-plugin.js

@@ -0,0 +1,85 @@
+import fs from 'fs';
+import path from 'path';
+import components from './scripts/components.js';
+
+export default function dolphincssPlugin() {
+  return {
+    name: 'vite-plugin-dolphincss',
+    enforce: 'pre',
+    
+    // transform hook runs for every file processed by Vite
+    transform(code, id) {
+      // Only process our target files
+      const ext = path.extname(id);
+      if (!['.jsx', '.tsx', '.js', '.html'].includes(ext) || id.includes('node_modules')) {
+        return null;
+      }
+
+      // We read the original file directly to avoid writing Vite's injected boilerplate back to disk
+      let originalCode;
+      try {
+        originalCode = fs.readFileSync(id, 'utf8');
+      } catch (err) {
+        return null;
+      }
+
+      let modified = false;
+      let newOriginalCode = originalCode;
+
+      for (const [marker, replacement] of Object.entries(components)) {
+        const cases = [
+          `<div className="${marker}"></div>`,
+          `<div class="${marker}"></div>`,
+          `<div className="${marker}" />`,
+          `<div class="${marker}" />`,
+          `<div className='${marker}'></div>`,
+          `<div class='${marker}'></div>`
+        ];
+
+        for (const pattern of cases) {
+          if (newOriginalCode.includes(pattern)) {
+            newOriginalCode = newOriginalCode.split(pattern).join(replacement);
+            modified = true;
+            console.log(`\n✨ DolphinCSS: Injected '${marker}' into ${path.basename(id)}`);
+          }
+        }
+      }
+
+      if (modified) {
+        // Write the clean replaced code back to the file system so the user sees it
+        setTimeout(() => {
+          try {
+            fs.writeFileSync(id, newOriginalCode, 'utf8');
+          } catch (err) {
+            console.error(`❌ DolphinCSS: Error writing to ${id}`, err);
+          }
+        }, 0);
+        
+        // Also apply the replacement to the current transform stream
+        let newCode = code;
+        for (const [marker, replacement] of Object.entries(components)) {
+          const cases = [
+            `<div className="${marker}"></div>`,
+            `<div class="${marker}"></div>`,
+            `<div className="${marker}" />`,
+            `<div class="${marker}" />`,
+            `<div className='${marker}'></div>`,
+            `<div class='${marker}'></div>`
+          ];
+          for (const pattern of cases) {
+            if (newCode.includes(pattern)) {
+              newCode = newCode.split(pattern).join(replacement);
+            }
+          }
+        }
+        
+        return {
+          code: newCode,
+          map: null
+        };
+      }
+
+      return null;
+    }
+  };
+}