@howssatoshi/quantumcss 1.4.1 → 1.4.2

package/package.json

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

package/src/defaults.js

@@ -113,6 +113,10 @@ const utilityMaps = {
     'search-container': 'relative block w-full',
     'search-input': 'pl-12 w-full',
     'search-icon': 'absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none z-10 w-5 h-5',
+    'nav-glass': {
+      property: ['background', 'backdrop-filter', '-webkit-backdrop-filter', 'border-bottom', 'width', 'display', 'flex-direction', 'padding', 'position', 'top', 'z-index'],
+      value: ['rgba(255, 255, 255, 0.05)', 'blur(24px)', 'blur(24px)', '1px solid rgba(255, 255, 255, 0.1)', '100%', 'flex', 'column', '0', 'sticky', '0', '1000']
+    },
     'starlight-nav': 'nav-glass w-full sticky top-0 z-[1000]',
     'starlight-search': 'search-container w-full max-w-144',
     'starlight-dashboard': 'dashboard-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8',

package/src/generator.js

@@ -86,6 +86,7 @@ function generateCSS(configPath) {
       const p = parts[currentPart];
       if (breakpoints[p]) { breakpoint = p; }
       else if (p === 'dark') { breakpoint = 'dark'; }
+      else if (p === 'light') { breakpoint = 'light'; }
       else if (['hover', 'focus', 'placeholder', 'group-hover'].includes(p)) { variant = p; }
       else { cls = parts.slice(currentPart).join(':'); break; }
       currentPart++;
@@ -135,7 +136,16 @@ function generateCSS(configPath) {
         if (theme.fontSize[valKey]) { property = ['font-size', 'line-height']; value = [theme.fontSize[valKey], (valKey.includes('xl') || parseInt(valKey) >= 3) ? '1.2' : '1.5']; }
         else { const color = resolveColor(valKey); if (color) { property = 'color'; value = color; } }
       } else if (prefix === 'bg') { const color = resolveColor(valKey); if (color) { property = 'background-color'; value = color; } }
-      else if (prefix === 'z') { property = 'z-index'; value = isNeg ? `-${valKey}` : valKey; }
+      else if (prefix === 'z') { 
+        if (valKey.startsWith('[') && valKey.endsWith(']')) value = valKey.slice(1, -1);
+        else value = isNeg ? `-${valKey}` : valKey;
+        property = 'z-index';
+      }
+      else if (prefix === 'top') {
+        property = 'top';
+        if (valKey.startsWith('[') && valKey.endsWith(']')) value = valKey.slice(1, -1);
+        else value = theme.spacing[valKey] || valKey;
+      }
       else if (prefix === 'aspect') {
         property = ['aspect-ratio', 'width', 'height'];
         let ratio = 'auto';
@@ -186,7 +196,11 @@ function generateCSS(configPath) {
         else if (v.includes('/')) v = `${(parseInt(v.split('/')[0])/parseInt(v.split('/')[1])*100).toFixed(2)}%`;
         else v = theme.spacing[v] || v;
         value = isNeg ? (Array.isArray(v) ? v.map(x => `-${x}`) : `-${v}`) : v;
-      } else if (prefix === 'border') {
+      } else if (prefix === 'shadow') {
+        if (theme.shadows[valKey]) { property = 'box-shadow'; value = theme.shadows[valKey]; }
+        else if (valKey === '') { property = 'box-shadow'; value = theme.shadows.md || '0 4px 6px -1px rgb(0 0 0 / 0.1)'; }
+      }
+      else if (prefix === 'border') {
         const color = resolveColor(valKey);
         if (color) { property = 'border-color'; value = color; }
         else if (['l', 'r', 't', 'b'].includes(cParts[1])) {
@@ -225,11 +239,19 @@ function generateCSS(configPath) {
       let selector = customSelector || `.${escapedFull}`;
       if (variant) { if (variant === 'group-hover') selector = `.group:hover ${selector}`; else selector += `:${variant}`}
       
-      const block = `${selector} {
+      if (breakpoint === 'light') {
+        const block = `body.light-mode ${selector} {
 ${rules.join('\n')}
 }
 `;
-      if (breakpoint) responsiveUtils[breakpoint].add(block); else utilities.add(block);
+        utilities.add(block);
+      } else {
+        const block = `${selector} {
+${rules.join('\n')}
+}
+`;
+        if (breakpoint) responsiveUtils[breakpoint].add(block); else utilities.add(block);
+      }
     });
   }
 

package/src/starlight.js

@@ -71,6 +71,101 @@ const Starlight = {
         });
       }
     });
+  },
+
+  /**
+   * Initializes dropdown menus.
+   * Toggles '.active' class on '.dropdown' elements when clicked.
+   */
+  initDropdowns() {
+    const dropdowns = document.querySelectorAll('.dropdown');
+    
+    dropdowns.forEach(dropdown => {
+      const toggle = dropdown.querySelector('.dropdown-toggle') || dropdown.querySelector('button') || dropdown.querySelector('a');
+      
+      if (toggle) {
+        toggle.addEventListener('click', (e) => {
+          // If it's a link that points somewhere, let it work normally
+          if (toggle.tagName === 'A' && toggle.getAttribute('href') && toggle.getAttribute('href') !== '#') {
+            return;
+          }
+          
+          e.preventDefault();
+          e.stopPropagation();
+          
+          const isActive = dropdown.classList.contains('active');
+          
+          // Close all other dropdowns
+          document.querySelectorAll('.dropdown.active').forEach(d => {
+            if (d !== dropdown) d.classList.remove('active');
+          });
+          
+          dropdown.classList.toggle('active', !isActive);
+        });
+      }
+    });
+
+    // Close dropdowns when clicking outside
+    document.addEventListener('click', (e) => {
+      if (!e.target.closest('.dropdown')) {
+        document.querySelectorAll('.dropdown.active').forEach(d => {
+          d.classList.remove('active');
+        });
+      }
+    });
+  },
+
+  /**
+   * Initializes accordion components.
+   * Toggles '.active' class on '.accordion-item' when header is clicked.
+   */
+  initAccordions() {
+    const headers = document.querySelectorAll('.accordion-header');
+    
+    headers.forEach(header => {
+      header.addEventListener('click', () => {
+        const item = header.parentElement;
+        const group = item.closest('.accordion-group');
+        const isActive = item.classList.contains('active');
+        
+        // If in a group, close others
+        if (group) {
+          group.querySelectorAll('.accordion-item').forEach(i => i.classList.remove('active'));
+        }
+        
+        item.classList.toggle('active', !isActive);
+      });
+    });
+  },
+
+  /**
+   * Initializes tab components.
+   * Switches '.active' class on buttons and panels.
+   */
+  initTabs() {
+    const tabLists = document.querySelectorAll('.tab-list');
+    
+    tabLists.forEach(list => {
+      const buttons = list.querySelectorAll('.tab-button');
+      const container = list.parentElement;
+      
+      buttons.forEach(button => {
+        button.addEventListener('click', () => {
+          const targetId = button.getAttribute('data-tab');
+          if (!targetId) return;
+          
+          // Update buttons
+          buttons.forEach(btn => btn.classList.remove('active'));
+          button.classList.add('active');
+          
+          // Update panels
+          const panels = container.querySelectorAll('.tab-panel');
+          panels.forEach(panel => {
+            panel.classList.toggle('active', panel.id === targetId);
+          });
+        });
+      });
+    });
   }
 };
 
@@ -82,5 +177,8 @@ if (typeof window !== 'undefined') {
       Starlight.initStars();
     }
     Starlight.initNavigation();
+    Starlight.initDropdowns();
+    Starlight.initAccordions();
+    Starlight.initTabs();
   });
 }

package/src/styles/quantum-base.css

@@ -1,7 +1,7 @@
 /*!
  * QuantumCSS + Starlight UI
  * Advanced utility-first framework with ethereal cosmic aesthetics
- * Version: 1.4.0
+ * Version: 1.4.2
  * Features: Modern CSS, JIT Engine, Starlight Components, Dark Mode
  */
 
@@ -350,8 +350,8 @@ textarea {
 .bg-warning { background-color: var(--color-warning); }
 .bg-error { background-color: var(--color-error); }
 .bg-neutral { background-color: var(--color-neutral); }
-.bg-white { background-color: #ffffff; }
-.bg-black { background-color: #000000; }
+.bg-white { background-color: #ffffff; color: #0f172a; }
+.bg-black { background-color: #000000; color: #ffffff; }
 
 /* Border Utilities */
 .border-0 { border-width: 0px; }

package/src/styles/quantum-components.css

@@ -158,12 +158,18 @@ body.light-mode .btn-secondary {
 /* Card Component */
 .card {
   background-color: white;
+  color: #1e293b;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   overflow: hidden;
   transition: all var(--duration-200) var(--ease-in-out);
 }
 
+body.light-mode .card {
+  background-color: white;
+  color: #1e293b;
+}
+
 .card:hover {
   box-shadow: var(--shadow-lg);
   transform: translateY(-2px);
@@ -182,6 +188,12 @@ body.light-mode .btn-secondary {
   padding: var(--space-6);
   border-top: 1px solid #e5e7eb;
   background-color: #f9fafb;
+  color: #1e293b;
+}
+
+body.light-mode .card-footer {
+  background-color: #f9fafb;
+  color: #1e293b;
 }
 
 /* Input Component */
@@ -192,10 +204,16 @@ body.light-mode .btn-secondary {
   border: 1px solid #d1d5db;
   border-radius: var(--radius-md);
   background-color: white;
+  color: #1e293b;
   font-size: 1rem;
   transition: all var(--duration-150) var(--ease-in-out);
 }
 
+body.light-mode .input {
+  background-color: white;
+  color: #1e293b;
+}
+
 textarea.input {
   min-height: 100px;
 }
@@ -237,6 +255,11 @@ input[type="date"]::-webkit-calendar-picker-indicator {
   cursor: not-allowed;
 }
 
+body.light-mode .input:disabled {
+  background-color: #f3f4f6;
+  color: #6b7280;
+}
+
 .input-error {
   border-color: var(--color-error);
 }
@@ -366,6 +389,7 @@ body.light-mode .badge-error {
 
 .modal-content {
   background-color: white;
+  color: #1e293b;
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-2xl);
   max-width: 90vw;
@@ -373,6 +397,11 @@ body.light-mode .badge-error {
   overflow-y: auto;
 }
 
+body.light-mode .modal-content {
+  background-color: white;
+  color: #1e293b;
+}
+
 /* Loading Spinner */
 .spinner {
   display: inline-block;
@@ -445,6 +474,7 @@ body.light-mode .skeleton {
   top: 100%;
   left: 0;
   background-color: white;
+  color: #1e293b;
   border: 1px solid #e5e7eb;
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
@@ -456,6 +486,11 @@ body.light-mode .skeleton {
   transition: all var(--duration-150) var(--ease-in-out);
 }
 
+body.light-mode .dropdown-content {
+  background-color: white;
+  color: #1e293b;
+}
+
 .dropdown.active .dropdown-content {
   opacity: 1;
   visibility: visible;
@@ -470,11 +505,22 @@ body.light-mode .skeleton {
   background: none;
   border: none;
   cursor: pointer;
+  color: #1e293b;
   transition: background-color var(--duration-150) var(--ease-in-out);
 }
 
 .dropdown-item:hover {
   background-color: #f3f4f6;
+  color: #1e293b;
+}
+
+body.light-mode .dropdown-item {
+  color: #1e293b;
+}
+
+body.light-mode .dropdown-item:hover {
+  background-color: #f3f4f6;
+  color: #1e293b;
 }
 
 /* Accordion Component */
@@ -488,6 +534,7 @@ body.light-mode .skeleton {
 .accordion-header {
   padding: var(--space-4);
   background-color: #f9fafb;
+  color: #1e293b;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
@@ -497,16 +544,33 @@ body.light-mode .skeleton {
 
 .accordion-header:hover {
   background-color: #f3f4f6;
+  color: #1e293b;
 }
 
 .accordion-content {
   padding: var(--space-4);
   background-color: white;
+  color: #1e293b;
   max-height: 0;
   overflow: hidden;
   transition: max-height var(--duration-300) var(--ease-in-out);
 }
 
+body.light-mode .accordion-header {
+  background-color: #f9fafb;
+  color: #1e293b;
+}
+
+body.light-mode .accordion-header:hover {
+  background-color: #f3f4f6;
+  color: #1e293b;
+}
+
+body.light-mode .accordion-content {
+  background-color: white;
+  color: #1e293b;
+}
+
 .accordion-item.active .accordion-content {
   max-height: 500px;
 }
@@ -522,23 +586,44 @@ body.light-mode .skeleton {
 /* Tab Component */
 .tab-list {
   display: flex;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .tab-button {
-  padding: var(--space-2) var(--space-4);
+  padding: var(--space-3) var(--space-4);
   background: none;
   border: none;
   cursor: pointer;
   border-bottom: 2px solid transparent;
+  color: var(--text-secondary);
+  font-weight: 500;
   transition: all var(--duration-150) var(--ease-in-out);
 }
 
 .tab-button:hover {
-  background-color: #f3f4f6;
+  background-color: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
 }
 
 .tab-button.active {
+  border-bottom-color: var(--color-starlight-blue);
+  color: var(--color-starlight-blue);
+}
+
+body.light-mode .tab-list {
+  border-bottom-color: #e2e8f0;
+}
+
+body.light-mode .tab-button {
+  color: #64748b;
+}
+
+body.light-mode .tab-button:hover {
+  background-color: #f1f5f9;
+  color: #0f172a;
+}
+
+body.light-mode .tab-button.active {
   border-bottom-color: var(--color-primary);
   color: var(--color-primary);
 }
@@ -657,4 +742,80 @@ body.light-mode .skeleton {
 @keyframes slideDown {
   from { transform: translateY(-20px); opacity: 0; }
   to { transform: translateY(0); opacity: 1; }
+}
+
+/* Table Component */
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table-wrapper::-webkit-scrollbar {
+  height: 8px;
+}
+
+.table-wrapper::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb {
+  background: var(--color-starlight-blue, #3b82f6);
+  border-radius: 4px;
+}
+
+body.light-mode .table-wrapper::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  text-align: left;
+  color: var(--text-primary);
+}
+
+.table th {
+  padding: var(--space-3) var(--space-4);
+  font-weight: 600;
+  background-color: rgba(255, 255, 255, 0.05);
+  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+
+.table td {
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  color: var(--text-secondary);
+}
+
+.table tbody tr:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+/* Light Mode Table Styles */
+body.light-mode .table th {
+  background-color: #f8fafc;
+  border-bottom-color: #e2e8f0;
+  color: #0f172a;
+}
+
+body.light-mode .table td {
+  border-bottom-color: #e2e8f0;
+  color: #334155;
+}
+
+body.light-mode .table tbody tr:hover {
+  background-color: #f1f5f9;
+}
+
+/* Overflow Utility */
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
 }