@africode/core 5.0.6 → 5.0.8

package/components/dashboard-topbar.js

@@ -0,0 +1,84 @@
+/**
+ * AfriCode Dashboard Topbar
+ *
+ * Top navigation bar for dashboard control and page context.
+ * @module components/dashboard-topbar
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriDashboardTopbar extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['title', 'description'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const title = this.getAttribute('title') || 'Dashboard';
+    const description = this.getAttribute('description') || '';
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .topbar {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 1rem 1.5rem;
+          gap: 1rem;
+          min-height: 72px;
+          box-sizing: border-box;
+        }
+
+        .heading {
+          display: grid;
+          gap: 0.25rem;
+        }
+
+        .title {
+          margin: 0;
+          font-size: 1.1rem;
+          font-weight: 700;
+          color: #0f172a;
+        }
+
+        .description {
+          margin: 0;
+          color: #475569;
+          font-size: 0.95rem;
+        }
+
+        .actions {
+          display: flex;
+          gap: 0.75rem;
+          align-items: center;
+          flex-wrap: wrap;
+        }
+      </style>
+
+      <div class="topbar">
+        <div class="heading">
+          <div class="title">${title}</div>
+          ${description ? html`<div class="description">${description}</div>` : ''}
+        </div>
+        <div class="actions"><slot name="actions"></slot></div>
+      </div>
+    `;
+  }
+}
+
+registerComponent('af-dashboard-topbar', AfriDashboardTopbar);
+export default AfriDashboardTopbar;

package/components/faq-accordion.js

@@ -0,0 +1,23 @@
+/**
+ * AfriCode FAQ Accordion
+ *
+ * Simple accordion for FAQ sections.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriFAQAccordion extends AfriCodeComponent {
+  constructor(){ super(); this.render(); }
+  connectedCallback(){ this.shadowRoot.addEventListener('click',(e)=>{ if(e.target.matches('.q')){ const p=e.target.nextElementSibling; p.hidden=!p.hidden}})}
+  render(){ this.shadowRoot.innerHTML = html`
+    <style>
+      :host{display:block}
+      .q{cursor:pointer;padding:12px;border-radius:8px;background:#f8fafc}
+      .a{padding:12px}
+    </style>
+    <slot></slot>
+  `}
+}
+
+registerComponent('af-faq-accordion', AfriFAQAccordion);
+export default AfriFAQAccordion;

package/components/feature-grid.js

@@ -0,0 +1,85 @@
+/**
+ * AfriCode Feature Grid Component
+ *
+ * Responsive feature tiles for website marketing sections.
+ * @module components/feature-grid
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriFeatureGrid extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['columns'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const columns = this.getAttribute('columns') || '3';
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          box-sizing: border-box;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .grid {
+          display: grid;
+          gap: 1.5rem;
+          grid-template-columns: repeat(${columns}, minmax(0, 1fr));
+        }
+
+        @media (max-width: 1024px) {
+          .grid {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
+        }
+
+        @media (max-width: 640px) {
+          .grid {
+            grid-template-columns: 1fr;
+          }
+        }
+
+        ::slotted(.feature-card) {
+          display: grid;
+          gap: 0.75rem;
+          padding: 1.5rem;
+          border-radius: 24px;
+          background: #ffffff;
+          border: 1px solid rgba(15, 23, 42, 0.08);
+          box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
+        }
+
+        ::slotted(.feature-card h3) {
+          margin: 0;
+          font-size: 1.1rem;
+          color: #0f172a;
+        }
+
+        ::slotted(.feature-card p) {
+          margin: 0;
+          color: #475569;
+          line-height: 1.7;
+        }
+      </style>
+
+      <div class="grid">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+registerComponent('af-feature-grid', AfriFeatureGrid);
+export default AfriFeatureGrid;

package/components/file-uploader.js

@@ -0,0 +1,22 @@
+/**
+ * AfriCode File Uploader
+ *
+ * Simple drag-and-drop file uploader component.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriFileUploader extends AfriCodeComponent {
+  constructor(){ super(); this.render(); }
+  connectedCallback(){ const area=this.shadowRoot.getElementById('drop'); ['dragover','dragleave','drop'].forEach(ev=>area.addEventListener(ev,(e)=>{e.preventDefault();if(ev==='drop'){const files=Array.from(e.dataTransfer.files);this.emit('files',files)}})) }
+  render(){ this.shadowRoot.innerHTML = html`
+    <style>
+      :host{display:block}
+      .drop{padding:20px;border:2px dashed #e5e7eb;border-radius:12px;text-align:center}
+    </style>
+    <div id="drop" class="drop">Drop files here or click to select</div>
+  ` }
+}
+
+registerComponent('af-file-uploader', AfriFileUploader);
+export default AfriFileUploader;

package/components/filter-bar.js

@@ -0,0 +1,19 @@
+/**
+ * AfriCode Filter Bar
+ *
+ * Simple filter controls for listing pages.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriFilterBar extends AfriCodeComponent {
+  constructor(){ super(); this.render(); }
+  connectedCallback(){ this.shadowRoot.addEventListener('change', (e)=>{ this.emit('filter-change', {name: e.target.name, value: e.target.value}) }) }
+  render(){ this.shadowRoot.innerHTML = html`
+    <style> .wrap{display:flex;gap:8px;flex-wrap:wrap} select,input{padding:8px;border-radius:8px;border:1px solid #e5e7eb} </style>
+    <div class="wrap"><slot></slot></div>
+  ` }
+}
+
+registerComponent('af-filter-bar', AfriFilterBar);
+export default AfriFilterBar;

package/components/footer.js

@@ -0,0 +1,113 @@
+/**
+ * AfriCode Footer Component
+ *
+ * Flexible website footer with logo, links, and legal slot.
+ * @module components/footer
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriFooter extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['company', 'year'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const company = this.getAttribute('company') || 'AfriCode';
+    const year = this.getAttribute('year') || new Date().getFullYear();
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          box-sizing: border-box;
+          background: #0f172a;
+          color: #e2e8f0;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .footer {
+          padding: 48px 5%;
+          max-width: 1280px;
+          margin: 0 auto;
+          display: grid;
+          gap: 2rem;
+          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+        }
+
+        .brand {
+          display: grid;
+          gap: 0.75rem;
+        }
+
+        .brand h3 {
+          margin: 0;
+          font-size: 1.25rem;
+          color: #ffffff;
+        }
+
+        .links {
+          display: grid;
+          gap: 0.5rem;
+        }
+
+        .links slot {
+          display: grid;
+          gap: 0.5rem;
+        }
+
+        a {
+          color: #94a3b8;
+          text-decoration: none;
+        }
+
+        a:hover {
+          color: #ffffff;
+        }
+
+        .bottom {
+          grid-column: 1 / -1;
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: space-between;
+          gap: 1rem;
+          padding-top: 1.5rem;
+          border-top: 1px solid rgba(226, 232, 240, 0.12);
+          color: #94a3b8;
+          font-size: 0.95rem;
+        }
+      </style>
+
+      <footer class="footer">
+        <div class="brand">
+          <h3>${company}</h3>
+          <slot name="description"></slot>
+        </div>
+        <div class="links">
+          <slot name="links"></slot>
+        </div>
+        <div class="links">
+          <slot name="resources"></slot>
+        </div>
+        <div class="bottom">
+          <span>© ${year} ${company}. All rights reserved.</span>
+          <slot name="legal"></slot>
+        </div>
+      </footer>
+    `;
+  }
+}
+
+registerComponent('af-footer', AfriFooter);
+export default AfriFooter;

package/components/gallery.js

@@ -0,0 +1,22 @@
+/**
+ * AfriCode Gallery
+ *
+ * Responsive image gallery grid with lightbox slot support.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriGallery extends AfriCodeComponent {
+  constructor(){ super(); this.render(); }
+  render(){ this.shadowRoot.innerHTML = html`
+    <style>
+      :host{display:block}
+      .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
+      ::slotted(img){width:100%;height:160px;object-fit:cover;border-radius:12px}
+    </style>
+    <div class="grid"><slot></slot></div>
+  `}
+}
+
+registerComponent('af-gallery', AfriGallery);
+export default AfriGallery;

package/components/index.js

@@ -1,6 +1,11 @@
 /**
  * Component Registry (Islands Map)
  * 
+ * All AfriCode components, including the native UI kit (`af-ui-*`),
+ * dashboard widgets (`af-dashboard-*`), and website/system helpers,
+ * ship together from the same @africode/core package.
+ * This keeps theme, styles, registry, and versioning unified.
+ *
  * Instead of statically importing all components (monolithic bundle),
  * we export a map for lazy hydration.
  */
