@africode/core 5.0.5 → 5.0.7

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;

package/components/ui-tabs.js

@@ -0,0 +1,99 @@
+/**
+ * AfriCode UI Tabs
+ *
+ * A simple tabbed interface for content panels.
+ * @module components/ui-tabs
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriUITabs extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['active'];
+  }
+
+  constructor() {
+    super();
+    this._active = this.getAttribute('active') || '0';
+    this.render();
+  }
+
+  connectedCallback() {
+    this._attachListeners();
+  }
+
+  attributeChangedCallback() {
+    this._active = this.getAttribute('active') || '0';
+    this.render();
+    this._attachListeners();
+  }
+
+  _attachListeners() {
+    const tabButtons = this.shadowRoot.querySelectorAll('[role="tab"]');
+    tabButtons.forEach((tab) => {
+      tab.addEventListener('click', () => {
+        const index = tab.getAttribute('data-index');
+        this.setAttribute('active', index);
+      });
+    });
+  }
+
+  render() {
+    const active = this._active;
+    const tabs = Array.from(this.children).filter((child) => child.tagName.toLowerCase() === 'ui-tab-panel');
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host { display: block; font-family: 'Inter', system-ui, sans-serif; }
+
+        .tab-list {
+          display: flex;
+          gap: 0.5rem;
+          border-bottom: 1px solid #e5e7eb;
+          margin-bottom: 1rem;
+        }
+        button {
+          all: unset;
+          cursor: pointer;
+          padding: 0.75rem 1rem;
+          border-radius: 999px;
+          color: #334155;
+          font-weight: 600;
+        }
+        button.active {
+          background: #2563eb;
+          color: #fff;
+        }
+        .panel { display: none; }
+        .panel.active { display: block; }
+      </style>
+      <div class="tab-list" role="tablist">
+        ${tabs.map((tab, index) => html`
+          <button
+            role="tab"
+            data-index="${index}"
+            class="${String(index) === String(active) ? 'active' : ''}"
+            aria-selected="${String(index) === String(active)}"
+          >
+            ${tab.getAttribute('label') || `Tab ${index + 1}`}
+          </button>
+        `).join('')}
+      </div>
+      ${tabs.map((tab, index) => html`
+        <div class="panel ${String(index) === String(active) ? 'active' : ''}" role="tabpanel">
+          ${tab.innerHTML}
+        </div>
+      `).join('')}
+    `;
+  }
+}
+
+export class AfriUITabPanel extends AfriCodeComponent {
+  render() {
+    this.shadowRoot.innerHTML = html`<slot></slot>`;
+  }
+}
+
+registerComponent('af-ui-tabs', AfriUITabs);
+registerComponent('ui-tab-panel', AfriUITabPanel);
+export default AfriUITabs;

package/components/ui-tag.js

@@ -0,0 +1,64 @@
+/**
+ * AfriCode UI Tag
+ *
+ * Simple inline tag for metadata, status, and category labels.
+ * @module components/ui-tag
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriUITag extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['variant', 'size'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const variant = this.getAttribute('variant') || 'secondary';
+    const size = this.getAttribute('size') || 'md';
+    const sizes = {
+      sm: '0.25rem 0.6rem',
+      md: '0.35rem 0.8rem',
+      lg: '0.5rem 1rem'
+    };
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host { display: inline-block; font-family: 'Inter', sans-serif; }
+
+        .tag {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 0.35rem;
+          padding: ${sizes[size]};
+          border-radius: 999px;
+          font-size: ${size === 'sm' ? '0.75rem' : size === 'lg' ? '0.95rem' : '0.85rem'};
+          font-weight: 600;
+          color: #111827;
+          background: #f8fafc;
+          border: 1px solid rgba(15, 23, 42, 0.08);
+        }
+
+        .tag.primary { background: #dbeafe; color: #1e40af; }
+        .tag.success { background: #d1fae5; color: #14532d; }
+        .tag.warning { background: #fde68a; color: #92400e; }
+        .tag.danger { background: #fecaca; color: #991b1b; }
+        .tag.secondary { background: #f3f4f6; color: #1f2937; }
+      </style>
+
+      <span class="tag ${variant}"><slot></slot></span>
+    `;
+  }
+}
+
+registerComponent('af-ui-tag', AfriUITag);
+export default AfriUITag;