xaura 1.0.0

package/css/tokens/index.css

@@ -0,0 +1,79 @@
+/* ============================================================
+   CSS CUSTOM PROPERTIES — xaura DESIGN TOKENS
+   ============================================================ */
+:root {
+  /* Core Colors */
+  --xaura-primary:     #6C5CE7;
+  --xaura-energy:      #00E5FF;
+  --xaura-power:       #FF2BD6;
+  --xaura-dark:        #0F172A;
+  --xaura-light:       #F8FAFC;
+
+  /* Extended Palette */
+  --xaura-electric:    #22D3EE;
+  --xaura-violet:      #A78BFA;
+  --xaura-plasma:      #F472B6;
+  --xaura-danger:      #FF4757;
+  --xaura-success:     #00FFB3;
+  --xaura-warning:     #FFD60A;
+
+  /* Surface Layers */
+  --xaura-surface-0:   #0F172A;
+  --xaura-surface-1:   #1E293B;
+  --xaura-surface-2:   #263348;
+  --xaura-surface-3:   #334155;
+  --xaura-surface-4:   #3D4F6B;
+
+  /* Text */
+  --xaura-text:        #F8FAFC;
+  --xaura-text-muted:  #94A3B8;
+  --xaura-text-dim:    #64748B;
+
+  /* Gradients */
+  --xaura-gradient-energy:  linear-gradient(135deg, #6C5CE7, #00E5FF);
+  --xaura-gradient-plasma:  linear-gradient(135deg, #FF2BD6, #6C5CE7);
+  --xaura-gradient-cosmic:  linear-gradient(135deg, #FF2BD6, #6C5CE7, #00E5FF);
+  --xaura-gradient-neon:    linear-gradient(135deg, #22D3EE, #A78BFA);
+
+  /* Glow Effects */
+  --xaura-glow-sm:     0 0 8px var(--xaura-energy), 0 0 16px rgba(0,229,255,0.3);
+  --xaura-glow-md:     0 0 12px var(--xaura-energy), 0 0 24px rgba(0,229,255,0.4), 0 0 48px rgba(0,229,255,0.15);
+  --xaura-glow-lg:     0 0 20px var(--xaura-energy), 0 0 40px rgba(0,229,255,0.4), 0 0 80px rgba(0,229,255,0.2);
+  --xaura-glow-primary:0 0 12px var(--xaura-primary), 0 0 24px rgba(108,92,231,0.4);
+  --xaura-glow-power:  0 0 12px var(--xaura-power), 0 0 24px rgba(255,43,214,0.4);
+  --xaura-glow-danger: 0 0 12px var(--xaura-danger), 0 0 24px rgba(255,71,87,0.4);
+  --xaura-glow-success:0 0 12px var(--xaura-success), 0 0 24px rgba(0,255,179,0.4);
+
+  /* Borders */
+  --xaura-border:       1px solid rgba(108,92,231,0.25);
+  --xaura-border-glow:  1px solid var(--xaura-energy);
+  --xaura-border-energy:1px solid rgba(0,229,255,0.5);
+
+  /* Typography */
+  --font-ui:     'Inter', system-ui, sans-serif;
+  --font-power:  'Orbitron', monospace;
+
+  /* Spacing */
+  --xaura-space-1:  4px;
+  --xaura-space-2:  8px;
+  --xaura-space-3:  12px;
+  --xaura-space-4:  16px;
+  --xaura-space-5:  20px;
+  --xaura-space-6:  24px;
+  --xaura-space-8:  32px;
+  --xaura-space-10: 40px;
+  --xaura-space-12: 48px;
+  --xaura-space-16: 64px;
+
+  /* Radius */
+  --xaura-radius-sm:  4px;
+  --xaura-radius-md:  8px;
+  --xaura-radius-lg:  12px;
+  --xaura-radius-xl:  16px;
+  --xaura-radius-full:9999px;
+
+  /* Transitions */
+  --xaura-transition:       all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  --xaura-transition-fast:  all 0.15s ease;
+  --xaura-transition-slow:  all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}

package/css/utilities/index.css

@@ -0,0 +1,115 @@
+/* ============================================================
+   ANIMATION UTILITY CLASSES
+   ============================================================ */
+.xaura-pulse       { animation: xaura-pulse-glow 2s ease-in-out infinite; }
+.xaura-float       { animation: xaura-float 3s ease-in-out infinite; }
+.xaura-charge      { animation: xaura-charge 1.5s ease-out forwards; }
+.xaura-fade-in     { animation: xaura-fade-in 0.4s ease forwards; }
+.xaura-slide-in    { animation: xaura-slide-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
+.xaura-slide-up    { animation: xaura-slide-up 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
+.xaura-scale-in    { animation: xaura-scale-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
+
+/* ============================================================
+   GLOW UTILITY CLASSES
+   ============================================================ */
+.xaura-glow          { box-shadow: var(--xaura-glow-sm); }
+.xaura-glow-md       { box-shadow: var(--xaura-glow-md); }
+.xaura-glow-lg       { box-shadow: var(--xaura-glow-lg); }
+.xaura-glow-primary  { box-shadow: var(--xaura-glow-primary); }
+.xaura-glow-power    { box-shadow: var(--xaura-glow-power); }
+.xaura-glow-danger   { box-shadow: var(--xaura-glow-danger); }
+.xaura-glow-success  { box-shadow: var(--xaura-glow-success); }
+
+.xaura-text-glow         { text-shadow: 0 0 10px var(--xaura-energy), 0 0 20px rgba(0,229,255,0.5); }
+.xaura-text-glow-primary { text-shadow: 0 0 10px var(--xaura-primary), 0 0 20px rgba(108,92,231,0.5); }
+.xaura-text-glow-power   { text-shadow: 0 0 10px var(--xaura-power), 0 0 20px rgba(255,43,214,0.5); }
+
+/* ============================================================
+   TYPOGRAPHY
+   ============================================================ */
+.xaura-font-power { font-family: var(--font-power); }
+.xaura-font-ui    { font-family: var(--font-ui); }
+
+.xaura-title-xl {
+  font-family: var(--font-power);
+  font-size: clamp(2rem, 5vw, 4rem);
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  line-height: 1.1;
+}
+.xaura-title-lg {
+  font-family: var(--font-power);
+  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  line-height: 1.2;
+}
+.xaura-title-md {
+  font-family: var(--font-power);
+  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  line-height: 1.3;
+}
+.xaura-title-sm {
+  font-family: var(--font-power);
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+.xaura-text       { font-size: 1rem;    color: var(--xaura-text); }
+.xaura-text-sm    { font-size: 0.875rem; color: var(--xaura-text); }
+.xaura-caption    { font-size: 0.75rem;  color: var(--xaura-text-muted); letter-spacing: 0.05em; }
+.xaura-label      { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--xaura-text-muted); }
+
+.xaura-gradient-text {
+  background: var(--xaura-gradient-energy);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.xaura-gradient-text-plasma {
+  background: var(--xaura-gradient-plasma);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.xaura-gradient-text-cosmic {
+  background: var(--xaura-gradient-cosmic);
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: xaura-gradient-shift 3s linear infinite;
+}
+
+/* ============================================================
+   SURFACE LAYERS
+   ============================================================ */
+.xaura-surface   { background: var(--xaura-surface-1); }
+.xaura-elevated  { background: var(--xaura-surface-2); }
+.xaura-powered   {
+  background: var(--xaura-surface-2);
+  box-shadow: var(--xaura-glow-sm);
+  border: var(--xaura-border-energy);
+}
+
+/* ============================================================
+   COLOR UTILITIES
+   ============================================================ */
+.text-energy   { color: var(--xaura-energy); }
+.text-primary  { color: var(--xaura-primary); }
+.text-power    { color: var(--xaura-power); }
+.text-danger   { color: var(--xaura-danger); }
+.text-success  { color: var(--xaura-success); }
+.text-warning  { color: var(--xaura-warning); }
+.text-muted    { color: var(--xaura-text-muted); }
+.text-dim      { color: var(--xaura-text-dim); }
+
+.bg-energy     { background: var(--xaura-energy); color: var(--xaura-dark); }
+.bg-primary    { background: var(--xaura-primary); }
+.bg-surface-1  { background: var(--xaura-surface-1); }
+.bg-surface-2  { background: var(--xaura-surface-2); }
+.bg-gradient-energy  { background: var(--xaura-gradient-energy); }
+.bg-gradient-plasma  { background: var(--xaura-gradient-plasma); }
+.bg-gradient-cosmic  { background: var(--xaura-gradient-cosmic); }

package/js/core.js

@@ -0,0 +1,388 @@
+/**
+ * xaura UI FRAMEWORK — v1.0.0
+ * JavaScript Core
+ * UI WITH POWER ⚡
+ */
+
+(function (global) {
+  'use strict';
+
+  const xaura = {};
+
+  // ─── UTILS ───────────────────────────────────────────────
+  xaura.$ = (sel, ctx = document) => ctx.querySelector(sel);
+  xaura.$$ = (sel, ctx = document) => [...ctx.querySelectorAll(sel)];
+
+  function on(el, event, handler, opts) {
+    if (!el) return;
+    el.addEventListener(event, handler, opts);
+  }
+
+  // ─── TABS ─────────────────────────────────────────────────
+  xaura.initTabs = function () {
+    xaura.$$('[data-xaura-tabs]').forEach(wrapper => {
+      const buttons = xaura.$$('.xaura-tab-btn', wrapper);
+      const panels  = xaura.$$('.xaura-tab-panel', wrapper);
+
+      buttons.forEach(btn => {
+        on(btn, 'click', () => {
+          const target = btn.dataset.target;
+          buttons.forEach(b => b.classList.remove('active'));
+          panels.forEach(p => p.classList.remove('active'));
+          btn.classList.add('active');
+          const panel = xaura.$('#' + target, wrapper) || xaura.$('[data-tab="' + target + '"]', wrapper);
+          if (panel) panel.classList.add('active');
+        });
+      });
+    });
+  };
+
+  // ─── ACCORDION ────────────────────────────────────────────
+  xaura.initAccordion = function () {
+    xaura.$$('.xaura-accordion-trigger').forEach(trigger => {
+      on(trigger, 'click', () => {
+        const item = trigger.closest('.xaura-accordion-item');
+        const isOpen = item.classList.contains('open');
+
+        // Close all siblings if exclusive
+        const accordion = item.closest('.xaura-accordion');
+        if (accordion && accordion.dataset.exclusive !== 'false') {
+          xaura.$$('.xaura-accordion-item', accordion).forEach(i => i.classList.remove('open'));
+        }
+        item.classList.toggle('open', !isOpen);
+      });
+    });
+  };
+
+  // ─── DRAWER ───────────────────────────────────────────────
+  xaura.initDrawers = function () {
+    xaura.$$('[data-xaura-drawer-open]').forEach(btn => {
+      on(btn, 'click', () => xaura.openDrawer(btn.dataset.xauraDrawerOpen));
+    });
+    xaura.$$('[data-xaura-drawer-close]').forEach(btn => {
+      on(btn, 'click', () => {
+        const overlay = btn.closest('.xaura-drawer-overlay');
+        if (overlay) xaura.closeDrawer(overlay.id);
+      });
+    });
+    xaura.$$('.xaura-drawer-overlay').forEach(overlay => {
+      on(overlay, 'click', e => {
+        if (e.target === overlay) xaura.closeDrawer(overlay.id);
+      });
+    });
+  };
+
+  xaura.openDrawer = function (id) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.classList.add('open');
+    const drawer = xaura.$('.xaura-drawer', el);
+    if (drawer) drawer.classList.add('open');
+    document.body.style.overflow = 'hidden';
+  };
+
+  xaura.closeDrawer = function (id) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.classList.remove('open');
+    const drawer = xaura.$('.xaura-drawer', el);
+    if (drawer) drawer.classList.remove('open');
+    document.body.style.overflow = '';
+  };
+
+  // ─── DROPDOWN ─────────────────────────────────────────────
+  xaura.initDropdowns = function () {
+    xaura.$$('[data-xaura-dropdown]').forEach(trigger => {
+      const dropdown = trigger.closest('.xaura-dropdown');
+      on(trigger, 'click', e => {
+        e.stopPropagation();
+        dropdown.classList.toggle('open');
+      });
+    });
+
+    on(document, 'click', () => {
+      xaura.$$('.xaura-dropdown.open').forEach(d => d.classList.remove('open'));
+    });
+
+    on(document, 'keydown', e => {
+      if (e.key === 'Escape') {
+        xaura.$$('.xaura-dropdown.open').forEach(d => d.classList.remove('open'));
+      }
+    });
+  };
+
+  // ─── COMMAND PALETTE ─────────────────────────────────────
+  xaura.initCommandPalette = function () {
+    const overlay = xaura.$('.xaura-command-overlay');
+    if (!overlay) return;
+
+    const input = xaura.$('.xaura-command-input', overlay);
+    const items = xaura.$$('.xaura-command-item', overlay);
+    let selectedIndex = -1;
+
+    const open = () => { overlay.classList.add('open'); input?.focus(); selectedIndex = -1; };
+    const close = () => overlay.classList.remove('open');
+
+    // Keyboard shortcut
+    on(document, 'keydown', e => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        e.preventDefault();
+        overlay.classList.contains('open') ? close() : open();
+      }
+      if (e.key === 'Escape' && overlay.classList.contains('open')) close();
+
+      if (overlay.classList.contains('open')) {
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          selectedIndex = Math.min(selectedIndex + 1, items.length - 1);
+          updateSelection();
+        }
+        if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          selectedIndex = Math.max(selectedIndex - 1, 0);
+          updateSelection();
+        }
+        if (e.key === 'Enter' && selectedIndex >= 0) {
+          items[selectedIndex]?.click();
+          close();
+        }
+      }
+    });
+
+    function updateSelection() {
+      items.forEach((item, i) => {
+        item.classList.toggle('selected', i === selectedIndex);
+        if (i === selectedIndex) item.scrollIntoView({ block: 'nearest' });
+      });
+    }
+
+    // Filter on input
+    if (input) {
+      on(input, 'input', () => {
+        const query = input.value.toLowerCase();
+        items.forEach(item => {
+          const text = item.textContent.toLowerCase();
+          item.style.display = text.includes(query) ? '' : 'none';
+        });
+        selectedIndex = -1;
+      });
+    }
+
+    // Close on overlay click
+    on(overlay, 'click', e => { if (e.target === overlay) close(); });
+
+    // Open button
+    xaura.$$('[data-xaura-command-open]').forEach(btn => on(btn, 'click', open));
+  };
+
+  // ─── TOAST ───────────────────────────────────────────────
+  xaura.toast = function (message, type = 'energy', duration = 4000) {
+    let container = xaura.$('.xaura-toast-container');
+    if (!container) {
+      container = document.createElement('div');
+      container.className = 'xaura-toast-container';
+      document.body.appendChild(container);
+    }
+
+    const icons = { energy: '⚡', success: '✅', danger: '⚠️', warning: '🔔', primary: '🔮' };
+    const colors = {
+      energy: 'var(--xaura-energy)', success: 'var(--xaura-success)',
+      danger: 'var(--xaura-danger)', warning: 'var(--xaura-warning)',
+      primary: 'var(--xaura-primary)'
+    };
+
+    const toast = document.createElement('div');
+    toast.className = 'xaura-toast';
+    toast.style.borderColor = colors[type] || colors.energy;
+    toast.innerHTML = `
+      <span style="font-size:1.1rem">${icons[type] || icons.energy}</span>
+      <span style="flex:1;color:var(--xaura-text)">${message}</span>
+      <button onclick="this.closest('.xaura-toast').remove()" style="background:none;border:none;color:var(--xaura-text-muted);cursor:pointer;font-size:1rem;padding:0;line-height:1">×</button>
+    `;
+    container.appendChild(toast);
+
+    setTimeout(() => {
+      toast.style.animation = 'xaura-fade-in 0.3s ease reverse forwards';
+      setTimeout(() => toast.remove(), 300);
+    }, duration);
+  };
+
+  // ─── ENERGY RING ─────────────────────────────────────────
+  xaura.initEnergyRings = function () {
+    xaura.$$('.xaura-energy-ring').forEach(ring => {
+      const percent = parseFloat(ring.dataset.percent || 75);
+      const fill = xaura.$('.xaura-energy-ring-fill', ring);
+      const size = ring.dataset.size || 100;
+      const r = 45;
+      const circ = 2 * Math.PI * r;
+      if (fill) {
+        fill.setAttribute('stroke-dasharray', circ);
+        fill.setAttribute('stroke-dashoffset', circ);
+        // Animate
+        setTimeout(() => {
+          fill.setAttribute('stroke-dashoffset', circ * (1 - percent / 100));
+        }, 300);
+      }
+    });
+  };
+
+  // ─── POWER METER ─────────────────────────────────────────
+  xaura.initPowerMeters = function () {
+    xaura.$$('.xaura-power-meter').forEach(meter => {
+      const fill = xaura.$('.xaura-power-meter-fill', meter);
+      const percent = parseFloat(meter.dataset.percent || 75);
+      if (fill) {
+        setTimeout(() => { fill.style.width = percent + '%'; }, 300);
+      }
+    });
+  };
+
+  // ─── PROGRESS BARS ──────────────────────────────────────
+  xaura.initProgress = function () {
+    xaura.$$('.xaura-progress-bar[data-width]').forEach(bar => {
+      setTimeout(() => { bar.style.width = bar.dataset.width; }, 200);
+    });
+  };
+
+  // ─── RATING ──────────────────────────────────────────────
+  xaura.initRating = function () {
+    xaura.$$('.xaura-rating').forEach(widget => {
+      const stars = xaura.$$('.xaura-rating-star', widget);
+      let currentRating = parseInt(widget.dataset.rating || 0);
+
+      const setActive = n => {
+        stars.forEach((s, i) => s.classList.toggle('active', i < n));
+      };
+
+      setActive(currentRating);
+
+      stars.forEach((star, i) => {
+        on(star, 'mouseenter', () => setActive(i + 1));
+        on(star, 'mouseleave', () => setActive(currentRating));
+        on(star, 'click', () => {
+          currentRating = i + 1;
+          widget.dataset.rating = currentRating;
+          setActive(currentRating);
+          widget.dispatchEvent(new CustomEvent('xaura:rating', { detail: { rating: currentRating } }));
+        });
+      });
+    });
+  };
+
+  // ─── COPY BUTTON ─────────────────────────────────────────
+  xaura.initCopyButtons = function () {
+    xaura.$$('.xaura-copy-btn').forEach(btn => {
+      on(btn, 'click', () => {
+        const block = btn.closest('.xaura-code-block');
+        const code = block ? block.textContent.trim().replace('COPY', '').replace('COPIED!', '').trim() : '';
+        navigator.clipboard?.writeText(code).then(() => {
+          btn.textContent = 'COPIED!';
+          btn.style.color = 'var(--xaura-success)';
+          btn.style.borderColor = 'var(--xaura-success)';
+          setTimeout(() => {
+            btn.textContent = 'COPY';
+            btn.style.color = '';
+            btn.style.borderColor = '';
+          }, 2000);
+        });
+      });
+    });
+  };
+
+  // ─── SWITCH TOGGLE ───────────────────────────────────────
+  xaura.initSwitches = function () {
+    xaura.$$('.xaura-switch input').forEach(input => {
+      on(input, 'change', () => {
+        const label = input.closest('.xaura-switch');
+        if (!label) return;
+        label.dispatchEvent(new CustomEvent('xaura:switch', { detail: { checked: input.checked } }));
+      });
+    });
+  };
+
+  // ─── INTERSECTION OBSERVER (animate on scroll) ───────────
+  xaura.initScrollReveal = function () {
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.style.animation = 'xaura-slide-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) both';
+          observer.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.1 });
+
+    xaura.$$('[data-xaura-reveal]').forEach(el => {
+      el.style.opacity = '0';
+      observer.observe(el);
+    });
+  };
+
+  // ─── GLOW RIPPLE EFFECT ─────────────────────────────────
+  xaura.initRipple = function () {
+    xaura.$$('.xaura-btn:not(.no-ripple)').forEach(btn => {
+      on(btn, 'click', e => {
+        const rect = btn.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+
+        const ripple = document.createElement('span');
+        const size = Math.max(rect.width, rect.height) * 2;
+        ripple.style.cssText = `
+          position:absolute; width:${size}px; height:${size}px;
+          left:${x - size/2}px; top:${y - size/2}px;
+          border-radius:50%; background:rgba(255,255,255,0.15);
+          transform:scale(0); animation:xaura-wave 0.6s ease-out forwards;
+          pointer-events:none;
+        `;
+
+        const pos = getComputedStyle(btn).position;
+        if (pos === 'static') btn.style.position = 'relative';
+        btn.appendChild(ripple);
+        setTimeout(() => ripple.remove(), 700);
+      });
+    });
+  };
+
+  // ─── NAVBAR SCROLL ───────────────────────────────────────
+  xaura.initNavbar = function () {
+    const navbar = xaura.$('.xaura-navbar');
+    if (!navbar) return;
+    on(window, 'scroll', () => {
+      navbar.style.borderBottomColor = window.scrollY > 20
+        ? 'rgba(0,229,255,0.25)'
+        : 'rgba(108,92,231,0.2)';
+      navbar.style.boxShadow = window.scrollY > 20
+        ? '0 4px 24px rgba(0,0,0,0.3)'
+        : '';
+    });
+  };
+
+  // ─── INIT ALL (excluding modal and tooltip) ──────────────
+  xaura.init = function () {
+    xaura.initTabs();
+    xaura.initAccordion();
+    xaura.initDrawers();
+    xaura.initDropdowns();
+    xaura.initCommandPalette();
+    xaura.initEnergyRings();
+    xaura.initPowerMeters();
+    xaura.initProgress();
+    xaura.initRating();
+    xaura.initCopyButtons();
+    xaura.initSwitches();
+    xaura.initScrollReveal();
+    xaura.initRipple();
+    xaura.initNavbar();
+    // Modal and Tooltip are initialized separately via their own files
+    console.log('%c⚡ xaura UI v1.0.0 — UI WITH POWER', 'font-family:monospace;color:#00E5FF;font-size:14px;font-weight:bold;');
+  };
+
+  // Auto-init on DOM ready (only if not prevented)
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', xaura.init);
+  } else {
+    xaura.init();
+  }
+
+  global.xaura = xaura;
+})(window);

