@africode/core 5.0.0

package/components/loader.js

@@ -0,0 +1,80 @@
+/**
+ * AfriCode Loading Spinner Component
+ * 
+ * Cultural loading indicators using spinning Adinkra symbols or geometric rotation.
+ * 
+ * @module components/loader
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriLoader extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['size', 'color', 'type'];
+    }
+
+    constructor() {
+        super();
+        this.render();
+    }
+
+    attributeChangedCallback() {
+        this.render();
+    }
+
+    render() {
+        const size = this.getAttribute('size') || '40';
+        const color = this.getAttribute('color') || 'currentColor';
+        const type = this.getAttribute('type') || 'spiral';
+
+        const paths = {
+            // African spiral (growth/life)
+            spiral: `M25,25 m0,-20 a20,20 0 1,1 0,40 a20,20 0 1,1 0,-40 
+               M25,25 m0,-15 a15,15 0 1,0 0,30 a15,15 0 1,0 0,-30`,
+            // Geometric sun/star
+            sun: `M25,5 L25,45 M5,25 L45,25 M11,11 L39,39 M39,11 L11,39`,
+            // Diamond rotation
+            diamond: `M25,5 L45,25 L25,45 L5,25 Z`
+        };
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+          color: ${color};
+        }
+        .loader {
+          width: ${size}px;
+          height: ${size}px;
+          animation: spin 1.5s linear infinite;
+        }
+        svg {
+          width: 100%;
+          height: 100%;
+        }
+        @keyframes spin {
+          100% { transform: rotate(360deg); }
+        }
+        circle {
+          opacity: 0.25;
+        }
+        path, line, rect {
+          opacity: 0.75;
+        }
+      </style>
+      <div class="loader">
+        <svg viewBox="0 0 50 50">
+          ${type === 'spiral'
+                ? `<path d="${paths.spiral}" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" />`
+                : type === 'sun'
+                    ? `<path d="${paths.sun}" stroke="currentColor" stroke-width="4" stroke-linecap="round" />`
+                    : `<path d="${paths.diamond}" fill="none" stroke="currentColor" stroke-width="4" />`
+            }
+        </svg>
+      </div>
+    `;
+    }
+}
+
+registerComponent('af-loader', AfriLoader);
+export default AfriLoader;

package/components/modal.js

@@ -0,0 +1,262 @@
+/**
+ * AfriCode Modal/Dialog Component
+ * 
+ * Accessible modal dialog with backdrop and animations.
+ * Suitable for: Confirmations, Forms, Details view, Alerts
+ * 
+ * @module components/modal
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriModal extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['open', 'theme', 'size', 'aria-label', 'aria-labelledby'];
+    }
+
+    constructor() {
+        super();
+        this.render();
+    }
+
+    connectedCallback() {
+        this._setupListeners();
+    }
+
+    _setupListeners() {
+        // Close on backdrop click
+        this.shadowRoot.querySelector('.backdrop')?.addEventListener('click', (e) => {
+            if (e.target.classList.contains('backdrop')) {
+                this.close();
+            }
+        });
+
+        // Close button
+        this.shadowRoot.querySelector('.close-btn')?.addEventListener('click', () => {
+            this.close();
+        });
+
+        // ESC key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && this.hasAttribute('open')) {
+                this.close();
+            }
+        });
+
+        // Focus trapping
+        this.shadowRoot.addEventListener('keydown', (e) => {
+            if (e.key === 'Tab' && this.hasAttribute('open')) {
+                this._handleTabKey(e);
+            }
+        });
+    }
+
+    _getFocusableElements() {
+        const modal = this.shadowRoot.querySelector('.modal');
+        const focusableSelectors = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+        
+        // Modal internals
+        const shadowFocusables = Array.from(modal?.querySelectorAll(focusableSelectors) || []);
+        
+        // Slotted contents
+        const lightFocusables = Array.from(this.querySelectorAll(focusableSelectors));
+        
+        return [...shadowFocusables, ...lightFocusables];
+    }
+
+    _focusFirstFocusableElement() {
+        const focusableElements = this._getFocusableElements();
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        } else {
+            this.shadowRoot.querySelector('.close-btn')?.focus();
+        }
+    }
+
+    _handleTabKey(e) {
+        const focusableElements = this._getFocusableElements();
+        if (focusableElements.length === 0) {
+            e.preventDefault();
+            return;
+        }
+
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+
+        if (e.shiftKey) {
+            // Shift + Tab
+            if (document.activeElement === firstElement) {
+                e.preventDefault();
+                lastElement.focus();
+            }
+        } else {
+            // Tab
+            if (document.activeElement === lastElement) {
+                e.preventDefault();
+                firstElement.focus();
+            }
+        }
+    }
+
+    open() {
+        this.setAttribute('open', '');
+        document.body.style.overflow = 'hidden';
+        
+        // Focus management
+        this._previousFocus = document.activeElement;
+        this._focusFirstFocusableElement();
+        
+        this.emit('af-open');
+    }
+
+    close() {
+        this.removeAttribute('open');
+        document.body.style.overflow = '';
+        
+        // Restore focus
+        if (this._previousFocus && this._previousFocus.focus) {
+            this._previousFocus.focus();
+        }
+        
+        this.emit('af-close');
+    }
+
+    attributeChangedCallback(name, oldVal, newVal) {
+        this.render();
+        if (name === 'open') {
+            this._setupListeners();
+        }
+    }
+
+    render() {
+        const isOpen = this.hasAttribute('open');
+        const theme = this.getAttribute('theme') || 'tanzania';
+        const size = this.getAttribute('size') || 'md';
+
+        const themes = {
+            tanzania: { accent: '#1EB53A' },
+            maasai: { accent: '#FF0000' },
+            ndebele: { accent: '#4169E1' }
+        };
+        const t = themes[theme] || themes.tanzania;
+
+        const sizes = {
+            sm: '400px',
+            md: '560px',
+            lg: '720px',
+            full: '95vw'
+        };
+
+        const ariaLabel = this.getAttribute('aria-label');
+        const ariaLabelledBy = this.getAttribute('aria-labelledby') || 'modal-title';
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .backdrop {
+          position: fixed;
+          inset: 0;
+          background: rgba(0, 0, 0, 0.5);
+          display: ${isOpen ? 'flex' : 'none'};
+          align-items: center;
+          justify-content: center;
+          z-index: 10000;
+          animation: fadeIn 200ms ease-out;
+          padding: 21px;
+        }
+
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        .modal {
+          background: white;
+          border-radius: 8px;
+          width: 100%;
+          max-width: ${sizes[size] || sizes.md};
+          max-height: 90vh;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          animation: slideUp 300ms ease-out;
+          box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+
+        @keyframes slideUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .modal-header {
+          padding: 13px 21px;
+          border-bottom: 1px solid #eee;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+
+        .modal-header ::slotted(*) {
+          margin: 0;
+          font-size: 18px;
+          font-weight: 600;
+        }
+
+        .close-btn {
+          background: none;
+          border: none;
+          font-size: 24px;
+          cursor: pointer;
+          color: #666;
+          padding: 0;
+          line-height: 1;
+        }
+
+        .close-btn:hover {
+          color: ${t.accent};
+        }
+
+        .modal-body {
+          padding: 21px;
+          overflow-y: auto;
+          flex: 1;
+        }
+
+        .modal-footer {
+          padding: 13px 21px;
+          border-top: 1px solid #eee;
+          display: flex;
+          gap: 8px;
+          justify-content: flex-end;
+        }
+      </style>
+
+      <div class="backdrop">
+        <div class="modal" role="dialog" aria-modal="true" ${ariaLabel ? `aria-label="${ariaLabel}"` : `aria-labelledby="${ariaLabelledBy}"`}>
+          <div class="modal-header">
+            <slot name="header" id="modal-title"></slot>
+            <button class="close-btn" aria-label="Close modal">×</button>
+          </div>
+          <div class="modal-body">
+            <slot></slot>
+          </div>
+          <div class="modal-footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+
+registerComponent('af-modal', AfriModal);
+export default AfriModal;

package/components/motion.js

@@ -0,0 +1,84 @@
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+import { animate } from 'framer-motion/dom';
+
+/**
+ * af-motion
+ * 
+ * A wrapper component that bridges the gap between Web Components 
+ * and Framer Motion's vanilla JS animation engine.
+ * 
+ * Usage:
+ * <af-motion animate='{"y": [20, 0], "opacity": [0, 1]}'>
+ *   <div class="content">...</div>
+ * </af-motion>
+ */
+class MotionComponent extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['animate', 'transition'];
+    }
+
+    connectedCallback() {
+        this.loadStyles();
+        this.render();
+        
+        // Observe slot changes to trigger animations on slotted content
+        const slot = this.shadowRoot.querySelector('slot');
+        if (slot) {
+            slot.addEventListener('slotchange', () => this._runAnimation());
+        }
+    }
+
+    attributeChangedCallback() {
+        if (this.shadowRoot) {
+            this._runAnimation();
+        }
+    }
+
+    _runAnimation() {
+        const slot = this.shadowRoot.querySelector('slot');
+        if (!slot) return;
+        
+        const elements = slot.assignedElements();
+        if (!elements.length) return;
+        
+        const animateAttr = this.getAttribute('animate');
+        const transitionAttr = this.getAttribute('transition');
+
+        if (animateAttr) {
+            try {
+                // e.g. {"x": 100, "opacity": 1}
+                const keyframes = JSON.parse(animateAttr);
+                
+                // e.g. {"type": "spring", "stiffness": 100}
+                const options = transitionAttr ? JSON.parse(transitionAttr) : {
+                    type: "spring",
+                    stiffness: 100,
+                    damping: 15,
+                    mass: 1
+                };
+
+                // Animate all assigned children
+                elements.forEach(el => {
+                    animate(el, keyframes, options);
+                });
+            } catch (e) {
+                console.error('[AfriCode] <af-motion> invalid JSON payload:', e);
+            }
+        }
+    }
+
+    render() {
+        this.shadowRoot.innerHTML = html`
+            <style>
+                :host {
+                    display: block; /* Requires block context for layout stability */
+                    width: 100%;
+                }
+            </style>
+            <slot></slot>
+        `;
+    }
+}
+
+registerComponent('af-motion', MotionComponent);
+export default MotionComponent;

