dolphincss 1.3.0 → 1.3.2

package/scripts/components.js

@@ -1,195 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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})`);
-}