@howssatoshi/quantumcss 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@howssatoshi/quantumcss",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Advanced utility-first CSS framework with JIT generation and modern components",
   "main": "dist/quantum.min.css",
   "bin": {

package/src/defaults.js

@@ -78,7 +78,7 @@ const utilityMaps = {
   },
   'btn-secondary': {
     property: ['background', 'color', 'border', 'font-weight', 'transition', 'height', 'padding', 'display', 'align-items', 'justify-content', 'border-radius', 'cursor', 'backdrop-filter', '-webkit-backdrop-filter'],
-    value: ['rgba(255, 255, 255, 0.05)', 'inherit', '1px solid rgba(255, 255, 255, 0.15)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.75rem', 'pointer', 'blur(12px)', 'blur(12px)']
+    value: ['rgba(255, 255, 255, 0.05)', '#ffffff', '1px solid rgba(255, 255, 255, 0.15)', '700', 'all 0.2s ease', '3rem', '0 1.5rem', 'inline-flex', 'center', 'center', '0.75rem', 'pointer', 'blur(12px)', 'blur(12px)']
   },
   'input-starlight': {
     property: ['background-color', 'border', 'color', 'border-radius', 'padding', 'appearance', 'transition', 'height'],

package/src/starlight.js

@@ -0,0 +1,49 @@
+/**
+ * Starlight UI - Interactive Helpers
+ * Standardized components for the QuantumCSS framework
+ */
+
+const Starlight = {
+  /**
+   * Initializes a randomized star field in the target container.
+   * @param {string} selector - CSS selector for the container (default: '.starlight-stars')
+   * @param {number} count - Number of stars to generate (default: 150)
+   */
+  initStars(selector = '.starlight-stars', count = 150) {
+    const containers = document.querySelectorAll(selector);
+    
+    containers.forEach(container => {
+      // Clear existing stars if any
+      container.innerHTML = '';
+      
+      for (let i = 0; i < count; i++) {
+        const star = document.createElement('div');
+        star.className = 'star';
+        
+        // Randomize position
+        star.style.left = `${Math.random() * 100}%`;
+        star.style.top = `${Math.random() * 100}%`;
+        
+        // Randomize size (1px to 3px)
+        const size = Math.random() * 2 + 1;
+        star.style.width = `${size}px`;
+        star.style.height = `${size}px`;
+        
+        // Randomize animation duration (2s to 5s)
+        star.style.setProperty('--duration', `${Math.random() * 3 + 2}s`);
+        
+        container.appendChild(star);
+      }
+    });
+  }
+};
+
+// Auto-initialize if the element exists and we're in a browser
+if (typeof window !== 'undefined') {
+  window.Starlight = Starlight;
+  document.addEventListener('DOMContentLoaded', () => {
+    if (document.querySelector('.starlight-stars')) {
+      Starlight.initStars();
+    }
+  });
+}

package/src/styles/quantum-animations.css

@@ -60,6 +60,26 @@
   animation: float-y 6s ease-in-out infinite;
 }
 
+.ani-fade-in {
+  animation: fadeIn 0.3s ease-out forwards;
+}
+
+.ani-slide-up {
+  animation: slideUp 0.3s ease-out forwards;
+}
+
+.ani-slide-down {
+  animation: slideDown 0.3s ease-out forwards;
+}
+
+.ani-scale-in {
+  animation: scaleIn 0.2s ease-out forwards;
+}
+
+.ani-spin {
+  animation: spin 1s linear infinite;
+}
+
 /* Staggered Animations */
 .ani-stagger-1 { animation-delay: 0.1s; }
 .ani-stagger-2 { animation-delay: 0.2s; }
@@ -71,3 +91,52 @@
 .ani-fast { animation-duration: 0.5s !important; }
 .ani-slow { animation-duration: 8s !important; }
 .ani-slower { animation-duration: 15s !important; }
+
+/* Keyframes */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes scaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes ping {
+  75%, 100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}