package/components/navbar.js

@@ -0,0 +1,236 @@
+/**
+ * AfriCode Navigation Bar Component
+ * 
+ * Responsive navigation with logo, links, and mobile menu.
+ * Suitable for: All websites and web applications
+ * 
+ * @module components/navbar
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+import { store } from '../core/store.js';
+import { subscribe } from '../core/state.js';
+
+export class AfriNavbar extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['theme', 'logo', 'sticky'];
+  }
+
+  constructor() {
+    super();
+    this._isOpen = false;
+    this._unsubscribe = null;
+    this.render();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Mobile toggle
+    this.shadowRoot.querySelector('.menu-toggle')?.addEventListener('click', () => {
+      this._isOpen = !this._isOpen;
+      const navLinks = this.shadowRoot.querySelector('.nav-links');
+      const toggle = this.shadowRoot.querySelector('.menu-toggle');
+      if (navLinks) {navLinks.classList.toggle('open', this._isOpen);}
+      if (toggle) {
+        toggle.classList.toggle('open', this._isOpen);
+        toggle.setAttribute('aria-expanded', String(this._isOpen));
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    if (this._unsubscribe) {this._unsubscribe();}
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const theme = this.getAttribute('theme') || 'dark';
+    const logo = this.getAttribute('logo') || 'AfriCode';
+    const sticky = this.hasAttribute('sticky');
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          --nav-height: 80px;
+        }
+
+        nav {
+          height: var(--nav-height);
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding-inline: 5%;
+          background: var(--glass-bg);
+          backdrop-filter: blur(12px);
+          -webkit-backdrop-filter: blur(12px);
+          border-bottom: 1px solid var(--glass-border);
+          position: fixed;
+          top: 0;
+          inset-inline: 0;
+          z-index: 1000;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .logo-container {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          text-decoration: none;
+          z-index: 1002;
+        }
+
+        .logo-mark {
+          width: 32px;
+          height: 32px;
+          background: linear-gradient(135deg, var(--afri-green, #1eb53a), var(--afri-gold, #fcd116));
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 900;
+          color: black;
+          font-size: 1rem;
+        }
+
+        .logo-text {
+          font-family: 'Outfit', 'Space Grotesk', sans-serif;
+          font-size: 1.5rem;
+          font-weight: 800;
+          color: var(--text-primary);
+          letter-spacing: -0.02em;
+        }
+
+        .nav-links {
+          display: flex;
+          gap: 32px;
+          align-items: center;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+
+        .nav-links ::slotted(a) {
+          color: var(--text-muted);
+          text-decoration: none;
+          font-size: 0.95rem;
+          font-weight: 500;
+          transition: all 0.2s ease;
+          position: relative;
+          padding: 8px 0;
+        }
+
+        .nav-links ::slotted(a:hover),
+        .nav-links ::slotted(a.active) {
+          color: var(--text-primary);
+        }
+
+        .nav-links ::slotted(a)::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          width: 0;
+          height: 2px;
+          background: var(--afri-gold, #fcd116);
+          transition: all 0.3s ease;
+          transform: translateX(-50%);
+        }
+
+        .nav-links ::slotted(a:hover)::after,
+        .nav-links ::slotted(a.active)::after {
+          width: 100%;
+        }
+
+        /* Mobile Toggle */
+        .menu-toggle {
+          display: none;
+          flex-direction: column;
+          gap: 6px;
+          background: none;
+          border: none;
+          cursor: pointer;
+          z-index: 1002;
+          padding: 8px;
+        }
+
+        .menu-toggle span {
+          width: 24px;
+          height: 2px;
+          background: var(--text-primary);
+          border-radius: 2px;
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        /* Mobile State */
+        .menu-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
+        .menu-toggle.open span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
+        .menu-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
+
+        @media (max-width: 768px) {
+          .menu-toggle {
+            display: flex;
+          }
+
+          .nav-links {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100vh;
+            background: var(--bg-base, #020617);
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 24px;
+            opacity: 0;
+            visibility: hidden;
+            transform: translateY(-20px);
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            z-index: 1001;
+          }
+
+          .nav-links.open {
+            opacity: 1;
+            visibility: visible;
+            transform: translateY(0);
+          }
+
+          .nav-links ::slotted(a) {
+            font-size: 1.5rem;
+            font-weight: 700;
+          }
+        }
+      </style>
+
+      <nav>
+        <a href="/" class="logo-container">
+          <div class="logo-mark">A</div>
+          <span class="logo-text">${logo}</span>
+        </a>
+
+        <button
+          class="menu-toggle"
+          aria-label="Toggle menu"
+          aria-controls="nav-links"
+          aria-expanded="${this._isOpen}"
+        >
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+
+        <div id="nav-links" class="nav-links ${this._isOpen ? 'open' : ''}">
+          <slot></slot>
+        </div>
+      </nav>
+    `;
+  }
+}
+
+registerComponent('af-navbar', AfriNavbar);
+export default AfriNavbar;