package/js/modal.js

@@ -0,0 +1,52 @@
+/**
+ * xaura UI FRAMEWORK — Modal Module
+ */
+
+(function (global) {
+  'use strict';
+
+  const xaura = global.xaura || {};
+
+  // ─── MODAL ────────────────────────────────────────────────
+  xaura.initModals = function () {
+    // Open triggers
+    xaura.$$('[data-xaura-modal-open]').forEach(btn => {
+      xaura.on(btn, 'click', () => {
+        const id = btn.dataset.xauraModalOpen;
+        xaura.openModal(id);
+      });
+    });
+
+    // Close triggers
+    xaura.$$('.xaura-modal-close, [data-xaura-modal-close]').forEach(btn => {
+      xaura.on(btn, 'click', () => {
+        const overlay = btn.closest('.xaura-modal-overlay');
+        if (overlay) xaura.closeModal(overlay.id);
+      });
+    });
+
+    // Click outside
+    xaura.$$('.xaura-modal-overlay').forEach(overlay => {
+      xaura.on(overlay, 'click', e => {
+        if (e.target === overlay) xaura.closeModal(overlay.id);
+      });
+    });
+  };
+
+  xaura.openModal = function (id) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.classList.add('open');
+    document.body.style.overflow = 'hidden';
+  };
+
+  xaura.closeModal = function (id) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.classList.remove('open');
+    document.body.style.overflow = '';
+  };
+
+  // Attach to global
+  global.xaura = xaura;
+})(window);

package/js/tooltip.js

@@ -0,0 +1,27 @@
+/**
+ * xaura UI FRAMEWORK — Tooltip Module
+ */
+
+(function (global) {
+  'use strict';
+
+  const xaura = global.xaura || {};
+
+  // ─── TOOLTIP (keyboard accessible) ───────────────────────
+  xaura.initTooltips = function () {
+    xaura.$$('[data-tooltip]').forEach(el => {
+      const text = el.dataset.tooltip;
+      const wrap = document.createElement('span');
+      wrap.className = 'xaura-tooltip-wrap';
+      el.parentNode.insertBefore(wrap, el);
+      wrap.appendChild(el);
+      const tip = document.createElement('span');
+      tip.className = 'xaura-tooltip';
+      tip.textContent = text;
+      wrap.appendChild(tip);
+    });
+  };
+
+  // Attach to global
+  global.xaura = xaura;
+})(window);

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "xaura",
+  "version": "1.0.0",
+  "description": "xaura UI Framework — UI with Power ⚡",
+  "main": "js/core.js",
+  "style": "css/tokens/index.css",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": ["ui", "framework", "css", "js", "anime", "energy", "glow"],
+  "author": "Imed Rebhi",
+  "license": "MIT"
+}