@africode/core 5.0.0

package/components/icon.js

@@ -0,0 +1,36 @@
+import { AfriCodeComponent, registerComponent } from './base.js';
+
+export class AfriIcon extends AfriCodeComponent {
+  static get observedAttributes() { return ['name', 'size']; }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    const name = this.getAttribute('name') || 'circle';
+    const size = this.getAttribute('size') || '24';
+
+    // Simple SVG library (expand as needed)
+    const icons = {
+      'check': '<path d="M20 6L9 17l-5-5" />',
+      'x': '<path d="M18 6L6 18M6 6l12 12" />',
+      'arrow-right': '<path d="M5 12h14M12 5l7 7-7 7" />',
+      'menu': '<path d="M3 12h18M3 6h18M3 18h18" />',
+      'search': '<circle cx="11" cy="11" r="8" /><path d="M21 21l-4.35-4.35" />'
+    };
+
+    const path = icons[name] || '';
+
+    this.shadowRoot.innerHTML = `
+            <style>
+                :host { display: inline-flex; vertical-align: middle; }
+                svg { width: ${size}px; height: ${size}px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+            </style>
+            <svg viewBox="0 0 24 24">${path}</svg>
+        `;
+  }
+}
+
+registerComponent('af-icon', AfriIcon);
+export default AfriIcon;

package/components/index.js

@@ -0,0 +1,57 @@
+/**
+ * Component Registry (Islands Map)
+ * 
+ * Instead of statically importing all components (monolithic bundle),
+ * we export a map for lazy hydration.
+ */
+
+export { AfriCodeComponent } from './base.js';
+export { AfriErrorBoundary } from './error-boundary.js';
+
+// Map of Tag Name -> Dynamic Import
+export const componentMap = {
+    // Core UI
+    'af-button': () => import('./button.js'),
+    'af-card': () => import('./card.js'),
+    'af-navbar': () => import('./navbar.js'),
+    'af-input': () => import('./input.js'),
+    'af-alert': () => import('./alert.js'),
+    'af-grid': () => import('./grid.js'),
+    'af-section': () => import('./section.js'),
+    'af-icon': () => import('./icon.js'),
+
+    // Enterprise
+    'af-accordion': () => import('./accordion.js'),
+    'af-hero': () => import('./hero.js'),
+    'af-table': () => import('./table.js'),
+    'af-modal': () => import('./modal.js'),
+    'af-tabs': () => import('./tabs.js'),
+    'af-sidebar': () => import('./sidebar.js'),
+    'af-dropdown': () => import('./dropdown.js'),
+    'af-select': () => import('./select.js'),
+    'af-form': () => import('./form.js'),
+    'af-tooltip': () => import('./tooltip.js'),
+    'af-toast': () => import('./toast.js'),
+
+    // Feedback & Display
+    'af-badge': () => import('./badge.js'),
+    'af-avatar': () => import('./avatar.js'),
+    'af-progress': () => import('./progress.js'),
+    'af-loader': () => import('./loader.js'),
+    'af-skeleton': () => import('./skeleton.js'),
+    'af-divider': () => import('./divider.js'),
+
+    // Cultural
+    'af-kanga-card': () => import('./kanga-card.js'),
+    'af-cultural-card': () => import('./cultural-card.js'),
+    'af-pattern-showcase': () => import('./pattern-showcase.js'),
+    'af-language-switcher': () => import('./language-switcher.js'),
+
+    // Auth
+    'af-auth': () => import('./auth.js'),
+
+    // Theming
+    'af-theme-toggle': () => import('./theme-toggle.js'),
+};
+
+export default componentMap;

package/components/input.js

