@africode/core 5.0.6 → 5.0.7

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;

package/components/ui-textarea.js

@@ -0,0 +1,84 @@
+/**
+ * AfriCode UI Textarea
+ *
+ * Styled textarea component for forms and content entry.
+ * @module components/ui-textarea
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriUITextarea extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['label', 'placeholder', 'rows', 'disabled', 'error'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  connectedCallback() {
+    this._attachListeners();
+    this.loadStyles();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+    this._attachListeners();
+  }
+
+  _attachListeners() {
+    const textarea = this.shadowRoot.querySelector('textarea');
+    if (!textarea) return;
+    textarea.addEventListener('input', () => {
+      this.emit('af-ui-textarea', { value: textarea.value });
+    });
+  }
+
+  render() {
+    const label = this.getAttribute('label') || '';
+    const placeholder = this.getAttribute('placeholder') || '';
+    const rows = this.getAttribute('rows') || '4';
+    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; }
+        textarea {
+          width: 100%;
+          min-height: 120px;
+          border: 1px solid #d1d5db;
+          border-radius: 0.75rem;
+          padding: 1rem;
+          font-size: 0.95rem;
+          font-family: inherit;
+          color: #111827;
+          resize: vertical;
+          background: #fff;
+          transition: border-color 150ms ease, box-shadow 150ms ease;
+        }
+        textarea:focus {
+          border-color: #2563eb;
+          box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
+          outline: none;
+        }
+        textarea:disabled { background: #f8fafc; cursor: not-allowed; }
+
+        .error { color: #dc2626; font-size: 0.8rem; min-height: 1rem; }
+      </style>
+
+      <div class="field">
+        ${label ? html`<label>${label}</label>` : ''}
+        <textarea rows="${rows}" placeholder="${placeholder}" ${disabled ? 'disabled' : ''}></textarea>
+        <div class="error">${error}</div>
+      </div>
+    `;
+  }
+}
+
+registerComponent('af-ui-textarea', AfriUITextarea);
+export default AfriUITextarea;

package/components/ui-tooltip.js

@@ -0,0 +1,66 @@
+/**
+ * AfriCode UI Tooltip
+ *
+ * Lightweight tooltip component for inline help and hover hints.
+ * @module components/ui-tooltip
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriUITooltip extends AfriCodeComponent {
+  static get observedAttributes() {
+    return ['text', 'position'];
+  }
+
+  constructor() {
+    super();
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  render() {
+    const text = this.getAttribute('text') || '';
+    const position = this.getAttribute('position') || 'top';
+
+    this.shadowRoot.innerHTML = html`
+      <style>
+        :host { position: relative; display: inline-flex; }
+
+        .tooltip {
+          position: absolute;
+          white-space: nowrap;
+          padding: 0.55rem 0.75rem;
+          background: rgba(15, 23, 42, 0.95);
+          color: #fff;
+          border-radius: 0.65rem;
+          font-size: 0.75rem;
+          transform: translateY(-8px);
+          opacity: 0;
+          pointer-events: none;
+          transition: opacity 0.2s ease, transform 0.2s ease;
+          z-index: 100;
+        }
+        :host(:hover) .tooltip { opacity: 1; transform: translateY(0); }
+        .tooltip::after {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 0;
+          border-style: solid;
+        }
+        .tooltip.top { bottom: 100%; left: 50%; transform: translate(-50%, -8px); }
+        .tooltip.top::after { top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px 6px 0 6px; border-color: rgba(15,23,42,0.95) transparent transparent transparent; }
+        .tooltip.bottom { top: 100%; left: 50%; transform: translate(-50%, 8px); }
+        .tooltip.bottom::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 0 6px 6px 6px; border-color: transparent transparent rgba(15,23,42,0.95) transparent; }
+      </style>
+      <slot></slot>
+      <div class="tooltip ${position}" role="tooltip">${text}</div>
+    `;
+  }
+}
+
+registerComponent('af-ui-tooltip', AfriUITooltip);
+export default AfriUITooltip;

package/components/video-player.js

@@ -0,0 +1,22 @@
+/**
+ * AfriCode Video Player
+ *
+ * Lightweight video player wrapper.
+ */
+
+import { AfriCodeComponent, registerComponent, html } from './base.js';
+
+export class AfriVideoPlayer extends AfriCodeComponent {
+  static get observedAttributes(){return ['src','poster']}
+  constructor(){ super(); this.render(); }
+  attributeChangedCallback(){ this.render(); }
+  render(){ const src=this.getAttribute('src')||''; const poster=this.getAttribute('poster')||''; this.shadowRoot.innerHTML = html`
+    <style>
+      video{width:100%;border-radius:12px;background:#000}
+    </style>
+    <video controls src="${src}" poster="${poster}"></video>
+  ` }
+}
+
+registerComponent('af-video-player', AfriVideoPlayer);
+export default AfriVideoPlayer;