@@ -14,6 +19,27 @@ export { AfriUICard } from './ui-card.js';
 export { AfriUIInput } from './ui-input.js';
 export { AfriUIBadge } from './ui-badge.js';
 export { AfriUISwitch } from './ui-switch.js';
+export { AfriUISelect } from './ui-select.js';
+export { AfriUITextarea } from './ui-textarea.js';
+export { AfriUIChip } from './ui-chip.js';
+export { AfriUITag } from './ui-tag.js';
+export { AfriUIAvatar } from './ui-avatar.js';
+export { AfriUIProgressRing } from './ui-progress-ring.js';
+export { AfriUITooltip } from './ui-tooltip.js';
+export { AfriUIPopover } from './ui-popover.js';
+export { AfriUITabs } from './ui-tabs.js';
+export { AfriUITable } from './ui-table.js';
+export { AfriUIStat } from './ui-stat.js';
+export { AfriFooter } from './footer.js';
+export { AfriBreadcrumb } from './breadcrumb.js';
+export { AfriFeatureGrid } from './feature-grid.js';
+export { AfriPricingCard } from './pricing-card.js';
+export { AfriTestimonial } from './testimonial.js';
+export { AfriDashboardShell } from './dashboard-shell.js';
+export { AfriDashboardTopbar } from './dashboard-topbar.js';
+export { AfriDashboardCard } from './dashboard-card.js';
+export { AfriDashboardMetric } from './dashboard-metric.js';
+export { AfriDashboardActivityList } from './dashboard-activity-list.js';
 
 // Map of Tag Name -> Dynamic Import
 export const componentMap = {
@@ -33,6 +59,27 @@ export const componentMap = {
     'af-ui-input': () => import('./ui-input.js'),
     'af-ui-badge': () => import('./ui-badge.js'),
     'af-ui-switch': () => import('./ui-switch.js'),
+    'af-ui-select': () => import('./ui-select.js'),
+    'af-ui-textarea': () => import('./ui-textarea.js'),
+    'af-ui-chip': () => import('./ui-chip.js'),
+    'af-ui-tag': () => import('./ui-tag.js'),
+    'af-ui-avatar': () => import('./ui-avatar.js'),
+    'af-ui-progress-ring': () => import('./ui-progress-ring.js'),
+    'af-ui-tooltip': () => import('./ui-tooltip.js'),
+    'af-ui-popover': () => import('./ui-popover.js'),
+    'af-ui-tabs': () => import('./ui-tabs.js'),
+    'af-ui-table': () => import('./ui-table.js'),
+    'af-ui-stat': () => import('./ui-stat.js'),
+    'af-footer': () => import('./footer.js'),
+    'af-breadcrumb': () => import('./breadcrumb.js'),
+    'af-feature-grid': () => import('./feature-grid.js'),
+    'af-pricing-card': () => import('./pricing-card.js'),
+    'af-testimonial': () => import('./testimonial.js'),
+    'af-dashboard-shell': () => import('./dashboard-shell.js'),
+    'af-dashboard-topbar': () => import('./dashboard-topbar.js'),
+    'af-dashboard-card': () => import('./dashboard-card.js'),
+    'af-dashboard-metric': () => import('./dashboard-metric.js'),
+    'af-dashboard-activity-list': () => import('./dashboard-activity-list.js'),
 
     // Enterprise
     'af-accordion': () => import('./accordion.js'),

package/components/newsletter-signup.js

@@ -0,0 +1,24 @@
+/**
+ * AfriCode Newsletter Signup
+ *
+ * Simple email capture component.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriNewsletterSignup extends AfriCodeComponent {
+  constructor(){ super(); this.render(); }
+  connectedCallback(){ this.shadowRoot.querySelector('form')?.addEventListener('submit',(e)=>{e.preventDefault();const f=new FormData(e.target);this.emit('subscribe',Object.fromEntries(f.entries()))}) }
+  render(){ this.shadowRoot.innerHTML = html`
+    <style>
+      :host{display:block}
+      form{display:flex;gap:8px}
+      input{flex:1;padding:10px;border-radius:8px;border:1px solid #e5e7eb}
+      button{padding:10px;border-radius:8px;background:#1EB53A;color:white;border:none}
+    </style>
+    <form><input name="email" type="email" placeholder="Your email" required/><button>Subscribe</button></form>
+  `}
+}
+
+registerComponent('af-newsletter-signup', AfriNewsletterSignup);
+export default AfriNewsletterSignup;

package/components/pagination.js

@@ -0,0 +1,31 @@
+/**
+ * AfriCode Pagination
+ *
+ * Simple pagination control for lists.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriPagination extends AfriCodeComponent {
+  static get observedAttributes(){return ['page','pages']}
+  constructor(){super();this.render();}
+  attributeChangedCallback(){this.render();}
+  render(){const page=Number(this.getAttribute('page')||1);const pages=Number(this.getAttribute('pages')||1);
+    this.shadowRoot.innerHTML=html`
+      <style>
+        :host{display:block}
+        .wrap{display:flex;gap:8px}
+        button{padding:6px 10px;border-radius:8px;border:1px solid #e5e7eb;background:white}
+      </style>
+      <div class="wrap">
+        ${page>1?html`<button data-action="prev">Prev</button>`:''}
+        <span>Page ${page} / ${pages}</span>
+        ${page<pages?html`<button data-action="next">Next</button>`:''}
+      </div>
+    `;
+    this.shadowRoot.querySelectorAll('button').forEach(b=>b.addEventListener('click',e=>{const a=e.currentTarget.getAttribute('data-action');this.emit('navigate',{action:a})}))
+  }
+}
+
+registerComponent('af-pagination', AfriPagination);
+export default AfriPagination;

package/components/pricing-card.js

@@ -0,0 +1,100 @@
+/**
+ * AfriCode Pricing Card Component
+ *
+ * Pricing plan card for SaaS and business websites.
+ * @module components/pricing-card
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriPricingCard extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['title', 'price', 'frequency', 'highlight'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const title = this.getAttribute('title') || 'Standard';
+    const price = this.getAttribute('price') || '$49';
+    const frequency = this.getAttribute('frequency') || 'per month';
+    const highlight = this.hasAttribute('highlight');
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+        }
+
+        .card {
+          display: grid;
+          gap: 1rem;
+          padding: 1.75rem;
+          border-radius: 28px;
+          background: ${highlight ? 'linear-gradient(180deg, #1EB53A, #0f172a)' : '#ffffff'};
+          color: ${highlight ? '#ffffff' : '#0f172a'};
+          border: 1px solid rgba(15, 23, 42, 0.08);
+          box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
+        }
+
+        .title {
+          margin: 0;
+          font-size: 1.2rem;
+          font-weight: 700;
+        }
+
+        .price {
+          font-size: 2.75rem;
+          font-weight: 800;
+          line-height: 1;
+        }
+
+        .frequency {
+          color: ${highlight ? 'rgba(255,255,255,0.8)' : '#64748b'};
+          font-size: 0.95rem;
+          margin-top: -0.25rem;
+        }
+
+        .features {
+          display: grid;
+          gap: 0.75rem;
+        }
+
+        ::slotted(.feature) {
+          color: ${highlight ? '#e2e8f0' : '#475569'};
+          font-size: 0.95rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+
+        .footer {
+          margin-top: 1rem;
+        }
+      </style>
+
+      <div class="card">
+        <div>
+          <h3 class="title">${title}</h3>
+          <div class="price">${price}</div>
+          <div class="frequency">${frequency}</div>
+        </div>
+        <div class="features">
+          <slot></slot>
+        </div>
+        <div class="footer"><slot name="action"></slot></div>
+      </div>
+    `;
+  }
+}
+
+registerComponent('af-pricing-card', AfriPricingCard);
+export default AfriPricingCard;

package/components/product-card.js

@@ -0,0 +1,41 @@
+/**
+ * AfriCode Product Card
+ *
+ * Product display card for e-commerce pages.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriProductCard extends AfriCodeComponent {
+  static get observedAttributes() { return ['title','price','image','currency']; }
+  constructor(){ super(); this.render(); }
+  attributeChangedCallback(){ this.render(); }
+  render(){
+    const title = this.getAttribute('title') || 'Product';
+    const price = this.getAttribute('price') || '0';
+    const image = this.getAttribute('image') || '';
+    const currency = this.getAttribute('currency') || '$';
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host{display:block;font-family:Inter,system-ui,sans-serif}
+        .card{background:#fff;border-radius:12px;padding:12px;display:grid;gap:8px}
+        .media{height:180px;border-radius:8px;background:#f3f4f6;overflow:hidden}
+        .media img{width:100%;height:100%;object-fit:cover}
+        .meta{display:flex;justify-content:space-between;align-items:center}
+        .title{font-weight:700}
+        .price{font-weight:800}
+        .actions{display:flex;gap:8px}
+        button{padding:8px 12px;border-radius:8px;border:none;background:#1EB53A;color:white;cursor:pointer}
+      </style>
+      <div class="card">
+        <div class="media">${image?html`<img src="${image}" alt="${title}"/>` : ''}</div>
+        <div class="meta"><div class="title">${title}</div><div class="price">${currency}${price}</div></div>
+        <div class="actions"><button class="add">Add to cart</button><button class="view">View</button></div>
+      </div>
+    `;
+    this.shadowRoot.querySelector('.add')?.addEventListener('click',()=>this.emit('add-to-cart',{title,price,currency}))
+  }
+}
+
+registerComponent('af-product-card', AfriProductCard);
+export default AfriProductCard;

package/components/search-box.js

@@ -0,0 +1,24 @@
+/**
+ * AfriCode Search Box
+ *
+ * Search input with debounced emit for live search.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriSearchBox extends AfriCodeComponent {
+  constructor(){ super(); this._deb=null; this.render(); }
+  connectedCallback(){ this.shadowRoot.getElementById('q').addEventListener('input', (e)=>{ clearTimeout(this._deb); this._deb=setTimeout(()=>this.emit('search',{q:e.target.value}),300) }) }
+  render(){ this.shadowRoot.innerHTML = html`
+    <style>
+      :host{display:block}
+      .wrap{display:flex;gap:8px}
+      input{padding:10px;border-radius:8px;border:1px solid #e5e7eb;flex:1}
+      button{padding:10px;border-radius:8px;background:#0f172a;color:white;border:none}
+    </style>
+    <div class="wrap"><input id="q" placeholder="Search..."/><button aria-hidden>🔍</button></div>
+  `}
+}
+
+registerComponent('af-search-box', AfriSearchBox);
+export default AfriSearchBox;

package/components/simple-chart.js

@@ -0,0 +1,22 @@
+/**
+ * AfriCode Simple Chart
+ *
+ * Tiny chart wrapper for simple bar/line charts using Canvas.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriSimpleChart extends AfriCodeComponent {
+  static get observedAttributes(){return ['type','data']}
+  constructor(){ super(); this.render(); }
+  attributeChangedCallback(){ this.render(); }
+  render(){ const type=this.getAttribute('type')||'bar'; const dataAttr=this.getAttribute('data')||'[]'; let data=[]; try{data=JSON.parse(dataAttr)}catch(e){}
+    this.shadowRoot.innerHTML = html`
+      <style>canvas{width:100%;height:200px}</style>
+      <canvas></canvas>
+    `; const canvas=this.shadowRoot.querySelector('canvas'); if(canvas){ const ctx=canvas.getContext('2d'); canvas.width=600; canvas.height=200; ctx.clearRect(0,0,canvas.width,canvas.height); if(type==='bar'){ const w=canvas.width/data.length; data.forEach((v,i)=>{ const h=(v/Math.max(...data))*150; ctx.fillStyle='#1EB53A'; ctx.fillRect(i*w+10,canvas.height-20-h,w-20,h) }) } }
+  }
+}
+
+registerComponent('af-simple-chart', AfriSimpleChart);
+export default AfriSimpleChart;