@@ -0,0 +1,256 @@
+/**
+ * AfriCode Input Component
+ * 
+ * Form input with validation, icons, and cultural styling.
+ * Suitable for: All sectors requiring data collection
+ * 
+ * @module components/input
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+import { Validation, rules } from '../core/validation.js';
+
+export class AfriInput extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['type', 'name', 'label', 'placeholder', 'error', 'helper', 'theme', 'icon', 'required', 'aria-label', 'aria-describedby', 'validation'];
+    }
+
+    constructor() {
+        super();
+        this._uniqueId = Math.random().toString(36).substr(2, 9);
+        this.render();
+    }
+
+    get value() {
+        return this.shadowRoot.querySelector('input')?.value || '';
+    }
+
+    set value(val) {
+        const input = this.shadowRoot.querySelector('input');
+        if (input) {input.value = val;}
+    }
+
+    connectedCallback() {
+        this._attachInputListeners();
+        this.loadStyles();
+    }
+
+    attributeChangedCallback() {
+        this.render();
+        this._attachInputListeners();
+    }
+
+    _attachInputListeners() {
+        const input = this.shadowRoot.querySelector('input');
+        if (!input) {return;}
+
+        input.addEventListener('input', (e) => {
+            this.emit('af-input', { value: e.target.value });
+            if (this.hasAttribute('error')) {
+                this.removeAttribute('error');
+            }
+        });
+
+        input.addEventListener('blur', () => {
+            this.emit('af-blur', { value: this.value });
+            this._validateInput();
+        });
+    }
+
+    _setupValidation() {
+        const validationRule = this.getAttribute('validation');
+        if (!validationRule) {return;}
+
+        const input = this.shadowRoot.querySelector('input');
+        if (!input) {return;}
+
+        input.addEventListener('input', () => {
+            if (this.hasAttribute('error')) {
+                this.removeAttribute('error');
+            }
+        });
+    }
+
+    _validateInput() {
+        const input = this.shadowRoot.querySelector('input');
+        if (!input) {return;}
+
+        const validationRule = this.getAttribute('validation');
+        const value = input.value;
+        const required = this.hasAttribute('required');
+
+        // Check required first
+        if (required && !value.trim()) {
+            this.setAttribute('error', 'This field is required');
+            return;
+        }
+
+        // Apply validation rule
+        if (validationRule && value.trim()) {
+            const schema = this._getValidationSchema(validationRule);
+            if (schema) {
+                const result = Validation.validateField(schema, value);
+                if (!result.success) {
+                    this.setAttribute('error', result.error);
+                } else {
+                    this.removeAttribute('error');
+                }
+            }
+        }
+    }
+
+    _getValidationSchema(ruleName) {
+        const ruleMap = {
+            'email': rules.email(),
+            'password': rules.password(),
+            'phone': rules.phone(),
+            'url': rules.url(),
+            'required': rules.required()
+        };
+
+        // Handle parameterized rules like minLength:5
+        if (ruleName.includes(':')) {
+            const [rule, param] = ruleName.split(':');
+            const numParam = parseInt(param);
+
+            switch (rule) {
+                case 'minLength':
+                    return rules.minLength(numParam);
+                case 'maxLength':
+                    return rules.maxLength(numParam);
+                case 'pattern':
+                    return rules.pattern(new RegExp(param), 'Invalid format');
+            }
+        }
+
+        return ruleMap[ruleName] || null;
+    }
+
+    attributeChangedCallback() {
+        this.render();
+    }
+
+    render() {
+        const type = this.getAttribute('type') || 'text';
+        const name = this.getAttribute('name') || '';
+        const label = this.getAttribute('label') || '';
+        const placeholder = this.getAttribute('placeholder') || '';
+        const error = this.getAttribute('error') || '';
+        const helper = this.getAttribute('helper') || '';
+        const theme = this.getAttribute('theme') || 'tanzania';
+        const icon = this.getAttribute('icon') || '';
+        const required = this.hasAttribute('required');
+        const ariaLabel = this.getAttribute('aria-label');
+        const ariaDescribedBy = this.getAttribute('aria-describedby');
+
+        const themes = {
+            tanzania: { focus: '#1EB53A', error: '#DC3545' },
+            maasai: { focus: '#FF0000', error: '#8B0000' },
+            ndebele: { focus: '#4169E1', error: '#DC143C' }
+        };
+        const t = themes[theme] || themes.tanzania;
+
+        const describedByList = [];
+        if (error) {describedByList.push(`error-${this._uniqueId}`);}
+        else if (helper) {describedByList.push(`helper-${this._uniqueId}`);}
+        if (ariaDescribedBy) {describedByList.push(...ariaDescribedBy.split(' '));}
+        const combinedDescribedBy = describedByList.length > 0 ? `aria-describedby="${describedByList.join(' ')}"` : '';
+
+        this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .input-wrapper {
+          position: relative;
+        }
+
+        label {
+          display: block;
+          font-weight: 500;
+          margin-bottom: 5px;
+          color: #333;
+          font-size: 14px;
+        }
+
+        .required-star {
+          color: ${t.error};
+          margin-left: 2px;
+        }
+
+        .input-container {
+          position: relative;
+          display: flex;
+          align-items: center;
+        }
+
+        input {
+          width: 100%;
+          padding: 10px 13px;
+          ${icon ? 'padding-left: 40px;' : ''}
+          font-size: 15px;
+          border: 2px solid #ddd;
+          border-radius: 5px;
+          transition: all 200ms ease;
+          font-family: inherit;
+          box-sizing: border-box;
+        }
+
+        input:focus {
+          outline: none;
+          border-color: ${error ? t.error : t.focus};
+          box-shadow: 0 0 0 3px ${error ? t.error + '20' : t.focus + '20'};
+        }
+
+        input.has-error {
+          border-color: ${t.error};
+        }
+
+        .icon {
+          position: absolute;
+          left: 13px;
+          color: #888;
+          font-size: 16px;
+          pointer-events: none;
+        }
+
+        .helper-text {
+          font-size: 12px;
+          margin-top: 4px;
+          color: #666;
+        }
+
+        .error-text {
+          font-size: 12px;
+          margin-top: 4px;
+          color: ${t.error};
+        }
+      </style>
+
+      <div class="input-wrapper">
+        ${label ? `<label for="input-${this._uniqueId}">${label}${required ? '<span class="required-star">*</span>' : ''}</label>` : ''}
+        <div class="input-container">
+          ${icon ? `<span class="icon">${icon}</span>` : ''}
+          <input 
+            id="input-${this._uniqueId}"
+            name="${name}"
+            type="${type}"
+            placeholder="${placeholder}"
+            class="${error ? 'has-error' : ''}"
+            ${required ? 'required' : ''}
+            ${ariaLabel ? `aria-label="${ariaLabel}"` : ''}
+            ${error ? 'aria-invalid="true"' : ''}
+            ${combinedDescribedBy}
+          />
+        </div>
+        ${error ? `<div id="error-${this._uniqueId}" class="error-text" role="alert">${error}</div>` : ''}
+        ${helper && !error ? `<div id="helper-${this._uniqueId}" class="helper-text">${helper}</div>` : ''}
+      </div>
+    `;
+    }
+}
+
+registerComponent('af-input', AfriInput);
+export default AfriInput;

package/components/kanga-card.js

@@ -0,0 +1,185 @@
+/**
+ * AfriCode Kanga Card Component
+ * 
+ * A card component inspired by the traditional East African Kanga textile.
+ * Structure follows the authentic Kanga layout:
+ * - pindo: decorative border frame
+ * - mji: central content area
+ * - jina: Swahili proverb inscription slot
+ * 
+ * @module components/kanga-card
+ */
+
+import { AfriCodeComponent, registerComponent } from './base.js';
+import patterns from '../core/patterns.js';
+
+export class KangaCard extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['theme', 'proverb', 'proverb-translation'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  connectedCallback() {
+    this.loadStyles();
+    this.applyTheme();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      if (name === 'theme') {
+        this.applyTheme();
+      } else {
+        this.render();
+      }
+    }
+  }
+
+  /**
+   * Get theme colors based on attribute
+   */
+  getThemeColors() {
+    const theme = this.getAttribute('theme') || 'tanzania';
+
+    const themes = {
+      tanzania: {
+        primary: '#1EB53A',
+        accent: '#FCD116',
+        border: '#00A3DD',
+        text: '#000000'
+      },
+      maasai: {
+        primary: '#8B0000',
+        accent: '#FF0000',
+        border: '#000000',
+        text: '#FFFFFF'
+      },
+      ndebele: {
+        primary: '#4169E1',
+        accent: '#FFD700',
+        border: '#FF69B4',
+        text: '#000000'
+      }
+    };
+
+    return themes[theme] || themes.tanzania;
+  }
+
+  /**
+   * Apply theme-specific patterns and colors
+   */
+  applyTheme() {
+    const colors = this.getThemeColors();
+    const pindo = this.shadowRoot.querySelector('.pindo');
+
+    if (pindo) {
+      const pattern = generateKangaBorder({
+        primaryColor: colors.primary,
+        accentColor: colors.accent
+      });
+      pindo.style.backgroundImage = `url("${pattern}")`;
+      pindo.style.backgroundRepeat = 'repeat';
+    }
+  }
+
+  render() {
+    const proverb = this.getAttribute('proverb') || '';
+    const translation = this.getAttribute('proverb-translation') || '';
+    const colors = this.getThemeColors();
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .kanga-card {
+          border-radius: var(--radius-lg, 8px);
+          overflow: hidden;
+          box-shadow: var(--shadow-lg, 0 5px 21px rgba(0, 0, 0, 0.2));
+          transition: transform var(--transition-base, 250ms ease-out),
+                      box-shadow var(--transition-base, 250ms ease-out);
+        }
+
+        .kanga-card:hover {
+          transform: translateY(-3px);
+          box-shadow: 0 8px 34px rgba(0, 0, 0, 0.25);
+        }
+
+        /* Pindo - Decorative Border */
+        .pindo {
+          padding: var(--space-13, 13px);
+          background-color: ${colors.primary};
+        }
+
+        /* Mji - Central Content Area */
+        .mji {
+          background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%);
+          padding: var(--space-21, 21px);
+          min-height: 120px;
+        }
+
+        /* Jina - Proverb Inscription */
+        .jina {
+          background-color: ${colors.border};
+          color: ${colors.text};
+          padding: var(--space-8, 8px) var(--space-13, 13px);
+          text-align: center;
+          font-style: italic;
+        }
+
+        .jina .swahili {
+          font-weight: 600;
+          font-size: 1rem;
+          margin-bottom: var(--space-3, 3px);
+        }
+
+        .jina .translation {
+          font-size: 0.85rem;
+          opacity: 0.9;
+        }
+
+        .jina:empty {
+          display: none;
+        }
+
+        /* Content slot styles */
+        ::slotted(*) {
+          margin: 0;
+        }
+
+        ::slotted(h1), ::slotted(h2), ::slotted(h3) {
+          color: ${colors.primary};
+          margin-bottom: var(--space-8, 8px);
+        }
+      </style>
+
+      <article class="kanga-card">
+        <div class="pindo">
+          <div class="mji">
+            <slot></slot>
+          </div>
+        </div>
+        
+        ${proverb ? `
+          <div class="jina">
+            <p class="swahili">${proverb}</p>
+            ${translation ? `<p class="translation">${translation}</p>` : ''}
+          </div>
+        ` : '<div class="jina"><slot name="proverb"></slot></div>'}
+      </article>
+    `;
+
+    // Re-apply theme after render
+    this.applyTheme();
+  }
+}
+
+// Register the component
+registerComponent('af-kanga-card', KangaCard);
+
+export default KangaCard;

package/components/language-switcher.js

@@ -0,0 +1,108 @@
+/**
+ * AfriCode Language Switcher
+ * A premium dropdown that uses native language names.
+ */
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriLanguageSwitcher extends AfriCodeComponent {
+    static get observedAttributes() {
+        return ['current'];
+    }
+
+    render() {
+        const languages = [
+            { code: 'en', name: 'English' },
+            { code: 'sw', name: 'Kiswahili' },
+            { code: 'fr', name: 'Français' },
+            { code: 'ar', name: 'العربية', dir: 'rtl' },
+            { code: 'am', name: 'አማርኛ' },
+            { code: 'yo', name: 'Yorùbá' }
+        ];
+
+        const current = this.getAttribute('current') || 'en';
+        const currentLang = languages.find(l => l.code === current) || languages[0];
+
+        this.shadowRoot.innerHTML = html`
+            <style>
+                :host { display: inline-block; position: relative; font-family: var(--font-body); }
+                .switcher-btn {
+                    padding: 8px 16px;
+                    background: var(--glass-bg);
+                    border: 1px solid var(--glass-border);
+                    border-radius: var(--radius-md);
+                    color: var(--text-primary);
+                    cursor: pointer;
+                    display: flex;
+                    align-items: center;
+                    gap: 8px;
+                    transition: all 0.3s ease;
+                }
+                .switcher-btn:hover { background: rgba(255,255,255,0.1); }
+                .dropdown {
+                    position: absolute;
+                    top: calc(100% + 8px);
+                    right: 0;
+                    background: var(--afri-void);
+                    border: 1px solid var(--glass-border);
+                    border-radius: var(--radius-md);
+                    padding: 8px;
+                    display: none;
+                    min-width: 150px;
+                    z-index: 1000;
+                    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
+                }
+                :host([open]) .dropdown { display: block; }
+                .lang-option {
+                    padding: 8px 12px;
+                    border-radius: var(--radius-sm);
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                }
+                .lang-option:hover { background: var(--glass-bg); color: var(--accent-gold); }
+            </style>
+
+            <button class="switcher-btn">
+                <span>🌍</span>
+                <span>${currentLang.name}</span>
+            </button>
+
+            <div class="dropdown">
+                ${languages.map(lang => html`
+                    <div class="lang-option" data-code="${lang.code}" dir="${lang.dir || 'ltr'}">
+                        ${lang.name}
+                    </div>
+                `)}
+            </div>
+        `;
+
+        this.shadowRoot.querySelector('.switcher-btn').onclick = () => {
+            this.toggleAttribute('open');
+        };
+
+        this.shadowRoot.querySelectorAll('.lang-option').forEach(opt => {
+            opt.onclick = () => {
+                const code = opt.dataset.code;
+                this.setAttribute('current', code);
+                this.removeAttribute('open');
+                this.emit('lang-change', { code });
+
+                // Demo logic: change document direction for Arabic
+                if (code === 'ar') {
+                    document.documentElement.dir = 'rtl';
+                } else {
+                    document.documentElement.dir = 'ltr';
+                }
+            };
+        });
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    attributeChangedCallback() {
+        this.render();
+    }
+}
+
+registerComponent('af-language-switcher', AfriLanguageSwitcher);