@africode/core 5.0.6 → 5.0.7

package/components/testimonial.js

@@ -0,0 +1,94 @@
+/**
+ * AfriCode Testimonial Component
+ *
+ * Card for customer quotes and endorsement sections.
+ * @module components/testimonial
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriTestimonial extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['author', 'role', 'company'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const author = this.getAttribute('author') || 'Customer';
+    const role = this.getAttribute('role') || 'Founder';
+    const company = this.getAttribute('company') || ''; 
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host {
+          display: block;
+          font-family: 'Inter', system-ui, sans-serif;
+          color: #0f172a;
+        }
+
+        .testimonial {
+          display: grid;
+          gap: 1rem;
+          padding: 1.75rem;
+          border-radius: 24px;
+          background: #ffffff;
+          border: 1px solid rgba(15, 23, 42, 0.08);
+          box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
+        }
+
+        .quote {
+          font-size: 1rem;
+          line-height: 1.8;
+          color: #475569;
+          position: relative;
+          padding-left: 1rem;
+        }
+
+        .quote::before {
+          content: '“';
+          position: absolute;
+          left: 0;
+          top: 0;
+          font-size: 3rem;
+          color: #1EB53A;
+          line-height: 1;
+        }
+
+        .author {
+          display: flex;
+          flex-direction: column;
+          gap: 0.125rem;
+          color: #0f172a;
+        }
+
+        .name {
+          font-weight: 700;
+        }
+
+        .meta {
+          color: #64748b;
+          font-size: 0.9rem;
+        }
+      </style>
+
+      <article class="testimonial">
+        <div class="quote"><slot></slot></div>
+        <div class="author">
+          <span class="name">${author}</span>
+          <span class="meta">${role}${company ? ` · ${company}` : ''}</span>
+        </div>
+      </article>
+    `;
+  }
+}
+
+registerComponent('af-testimonial', AfriTestimonial);
+export default AfriTestimonial;

package/components/ui-avatar.js

@@ -0,0 +1,79 @@
+/**
+ * AfriCode UI Avatar
+ *
+ * User avatar component with initials fallback and optional badge.
+ * @module components/ui-avatar
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriUIAvatar extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['src', 'initials', 'size', 'badge'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const src = this.getAttribute('src');
+    const initials = this.getAttribute('initials') || 'AC';
+    const size = this.getAttribute('size') || 'md';
+    const dimensions = size === 'sm' ? '32px' : size === 'lg' ? '64px' : '48px';
+    const badge = this.getAttribute('badge');
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host { display: inline-flex; }
+
+        .avatar {
+          position: relative;
+          width: ${dimensions};
+          height: ${dimensions};
+          border-radius: 999px;
+          overflow: hidden;
+          background: linear-gradient(135deg, #1eb53a, #fcd116);
+          color: #fff;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-weight: 700;
+          font-size: ${size === 'sm' ? '0.85rem' : size === 'lg' ? '1.25rem' : '1rem'};
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          display: block;
+        }
+
+        .badge {
+          position: absolute;
+          bottom: -2px;
+          right: -2px;
+          background: #2563eb;
+          color: #fff;
+          border-radius: 999px;
+          padding: 0.15rem 0.45rem;
+          font-size: 0.65rem;
+          font-weight: 700;
+        }
+      </style>
+
+      <div class="avatar">
+        ${src ? html`<img src="${src}" alt="Avatar" />` : html`<span>${initials}</span>`}
+        ${badge ? html`<span class="badge">${badge}</span>` : ''}
+      </div>
+    `;
+  }
+}
+
+registerComponent('af-ui-avatar', AfriUIAvatar);
+export default AfriUIAvatar;

package/components/ui-chip.js

@@ -0,0 +1,87 @@
+/**
+ * AfriCode UI Chip
+ *
+ * Compact pill element for tags, status chips, and inline metadata.
+ * @module components/ui-chip
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriUIChip extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['variant', 'size', 'dismissible'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  connectedCallback() {
+    this.render();
+    this._attachListeners();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+    this._attachListeners();
+  }
+
+  _attachListeners() {
+    const button = this.shadowRoot.querySelector('.chip button');
+    if (!button) return;
+    button.addEventListener('click', (event) => {
+      event.stopPropagation();
+      this.emit('af-ui-chip-dismiss', {});
+    });
+  }
+
+  render() {
+    const variant = this.getAttribute('variant') || 'neutral';
+    const size = this.getAttribute('size') || 'md';
+    const dismissible = this.hasAttribute('dismissible');
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host { display: inline-flex; }
+
+        .chip {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.5rem;
+          border-radius: 999px;
+          padding: ${size === 'sm' ? '0.35rem 0.75rem' : '0.45rem 1rem'};
+          font-size: ${size === 'sm' ? '0.75rem' : '0.85rem'};
+          font-weight: 600;
+          background: #f8fafc;
+          color: #0f172a;
+          border: 1px solid rgba(15, 23, 42, 0.08);
+        }
+
+        .chip.primary { background: #eff6ff; color: #1d4ed8; }
+        .chip.success { background: #dcfce7; color: #166534; }
+        .chip.warning { background: #fef3c7; color: #92400e; }
+        .chip.danger { background: #fee2e2; color: #991b1b; }
+        .chip.neutral { background: #f8fafc; color: #0f172a; }
+
+        button {
+          border: none;
+          background: transparent;
+          color: inherit;
+          cursor: pointer;
+          font-size: 0.95rem;
+          padding: 0;
+          line-height: 1;
+        }
+      </style>
+
+      <span class="chip ${variant}">
+        <slot></slot>
+        ${dismissible ? html`<button aria-label="Remove">×</button>` : ''}
+      </span>
+    `;
+  }
+}
+
+registerComponent('af-ui-chip', AfriUIChip);
+export default AfriUIChip;

package/components/ui-popover.js

@@ -0,0 +1,84 @@
+/**
+ * AfriCode UI Popover
+ *
+ * A small popover panel for contextual actions and menus.
+ * @module components/ui-popover
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriUIPopover extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['label', 'open'];
+  }
+
+  constructor() {
+    super();
+    this._open = this.hasAttribute('open');
+    this.render();
+  }
+
+  connectedCallback() {
+    this._attachListeners();
+  }
+
+  attributeChangedCallback() {
+    this._open = this.hasAttribute('open');
+    this.render();
+    this._attachListeners();
+  }
+
+  _attachListeners() {
+    const trigger = this.shadowRoot.querySelector('.trigger');
+    if (!trigger) return;
+    trigger.addEventListener('click', () => {
+      this._open = !this._open;
+      if (this._open) this.setAttribute('open', '');
+      else this.removeAttribute('open');
+      this.render();
+      this._attachListeners();
+    });
+  }
+
+  render() {
+    const label = this.getAttribute('label') || 'Open';
+    const open = this._open;
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host { position: relative; display: inline-flex; }
+        .trigger {
+          border: 1px solid #cbd5e1;
+          border-radius: 0.75rem;
+          padding: 0.75rem 1rem;
+          background: #fff;
+          color: #111827;
+          cursor: pointer;
+          font-family: 'Inter', sans-serif;
+          font-weight: 600;
+        }
+        .panel {
+          position: absolute;
+          top: calc(100% + 0.5rem);
+          right: 0;
+          min-width: 220px;
+          background: #ffffff;
+          border: 1px solid #e5e7eb;
+          box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
+          border-radius: 1rem;
+          padding: 1rem;
+          opacity: ${open ? '1' : '0'};
+          visibility: ${open ? 'visible' : 'hidden'};
+          transform: ${open ? 'translateY(0)' : 'translateY(-10px)'};
+          transition: opacity 180ms ease, transform 180ms ease;
+          z-index: 10;
+        }
+      </style>
+      <button class="trigger" type="button">${label}</button>
+      <div class="panel"><slot></slot></div>
+    `;
+  }
+}
+
+registerComponent('af-ui-popover', AfriUIPopover);
+export default AfriUIPopover;

package/components/ui-progress-ring.js

@@ -0,0 +1,60 @@
+/**
+ * AfriCode UI Progress Ring
+ *
+ * Circular progress indicator that pairs well with dashboard metrics.
+ * @module components/ui-progress-ring
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriUIProgressRing extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['value', 'size', 'stroke', 'label'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const value = Number(this.getAttribute('value') || 0);
+    const size = Number(this.getAttribute('size') || 96);
+    const stroke = Number(this.getAttribute('stroke') || 10);
+    const label = this.getAttribute('label') || '';
+    const radius = (size - stroke) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const dashoffset = circumference - (value / 100) * circumference;
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host { display: inline-flex; align-items: center; justify-content: center; }
+        .ring { position: relative; width: ${size}px; height: ${size}px; }
+        svg { transform: rotate(-90deg); width: 100%; height: 100%; }
+        circle { fill: none; stroke-width: ${stroke}; stroke-linecap: round; }
+        .bg { stroke: rgba(15, 23, 42, 0.12); }
+        .progress { stroke: #2563eb; stroke-dasharray: ${circumference}; stroke-dashoffset: ${dashoffset}; transition: stroke-dashoffset 0.35s ease; }
+        .label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #111827; font-family: 'Inter', sans-serif; }
+        .value { font-size: 1rem; font-weight: 700; }
+        .subtitle { font-size: 0.75rem; color: #6b7280; }
+      </style>
+      <div class="ring" role="progressbar" aria-valuenow="${value}" aria-valuemin="0" aria-valuemax="100">
+        <svg viewBox="0 0 ${size} ${size}">
+          <circle class="bg" cx="${size/2}" cy="${size/2}" r="${radius}" />
+          <circle class="progress" cx="${size/2}" cy="${size/2}" r="${radius}" />
+        </svg>
+        <div class="label">
+          <div class="value">${value}%</div>
+          ${label ? html`<div class="subtitle">${label}</div>` : ''}
+        </div>
+      </div>
+    `;
+  }
+}
+
+registerComponent('af-ui-progress-ring', AfriUIProgressRing);
+export default AfriUIProgressRing;

package/components/ui-select.js

@@ -0,0 +1,85 @@
+/**
+ * AfriCode UI Select
+ *
+ * A styled select component with label support and custom appearance.
+ * @module components/ui-select
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriUISelect extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['label', 'placeholder', 'disabled', 'error'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  connectedCallback() {
+    this._attachListeners();
+    this.loadStyles();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+    this._attachListeners();
+  }
+
+  _attachListeners() {
+    const select = this.shadowRoot.querySelector('select');
+    if (!select) return;
+    select.addEventListener('change', () => {
+      this.emit('af-ui-select', { value: select.value });
+    });
+  }
+
+  render() {
+    const label = this.getAttribute('label') || '';
+    const placeholder = this.getAttribute('placeholder') || 'Select an option';
+    const disabled = this.hasAttribute('disabled');
+    const error = this.getAttribute('error') || '';
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host { display: block; font-family: 'Inter', system-ui, sans-serif; }
+
+        .field { display: grid; gap: 0.5rem; }
+        label { font-size: 0.85rem; font-weight: 600; color: #111827; }
+        select {
+          width: 100%;
+          border: 1px solid #d1d5db;
+          border-radius: 0.75rem;
+          padding: 0.9rem 1rem;
+          background: #fff;
+          color: #111827;
+          appearance: none;
+          font-size: 0.95rem;
+          outline: none;
+          transition: border-color 150ms ease, box-shadow 150ms ease;
+        }
+        select:focus {
+          border-color: #2563eb;
+          box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
+        }
+        select:disabled { background: #f8fafc; cursor: not-allowed; }
+
+        .hint { font-size: 0.85rem; color: #6b7280; }
+        .error { color: #dc2626; font-size: 0.8rem; min-height: 1rem; }
+      </style>
+
+      <div class="field">
+        ${label ? html`<label>${label}</label>` : ''}
+        <select ${disabled ? 'disabled' : ''}>
+          <option disabled selected hidden>${placeholder}</option>
+          <slot></slot>
+        </select>
+        <div class="error">${error}</div>
+      </div>
+    `;
+  }
+}
+
+registerComponent('af-ui-select', AfriUISelect);
+export default AfriUISelect;

package/components/ui-stat.js

@@ -0,0 +1,75 @@
+/**
+ * AfriCode UI Stat
+ *
+ * Metric summary card for dashboard statistics.
+ * @module components/ui-stat
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriUIStat extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['label', 'value', 'delta', 'trend'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const label = this.getAttribute('label') || 'Metric';
+    const value = this.getAttribute('value') || '0';
+    const delta = this.getAttribute('delta') || '';
+    const trend = this.getAttribute('trend') || 'neutral';
+
+    const trendColor = trend === 'positive' ? '#16a34a' : trend === 'negative' ? '#dc2626' : '#475569';
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host { display: block; font-family: 'Inter', sans-serif; }
+        .stat {
+          display: grid;
+          gap: 0.5rem;
+          padding: 1.25rem;
+          border-radius: 1rem;
+          background: #ffffff;
+          border: 1px solid #e5e7eb;
+          box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
+        }
+        .label {
+          font-size: 0.85rem;
+          font-weight: 700;
+          color: #475569;
+          text-transform: uppercase;
+          letter-spacing: 0.08em;
+        }
+        .value {
+          font-size: 2.25rem;
+          font-weight: 800;
+          color: #0f172a;
+        }
+        .delta {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.35rem;
+          color: ${trendColor};
+          font-size: 0.95rem;
+          font-weight: 700;
+        }
+      </style>
+      <div class="stat">
+        <div class="label">${label}</div>
+        <div class="value">${value}</div>
+        ${delta ? html`<div class="delta">${delta}</div>` : ''}
+      </div>
+    `;
+  }
+}
+
+registerComponent('af-ui-stat', AfriUIStat);
+export default AfriUIStat;

package/components/ui-table.js

@@ -0,0 +1,69 @@
+/**
+ * AfriCode UI Table
+ *
+ * A styled table component for dashboard and data display.
+ * @module components/ui-table
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriUITable extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['striped', 'bordered', 'compact'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const striped = this.hasAttribute('striped');
+    const bordered = this.hasAttribute('bordered');
+    const compact = this.hasAttribute('compact');
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host { display: block; overflow-x: auto; }
+        table {
+          width: 100%;
+          border-collapse: collapse;
+          min-width: 100%;
+          font-family: 'Inter', system-ui, sans-serif;
+          color: #0f172a;
+        }
+        th, td {
+          padding: ${compact ? '0.75rem' : '1rem'};
+          text-align: left;
+          border-bottom: 1px solid #e5e7eb;
+        }
+        th {
+          font-size: 0.85rem;
+          font-weight: 700;
+          color: #334155;
+          text-transform: uppercase;
+          letter-spacing: 0.04em;
+        }
+        tbody tr {
+          background: #fff;
+        }
+        tbody tr:nth-child(even) {
+          background: ${striped ? '#f8fafc' : '#fff'};
+        }
+        table.bordered th, table.bordered td {
+          border: 1px solid #e5e7eb;
+        }
+      </style>
+      <table class="${bordered ? 'bordered' : ''}">
+        <slot></slot>
+      </table>
+    `;
+  }
+}
+
+registerComponent('af-ui-table', AfriUITable);
+export default AfriUITable;