@africode/core 5.0.5 → 5.0.7

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;