@africode/core 5.0.0

package/components/table.js

@@ -0,0 +1,181 @@
+/**
+ * AfriCode Data Table Component
+ * 
+ * Sortable, paginated data table with cultural theming.
+ * Suitable for: Finance dashboards, Admin panels, Healthcare records, Inventory
+ * 
+ * @module components/table
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriTable extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['theme', 'striped', 'hoverable'];
+    }
+
+    constructor() {
+        super();
+        this._columns = [];
+        this._data = [];
+        this._sortColumn = null;
+        this._sortDirection = 'asc';
+        this.render();
+    }
+
+    set columns(cols) {
+        this._columns = cols;
+        this.render();
+    }
+
+    set data(rows) {
+        this._data = rows;
+        this.render();
+    }
+
+    attributeChangedCallback() {
+        this.render();
+    }
+
+    _handleSort(column) {
+        if (this._sortColumn === column) {
+            this._sortDirection = this._sortDirection === 'asc' ? 'desc' : 'asc';
+        } else {
+            this._sortColumn = column;
+            this._sortDirection = 'asc';
+        }
+        this.emit('af-sort', { column, direction: this._sortDirection });
+        this.render();
+    }
+
+    _getSortedData() {
+        if (!this._sortColumn) {return this._data;}
+
+        return [...this._data].sort((a, b) => {
+            const aVal = a[this._sortColumn];
+            const bVal = b[this._sortColumn];
+            const modifier = this._sortDirection === 'asc' ? 1 : -1;
+
+            if (typeof aVal === 'number') {
+                return (aVal - bVal) * modifier;
+            }
+            return String(aVal).localeCompare(String(bVal)) * modifier;
+        });
+    }
+
+    render() {
+        const theme = this.getAttribute('theme') || 'tanzania';
+        const striped = this.hasAttribute('striped');
+        const hoverable = this.hasAttribute('hoverable');
+
+        const themes = {
+            tanzania: { header: '#1EB53A', text: '#FFFFFF', accent: '#FCD116' },
+            maasai: { header: '#8B0000', text: '#FFFFFF', accent: '#FF0000' },
+            ndebele: { header: '#4169E1', text: '#FFFFFF', accent: '#FFD700' }
+        };
+        const t = themes[theme] || themes.tanzania;
+        const sortedData = this._getSortedData();
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .table-container {
+          overflow-x: auto;
+          border-radius: 8px;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+
+        table {
+          width: 100%;
+          border-collapse: collapse;
+          background: white;
+        }
+
+        th {
+          background: ${t.header};
+          color: ${t.text};
+          padding: 13px;
+          text-align: left;
+          font-weight: 600;
+          cursor: pointer;
+          user-select: none;
+          white-space: nowrap;
+        }
+
+        th:hover {
+          filter: brightness(1.1);
+        }
+
+        th .sort-icon {
+          margin-left: 5px;
+          opacity: 0.7;
+        }
+
+        td {
+          padding: 13px;
+          border-bottom: 1px solid #eee;
+        }
+
+        ${striped ? `
+          tbody tr:nth-child(even) {
+            background: #f8f9fa;
+          }
+        ` : ''}
+
+        ${hoverable ? `
+          tbody tr:hover {
+            background: ${t.accent}20;
+          }
+        ` : ''}
+
+        .empty-state {
+          text-align: center;
+          padding: 34px;
+          color: #888;
+        }
+      </style>
+
+      <div class="table-container">
+        <table>
+          <thead>
+            <tr>
+              ${this._columns.map(col => `
+                <th data-column="${col.key}">
+                  ${col.label}
+                  <span class="sort-icon">
+                    ${this._sortColumn === col.key ? (this._sortDirection === 'asc' ? '↑' : '↓') : '↕'}
+                  </span>
+                </th>
+              `).join('')}
+            </tr>
+          </thead>
+          <tbody>
+            ${sortedData.length ? sortedData.map(row => `
+              <tr>
+                ${this._columns.map(col => `<td>${row[col.key] ?? ''}</td>`).join('')}
+              </tr>
+            `).join('') : `
+              <tr>
+                <td colspan="${this._columns.length}" class="empty-state">No data available</td>
+              </tr>
+            `}
+          </tbody>
+        </table>
+      </div>
+    `;
+
+        // Add sort listeners
+        this.shadowRoot.querySelectorAll('th').forEach(th => {
+            th.addEventListener('click', () => {
+                this._handleSort(th.dataset.column);
+            });
+        });
+    }
+}
+
+registerComponent('af-table', AfriTable);
+export default AfriTable;

package/components/tabs.js

@@ -0,0 +1,202 @@
+/**
+ * AfriCode Tabs Component
+ * 
+ * Tabbed navigation for organized content sections.
+ * Suitable for: Dashboards, Settings, Product details, Documentation
+ * 
+ * @module components/tabs
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriTabs extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['theme'];
+    }
+
+    constructor() {
+        super();
+        this._activeTab = 0;
+        this.render();
+    }
+
+    connectedCallback() {
+        this._setupTabs();
+        this.addEventListener('keydown', this._handleKeydown.bind(this));
+    }
+
+    _handleKeydown(e) {
+        const tabSlot = this.querySelector('[slot="tabs"]');
+        const tabItems = tabSlot ? Array.from(tabSlot.children) : [];
+        
+        if (tabItems.length === 0) {return;}
+
+        switch (e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                this._activeTab = this._activeTab > 0 ? this._activeTab - 1 : tabItems.length - 1;
+                this.render();
+                this._setupTabs();
+                this._focusActiveTab();
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                this._activeTab = this._activeTab < tabItems.length - 1 ? this._activeTab + 1 : 0;
+                this.render();
+                this._setupTabs();
+                this._focusActiveTab();
+                break;
+            case 'Home':
+                e.preventDefault();
+                this._activeTab = 0;
+                this.render();
+                this._setupTabs();
+                this._focusActiveTab();
+                break;
+            case 'End':
+                e.preventDefault();
+                this._activeTab = tabItems.length - 1;
+                this.render();
+                this._setupTabs();
+                this._focusActiveTab();
+                break;
+        }
+    }
+
+    _focusActiveTab() {
+        const tabs = this.shadowRoot.querySelectorAll('.tab-button');
+        if (tabs[this._activeTab]) {
+            tabs[this._activeTab].focus();
+        }
+    }
+
+    _setupTabs() {
+        const tabs = this.shadowRoot.querySelectorAll('.tab-button');
+        tabs.forEach((tab, index) => {
+            tab.addEventListener('click', () => {
+                this._activeTab = index;
+                this.render();
+                this._setupTabs();
+                this.emit('af-tab-change', { index, tab: tab.textContent });
+            });
+        });
+    }
+
+    attributeChangedCallback() {
+        this.render();
+        this._setupTabs();
+    }
+
+    render() {
+        const theme = this.getAttribute('theme') || 'tanzania';
+        const tabSlot = this.querySelector('[slot="tabs"]');
+        const tabItems = tabSlot ? Array.from(tabSlot.children) : [];
+
+        const themes = {
+            tanzania: { active: '#1EB53A', text: '#FFFFFF' },
+            maasai: { active: '#FF0000', text: '#FFFFFF' },
+            ndebele: { active: '#4169E1', text: '#FFFFFF' }
+        };
+        const t = themes[theme] || themes.tanzania;
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .tabs-container {
+          border-radius: 8px;
+          overflow: hidden;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+
+        .tab-list {
+          display: flex;
+          background: #f5f5f5;
+          border-bottom: 2px solid #eee;
+          overflow-x: auto;
+        }
+
+        .tab-button {
+          padding: 13px 21px;
+          background: none;
+          border: none;
+          font-family: inherit;
+          font-size: 14px;
+          font-weight: 500;
+          color: #666;
+          cursor: pointer;
+          white-space: nowrap;
+          transition: all 200ms ease;
+          border-bottom: 2px solid transparent;
+          margin-bottom: -2px;
+        }
+
+        .tab-button:hover {
+          color: ${t.active};
+          background: rgba(0,0,0,0.03);
+        }
+
+        .tab-button.active {
+          color: ${t.active};
+          border-bottom-color: ${t.active};
+          background: white;
+        }
+
+        .tab-panels {
+          background: white;
+          padding: 21px;
+        }
+
+        .tab-panel {
+          display: none;
+        }
+
+        .tab-panel.active {
+          display: block;
+          animation: fadeIn 200ms ease-out;
+        }
+
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        ::slotted([slot="tabs"]) {
+          display: none;
+        }
+      </style>
+
+      <div class="tabs-container">
+        <div class="tab-list" role="tablist">
+          ${tabItems.map((tab, i) => `
+            <button class="tab-button ${i === this._activeTab ? 'active' : ''}" 
+                    role="tab" 
+                    aria-selected="${i === this._activeTab}"
+                    aria-controls="panel-${i}"
+                    tabindex="${i === this._activeTab ? '0' : '-1'}"
+                    id="tab-${i}">
+              ${tab.getAttribute('label') || `Tab ${i + 1}`}
+            </button>
+          `).join('')}
+        </div>
+        <div class="tab-panels">
+          ${tabItems.map((tab, i) => `
+            <div class="tab-panel ${i === this._activeTab ? 'active' : ''}" 
+                 role="tabpanel"
+                 id="panel-${i}"
+                 aria-labelledby="tab-${i}">
+              ${tab.innerHTML}
+            </div>
+          `).join('')}
+        </div>
+      </div>
+      <slot name="tabs"></slot>
+    `;
+    }
+}
+
+registerComponent('af-tabs', AfriTabs);
+export default AfriTabs;

package/components/theme-toggle.js

@@ -0,0 +1,82 @@
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+class ThemeToggle extends AfriCodeComponent {
+    constructor() {
+        super();
+        this.currentTheme = 'dark';
+    }
+
+    connectedCallback() {
+        this.loadStyles();
+        
+        // Check initial theme from document element or localStorage
+        const storedTheme = localStorage.getItem('africode-theme');
+        if (storedTheme) {
+            this.currentTheme = storedTheme;
+            document.documentElement.setAttribute('data-theme', storedTheme);
+        } else {
+            const hasLightMode = window.matchMedia('(prefers-color-scheme: light)').matches;
+            this.currentTheme = hasLightMode ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', this.currentTheme);
+        }
+
+        this.render();
+    }
+
+    toggleTheme() {
+        this.currentTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', this.currentTheme);
+        localStorage.setItem('africode-theme', this.currentTheme);
+        
+        // Dispatch event for other components that might need JS-level awareness
+        window.dispatchEvent(new CustomEvent('theme-changed', { 
+            detail: { theme: this.currentTheme } 
+        }));
+
+        this.render();
+    }
+
+    render() {
+        const isDark = this.currentTheme === 'dark';
+        
+        this.shadowRoot.innerHTML = html`
+            <style>
+                .toggle-btn {
+                    background: var(--bg-surface-elevated, var(--afri-obsidian));
+                    border: 1px solid var(--border-color);
+                    color: var(--text-main);
+                    padding: var(--space-8) var(--space-13);
+                    border-radius: var(--radius-lg);
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    font-family: var(--font-body);
+                    font-size: 0.9rem;
+                    transition: all 0.3s var(--ease-snap);
+                }
+                .toggle-btn:hover {
+                    border-color: var(--brand-green);
+                    transform: translateY(-2px);
+                }
+                .icon {
+                    font-size: 1.1rem;
+                }
+            </style>
+            
+            <button class="toggle-btn" @click="\${() => this.toggleTheme()}">
+                <span class="icon">\${isDark ? '🌙' : '☀️'}</span>
+                <span>\${isDark ? 'Dark Mode' : 'Light Mode'}</span>
+            </button>
+        `;
+
+        // Attach event listener natively since simple html tagged template doesn't bind events directly in this framework yet
+        const btn = this.shadowRoot.querySelector('.toggle-btn');
+        if (btn) {
+            btn.addEventListener('click', () => this.toggleTheme());
+        }
+    }
+}
+
+registerComponent('af-theme-toggle', ThemeToggle);
+export default ThemeToggle;

package/components/toast.js

@@ -0,0 +1,139 @@
+/**
+ * AfriCode Toast Component
+ * 
+ * Notification toasts with customizable types and auto-dismiss.
+ * 
+ * @module components/toast
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriToast extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['type', 'message', 'duration'];
+    }
+
+    constructor() {
+        super();
+        this.render();
+    }
+
+    show(message, type = 'info', duration = 4000) {
+        this.setAttribute('message', message);
+        this.setAttribute('type', type);
+        this.render();
+
+        const toast = this.shadowRoot.querySelector('.toast');
+        toast.classList.add('show');
+
+        if (duration > 0) {
+            setTimeout(() => this.hide(), duration);
+        }
+    }
+
+    hide() {
+        const toast = this.shadowRoot.querySelector('.toast');
+        toast.classList.remove('show');
+        setTimeout(() => this.emit('af-toast-close'), 300);
+    }
+
+    render() {
+        const type = this.getAttribute('type') || 'info';
+        const message = this.getAttribute('message') || '';
+
+        const icons = {
+            success: '✓',
+            error: '✗',
+            warning: '⚠',
+            info: 'ℹ'
+        };
+
+        const colors = {
+            success: '#1EB53A',
+            error: '#EF3340',
+            warning: '#FCD116',
+            info: '#00A3DD'
+        };
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+          z-index: 9999;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .toast {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          padding: 16px 20px;
+          background: #121212;
+          border: 1px solid #1e1e1e;
+          border-left: 4px solid ${colors[type]};
+          border-radius: 8px;
+          box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+          transform: translateX(120%);
+          opacity: 0;
+          transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+
+        .toast.show {
+          transform: translateX(0);
+          opacity: 1;
+        }
+
+        .toast-icon {
+          width: 28px;
+          height: 28px;
+          border-radius: 50%;
+          background: ${colors[type]}20;
+          color: ${colors[type]};
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          font-weight: bold;
+        }
+
+        .toast-content {
+          flex: 1;
+        }
+
+        .toast-message {
+          color: #ffffff;
+          font-size: 0.95rem;
+        }
+
+        .toast-close {
+          background: none;
+          border: none;
+          color: #606060;
+          cursor: pointer;
+          padding: 4px;
+          font-size: 18px;
+          line-height: 1;
+        }
+
+        .toast-close:hover {
+          color: #ffffff;
+        }
+      </style>
+
+      <div class="toast">
+        <span class="toast-icon">${icons[type]}</span>
+        <div class="toast-content">
+          <div class="toast-message">${message}</div>
+        </div>
+        <button class="toast-close" id="close">×</button>
+      </div>
+    `;
+
+        this.shadowRoot.getElementById('close')?.addEventListener('click', () => this.hide());
+    }
+}
+
+registerComponent('af-toast', AfriToast);
+export default AfriToast;