dolphincss 1.2.9 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dolphincss",
-  "version": "1.2.9",
+  "version": "1.3.1",
   "type": "module",
   "description": "DolphinCSS - World-class TailwindCSS + React component library",
   "main": "dolphin-css.css",

package/scripts/components.js

@@ -31,6 +31,68 @@ export default {
       Submit Data
     </button>
   </form>
+</div>
+  `.trim(),
+  "dolphin-form-floating": `
+<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-float" 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-float" 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-float" 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-float" 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>
+
+    <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-form-standard": `
+<div className="card p-6 lg:p-10 border border-border rounded-2xl bg-surface-alt shadow-lg">
+  <h3 className="text-2xl font-bold text-text mb-2">Welcome Back</h3>
+  <p className="text-text-muted text-sm mb-8">Please enter your details to sign in.</p>
+  <form className="flex-col-left w-full gap-8">
+    <div className="w-full mt-2">
+      <div className="standardlabel w-full">
+        <input type="email" id="email-std" className="standardlabel-input lg w-full text-text placeholder:text-transparent bg-transparent" placeholder=" " />
+        <label htmlFor="email-std" className="standardlabel-label text-text-muted font-medium bg-transparent! left-0! px-0!">Email Address</label>
+      </div>
+    </div>
+    
+    <div className="w-full">
+      <div className="standardlabel w-full">
+        <input type="password" id="password-std" className="standardlabel-input lg w-full text-text placeholder:text-transparent bg-transparent" placeholder=" " />
+        <label htmlFor="password-std" className="standardlabel-label text-text-muted font-medium bg-transparent! left-0! px-0!">Password</label>
+      </div>
+    </div>
+    
+    <div className="flex-between w-full">
+      <label className="radio-item flex-left gap-2 cursor-pointer">
+        <input type="checkbox" className="accent-primary-500 w-4 h-4 rounded border-border" />
+        <span className="text-sm font-medium text-text-muted">Remember me</span>
+      </label>
+      <a href="#" className="text-sm font-bold text-primary-500 hover:underline">Forgot password?</a>
+    </div>
+
+    <button type="button" className="filled primary-500 w-full py-3.5 rounded-xl text-white font-bold hover:shadow-xl hover:-translate-y-0.5 transition-all mt-2 glow">
+      Sign In
+    </button>
+  </form>
 </div>
   `.trim(),
   "dolphin-table": `
@@ -190,6 +252,137 @@ export default {
   <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(),
+  "dolphin-header": `
+<nav className="glass w-full py-4 px-6 md:px-8 border-b border-border 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-text tracking-tight">Dolphin</span>
+  </div>
+  <div className="hidden md:flex gap-6">
+    <a href="#" className="text-text-muted hover:text-primary-500 font-medium transition-colors">Home</a>
+    <a href="#" className="text-text-muted hover:text-primary-500 font-medium transition-colors">Features</a>
+    <a href="#" className="text-text-muted hover:text-primary-500 font-medium transition-colors">Pricing</a>
+    <a href="#" className="text-text-muted hover:text-primary-500 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 border-border text-text hover:bg-surface">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-footer": `
+<footer className="w-full bg-surface-dark py-12 px-6 border-t border-border mt-auto">
+  <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
+    <div className="col-span-1 md:col-span-2">
+      <div className="flex-left gap-2 mb-4">
+        <div className="circle sm filled primary-500 text-white font-bold flex-center glow">🐬</div>
+        <span className="text-2xl font-bold text-text-light tracking-tight">DolphinCSS</span>
+      </div>
+      <p className="text-text-muted max-w-sm mb-6 leading-relaxed">
+        The next-generation UI library that combines the magic of auto-generation with breathtaking aesthetics.
+      </p>
+      <div className="flex-left gap-4">
+        <button className="circle sm bg-white/5 hover:bg-primary-500 hover:text-white transition-all text-text-muted border border-border">𝕏</button>
+        <button className="circle sm bg-white/5 hover:bg-primary-500 hover:text-white transition-all text-text-muted border border-border">in</button>
+        <button className="circle sm bg-white/5 hover:bg-primary-500 hover:text-white transition-all text-text-muted border border-border">GH</button>
+      </div>
+    </div>
+    
+    <div>
+      <h4 className="font-bold text-lg mb-4 text-text-light">Resources</h4>
+      <ul className="flex-col-left gap-3 text-text-muted">
+        <li><a href="#" className="hover:text-primary-500 transition-colors">Documentation</a></li>
+        <li><a href="#" className="hover:text-primary-500 transition-colors">Components</a></li>
+        <li><a href="#" className="hover:text-primary-500 transition-colors">Themes</a></li>
+        <li><a href="#" className="hover:text-primary-500 transition-colors">Showcase</a></li>
+      </ul>
+    </div>
+    
+    <div>
+      <h4 className="font-bold text-lg mb-4 text-text-light">Legal</h4>
+      <ul className="flex-col-left gap-3 text-text-muted">
+        <li><a href="#" className="hover:text-primary-500 transition-colors">Privacy Policy</a></li>
+        <li><a href="#" className="hover:text-primary-500 transition-colors">Terms of Service</a></li>
+        <li><a href="#" className="hover:text-primary-500 transition-colors">License</a></li>
+      </ul>
+    </div>
+  </div>
+  
+  <div className="max-w-7xl mx-auto mt-12 pt-6 border-t border-border/20 flex-between flex-wrap gap-4 text-sm text-text-muted">
+    <p>© 2026 DolphinCSS. All rights reserved.</p>
+    <p className="flex-center gap-1">Made with <span className="text-danger-500 animate-pulse">❤️</span> in Nepal</p>
+  </div>
+</footer>
+  `.trim(),
+  "dolphin-grid": `
+<div className="w-full">
+  <div className="flex-between mb-8">
+    <div>
+      <h2 className="text-2xl font-bold text-text mb-1">Featured Collections</h2>
+      <p className="text-text-muted text-sm">Discover our magical products and items.</p>
+    </div>
+    <button className="outlined plain text-sm py-2 px-4 rounded-lg flex-center gap-2 border-border text-text hover:bg-surface transition-colors cursor-pointer">
+      View All <ChevronRight size={16} />
+    </button>
+  </div>
+  
+  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+    {/* Product Card 1 */}
+    <div className="card glass p-4 rounded-2xl group hover:-translate-y-1 transition-all duration-300">
+      <div className="w-full aspect-[4/3] bg-surface-dark rounded-xl mb-4 overflow-hidden relative">
+        <div className="absolute top-2 right-2 badge primary sm z-10 shadow-lg">New</div>
+        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500&q=80" alt="Product" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
+      </div>
+      <h3 className="font-bold text-text mb-1">Premium Headphones</h3>
+      <p className="text-text-muted text-sm mb-4 line-clamp-2">High fidelity audio with magical active noise cancellation.</p>
+      <div className="flex-between">
+        <span className="text-lg font-bold text-primary-500">$299.00</span>
+        <button className="circle sm filled primary-500 text-white glow cursor-pointer hover:scale-110 transition-transform"><ShoppingCart size={16} /></button>
+      </div>
+    </div>
+    
+    {/* Product Card 2 */}
+    <div className="card glass p-4 rounded-2xl group hover:-translate-y-1 transition-all duration-300">
+      <div className="w-full aspect-[4/3] bg-surface-dark rounded-xl mb-4 overflow-hidden relative">
+        <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500&q=80" alt="Product" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
+      </div>
+      <h3 className="font-bold text-text mb-1">Smart Watch Pro</h3>
+      <p className="text-text-muted text-sm mb-4 line-clamp-2">Track your fitness with the ultimate smart companion.</p>
+      <div className="flex-between">
+        <span className="text-lg font-bold text-primary-500">$199.00</span>
+        <button className="circle sm filled primary-500 text-white glow cursor-pointer hover:scale-110 transition-transform"><ShoppingCart size={16} /></button>
+      </div>
+    </div>
+    
+    {/* Product Card 3 */}
+    <div className="card glass p-4 rounded-2xl group hover:-translate-y-1 transition-all duration-300">
+      <div className="w-full aspect-[4/3] bg-surface-dark rounded-xl mb-4 overflow-hidden relative">
+        <div className="absolute top-2 right-2 badge danger sm z-10 shadow-lg">-20%</div>
+        <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=500&q=80" alt="Product" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
+      </div>
+      <h3 className="font-bold text-text mb-1">Polaroid Camera</h3>
+      <p className="text-text-muted text-sm mb-4 line-clamp-2">Capture your magical moments instantly with retro style.</p>
+      <div className="flex-between">
+        <span className="text-lg font-bold text-primary-500">$89.00</span>
+        <button className="circle sm filled primary-500 text-white glow cursor-pointer hover:scale-110 transition-transform"><ShoppingCart size={16} /></button>
+      </div>
+    </div>
+    
+    {/* Product Card 4 */}
+    <div className="card glass p-4 rounded-2xl group hover:-translate-y-1 transition-all duration-300">
+      <div className="w-full aspect-[4/3] bg-surface-dark rounded-xl mb-4 overflow-hidden relative">
+        <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=500&q=80" alt="Product" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
+      </div>
+      <h3 className="font-bold text-text mb-1">Neon Kicks</h3>
+      <p className="text-text-muted text-sm mb-4 line-clamp-2">Step into the future with glowing soles and comfort.</p>
+      <div className="flex-between">
+        <span className="text-lg font-bold text-primary-500">$120.00</span>
+        <button className="circle sm filled primary-500 text-white glow cursor-pointer hover:scale-110 transition-transform"><ShoppingCart size={16} /></button>
+      </div>
+    </div>
+  </div>
 </div>
   `.trim()
 };

package/vite-plugin.js

@@ -27,14 +27,16 @@ export default function dolphincssPlugin() {
       let newOriginalCode = originalCode;
 
       for (const [marker, replacement] of Object.entries(components)) {
-        // Regex matches <div className="marker"></div> with optional spaces/newlines inside, or self-closing <div className="marker" />
+        // Regex to match <div className="marker"></div> with any spacing/newlines inside
+        // Using [\"'] instead of capture groups to simplify and avoid backreference issues
         const regex = new RegExp(
-          `<div\\s+class(?:Name)?=(["'])${marker}\\1\\s*>\\s*</div>|<div\\s+class(?:Name)?=(["'])${marker}\\2\\s*/>`,
+          `<div\\s+class(?:Name)?=[\"']${marker}[\"']\\s*>\\s*</div>|<div\\s+class(?:Name)?=[\"']${marker}[\"']\\s*/>`,
           'g'
         );
 
         if (regex.test(newOriginalCode)) {
-          newOriginalCode = newOriginalCode.replace(regex, replacement);
+          // IMPORTANT: Use () => replacement to avoid $1, $2 substitution from things like $120.50
+          newOriginalCode = newOriginalCode.replace(regex, () => replacement);
           modified = true;
           console.log(`\n✨ DolphinCSS: Injected '${marker}' into ${path.basename(id)}`);
         }
@@ -54,11 +56,11 @@ export default function dolphincssPlugin() {
         let newCode = code;
         for (const [marker, replacement] of Object.entries(components)) {
           const regex = new RegExp(
-            `<div\\s+class(?:Name)?=(["'])${marker}\\1\\s*>\\s*</div>|<div\\s+class(?:Name)?=(["'])${marker}\\2\\s*/>`,
+            `<div\\s+class(?:Name)?=[\"']${marker}[\"']\\s*>\\s*</div>|<div\\s+class(?:Name)?=[\"']${marker}[\"']\\s*/>`,
             'g'
           );
           if (regex.test(newCode)) {
-            newCode = newCode.replace(regex, replacement);
+            newCode = newCode.replace(regex, () => replacement);
           }
         }