nativecorejs 0.1.0

package/dist/components/nc-otp-input.js

@@ -0,0 +1,227 @@
+/**
+ * NcOtpInput Component - One-time password / verification code input
+ *
+ * Attributes:
+ *   length       - number of boxes (default: 6)
+ *   type         - 'numeric'(default)|'alphanumeric'|'alpha'
+ *   separator    - insert a visual dash/space separator after this position (e.g. "3" for 3+3)
+ *   disabled     - boolean
+ *   masked       - boolean - mask input like a password
+ *   autofocus    - boolean - focus first box on mount
+ *   label        - accessible label
+ *   error        - error message
+ *   hint         - helper text
+ *
+ * Value (read/write via property):
+ *   el.value     - get/set current OTP string
+ *
+ * Events:
+ *   change   - CustomEvent<{ value: string; complete: boolean }>
+ *   complete - CustomEvent<{ value: string }> - fired when all boxes are filled
+ *
+ * Usage:
+ *   <nc-otp-input length="6" type="numeric"></nc-otp-input>
+ */
+import { Component, defineComponent } from '../core/component.js';
+export class NcOtpInput extends Component {
+    static useShadowDOM = true;
+    _values = [];
+    static get observedAttributes() { return ['length', 'disabled', 'masked', 'error']; }
+    get value() { return this._values.join(''); }
+    set value(v) {
+        const len = this._length();
+        this._values = v.slice(0, len).split('');
+        while (this._values.length < len)
+            this._values.push('');
+        this.render();
+        this._bindEvents();
+    }
+    _length() { return parseInt(this.getAttribute('length') ?? '6', 10); }
+    template() {
+        const len = this._length();
+        const masked = this.hasAttribute('masked');
+        const disabled = this.hasAttribute('disabled');
+        const label = this.getAttribute('label') ?? '';
+        const error = this.getAttribute('error') ?? '';
+        const hint = this.getAttribute('hint') ?? '';
+        const separator = parseInt(this.getAttribute('separator') ?? '0', 10);
+        while (this._values.length < len)
+            this._values.push('');
+        const boxesHtml = Array.from({ length: len }, (_, i) => {
+            const val = this._values[i] ?? '';
+            const showSep = separator > 0 && i === separator - 1 && i < len - 1;
+            return `
+                <input
+                    class="box"
+                    type="${masked ? 'password' : 'text'}"
+                    inputmode="${masked ? 'text' : 'numeric'}"
+                    maxlength="1"
+                    data-idx="${i}"
+                    value="${val}"
+                    ${disabled ? 'disabled' : ''}
+                    autocomplete="one-time-code"
+                    aria-label="${label ? label + ' ' : ''}digit ${i + 1}"
+                />
+                ${showSep ? '<span class="sep">-</span>' : ''}
+            `;
+        }).join('');
+        return `
+            <style>
+                :host { display: block; font-family: var(--nc-font-family); }
+                .wrap    { display: flex; align-items: center; gap: var(--nc-spacing-xs); }
+                .box {
+                    width: 44px;
+                    height: 52px;
+                    text-align: center;
+                    font-size: var(--nc-font-size-xl);
+                    font-weight: var(--nc-font-weight-semibold);
+                    color: var(--nc-text);
+                    background: var(--nc-bg);
+                    border: 2px solid ${error ? 'var(--nc-danger)' : 'var(--nc-border)'};
+                    border-radius: var(--nc-radius-md);
+                    outline: none;
+                    transition: border-color var(--nc-transition-fast), box-shadow var(--nc-transition-fast);
+                    caret-color: transparent;
+                    padding: 0;
+                }
+                .box:focus {
+                    border-color: var(--nc-primary);
+                    box-shadow: 0 0 0 3px rgba(var(--nc-primary-rgb, 99,102,241),.2);
+                }
+                .box:disabled { opacity: 0.5; cursor: not-allowed; }
+                .box.filled   { border-color: var(--nc-primary); background: var(--nc-bg-secondary); }
+                .sep {
+                    color: var(--nc-text-muted);
+                    font-size: var(--nc-font-size-lg);
+                    font-weight: var(--nc-font-weight-medium);
+                    user-select: none;
+                    padding: 0 2px;
+                }
+                .hint  { font-size: var(--nc-font-size-xs); color: var(--nc-text-muted); margin-top: 6px; }
+                .error { font-size: var(--nc-font-size-xs); color: var(--nc-danger);      margin-top: 6px; }
+            </style>
+            <div class="wrap" role="group" aria-label="${label || 'OTP input'}">
+                ${boxesHtml}
+            </div>
+            ${error ? `<p class="error">${error}</p>` : hint ? `<p class="hint">${hint}</p>` : ''}
+        `;
+    }
+    onMount() {
+        if (this.hasAttribute('autofocus')) {
+            requestAnimationFrame(() => this._boxAt(0)?.focus());
+        }
+        this._bindEvents();
+        this._applyFilledClass();
+    }
+    _bindEvents() {
+        const boxes = this._boxes();
+        boxes.forEach((box, idx) => {
+            // Remove stale listeners by replacing (simple approach via re-render)
+            box.addEventListener('focus', () => box.select());
+            box.addEventListener('input', () => {
+                const type = this.getAttribute('type') ?? 'numeric';
+                const input = box;
+                let val = input.value;
+                // Filter by type
+                if (type === 'numeric')
+                    val = val.replace(/\D/g, '');
+                if (type === 'alpha')
+                    val = val.replace(/[^a-zA-Z]/g, '');
+                if (type === 'alphanumeric')
+                    val = val.replace(/[^a-zA-Z0-9]/g, '');
+                val = val.slice(-1).toUpperCase();
+                input.value = val;
+                this._values[idx] = val;
+                this._applyFilledClass();
+                this._emitChange();
+                if (val && idx < boxes.length - 1)
+                    this._boxAt(idx + 1)?.focus();
+            });
+            box.addEventListener('keydown', (e) => {
+                const input = box;
+                if (e.key === 'Backspace') {
+                    if (input.value) {
+                        input.value = '';
+                        this._values[idx] = '';
+                        this._applyFilledClass();
+                        this._emitChange();
+                    }
+                    else if (idx > 0) {
+                        this._boxAt(idx - 1)?.focus();
+                    }
+                    e.preventDefault();
+                }
+                else if (e.key === 'ArrowLeft' && idx > 0)
+                    this._boxAt(idx - 1)?.focus();
+                else if (e.key === 'ArrowRight' && idx < boxes.length - 1)
+                    this._boxAt(idx + 1)?.focus();
+                else if (e.key === 'Delete') {
+                    input.value = '';
+                    this._values[idx] = '';
+                    this._applyFilledClass();
+                    this._emitChange();
+                    e.preventDefault();
+                }
+            });
+            // Handle multi-character paste without blocking the native paste event.
+            box.addEventListener('paste', (e) => {
+                const text = e.clipboardData?.getData('text') ?? '';
+                if (!text)
+                    return;
+                let filtered = text;
+                const type = this.getAttribute('type') ?? 'numeric';
+                if (type === 'numeric')
+                    filtered = text.replace(/\D/g, '');
+                if (type === 'alpha')
+                    filtered = text.replace(/[^a-zA-Z]/g, '');
+                if (type === 'alphanumeric')
+                    filtered = text.replace(/[^a-zA-Z0-9]/g, '');
+                requestAnimationFrame(() => {
+                    const chars = filtered.toUpperCase().slice(0, this._length() - idx).split('');
+                    chars.forEach((ch, offset) => {
+                        const targetIndex = idx + offset;
+                        this._values[targetIndex] = ch;
+                        const targetBox = this._boxAt(targetIndex);
+                        if (targetBox)
+                            targetBox.value = ch;
+                    });
+                    this._applyFilledClass();
+                    this._emitChange();
+                    const nextFocus = Math.min(idx + chars.length, boxes.length - 1);
+                    this._boxAt(nextFocus)?.focus();
+                });
+            });
+        });
+    }
+    _applyFilledClass() {
+        this._boxes().forEach((box, i) => {
+            box.classList.toggle('filled', !!(this._values[i]));
+        });
+    }
+    _emitChange() {
+        const value = this.value;
+        const complete = value.length === this._length() && !value.includes('');
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: { value, complete }, bubbles: true, composed: true,
+        }));
+        if (complete) {
+            this.dispatchEvent(new CustomEvent('complete', {
+                detail: { value }, bubbles: true, composed: true,
+            }));
+        }
+    }
+    _boxes() {
+        return Array.from(this.shadowRoot.querySelectorAll('.box'));
+    }
+    _boxAt(i) {
+        return this.shadowRoot.querySelector(`.box[data-idx="${i}"]`);
+    }
+    attributeChangedCallback(name, oldVal, newVal) {
+        if (oldVal === newVal || !this._mounted)
+            return;
+        this.render();
+        this._bindEvents();
+        this._applyFilledClass();
+    }
+}
+defineComponent('nc-otp-input', NcOtpInput);

package/dist/components/nc-pagination.d.ts

@@ -0,0 +1,28 @@
+/**
+ * NcPagination Component
+ *
+ * Attributes:
+ *   - page: number - current page (1-based, default: 1)
+ *   - total: number - total pages (required)
+ *   - siblings: number - pages shown on each side of current (default: 1)
+ *   - show-first-last: boolean - show First/Last buttons
+ *   - disabled: boolean
+ *   - size: 'sm'|'md'|'lg' (default: 'md')
+ *   - variant: 'default'|'outline' (default: 'default')
+ *
+ * Events:
+ *   - change: CustomEvent<{ page: number }>
+ *
+ * Usage:
+ *   <nc-pagination page="3" total="20"></nc-pagination>
+ */
+import { Component } from '../core/component.js';
+export declare class NcPagination extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    private _buildPages;
+    template(): string;
+    onMount(): void;
+    private _bindEvents;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/components/nc-pagination.js

@@ -0,0 +1,171 @@
+/**
+ * NcPagination Component
+ *
+ * Attributes:
+ *   - page: number - current page (1-based, default: 1)
+ *   - total: number - total pages (required)
+ *   - siblings: number - pages shown on each side of current (default: 1)
+ *   - show-first-last: boolean - show First/Last buttons
+ *   - disabled: boolean
+ *   - size: 'sm'|'md'|'lg' (default: 'md')
+ *   - variant: 'default'|'outline' (default: 'default')
+ *
+ * Events:
+ *   - change: CustomEvent<{ page: number }>
+ *
+ * Usage:
+ *   <nc-pagination page="3" total="20"></nc-pagination>
+ */
+import { Component, defineComponent } from '../core/component.js';
+export class NcPagination extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['page', 'total', 'siblings', 'show-first-last', 'disabled', 'size', 'variant'];
+    }
+    _buildPages(current, total, siblings) {
+        if (total <= 7)
+            return Array.from({ length: total }, (_, i) => i + 1);
+        const left = Math.max(2, current - siblings);
+        const right = Math.min(total - 1, current + siblings);
+        const pages = [1];
+        if (left > 2)
+            pages.push('...');
+        for (let i = left; i <= right; i++)
+            pages.push(i);
+        if (right < total - 1)
+            pages.push('...');
+        pages.push(total);
+        return pages;
+    }
+    template() {
+        const current = Number(this.getAttribute('page') || 1);
+        const total = Number(this.getAttribute('total') || 1);
+        const siblings = Number(this.getAttribute('siblings') ?? 1);
+        const showFirstLast = this.hasAttribute('show-first-last');
+        const disabled = this.hasAttribute('disabled');
+        const pages = this._buildPages(current, total, siblings);
+        const atFirst = current <= 1;
+        const atLast = current >= total;
+        const navBtn = (dir, label, dis) => `
+            <button class="btn btn--nav" data-dir="${dir}" ${dis || disabled ? 'disabled' : ''} aria-label="${label}">
+                ${dir === 'prev' || dir === 'first'
+            ? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M${dir === 'first' ? '12 3L7 8l5 5M7 3L2 8l5 5' : '10 3L5 8l5 5'}" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+            : `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M${dir === 'last' ? '4 3l5 5-5 5M9 3l5 5-5 5' : '6 3l5 5-5 5'}" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`}
+            </button>`;
+        return `
+            <style>
+                :host { display: block; font-family: var(--nc-font-family); }
+
+                .pagination {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 4px;
+                    flex-wrap: wrap;
+                    opacity: ${disabled ? '0.5' : '1'};
+                    pointer-events: ${disabled ? 'none' : 'auto'};
+                }
+
+                .btn {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    border: 1px solid var(--nc-border);
+                    background: var(--nc-bg);
+                    color: var(--nc-text);
+                    cursor: pointer;
+                    border-radius: var(--nc-radius-sm, 6px);
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-sm);
+                    transition: background var(--nc-transition-fast), color var(--nc-transition-fast), border-color var(--nc-transition-fast);
+                    min-width: 36px;
+                    height: 36px;
+                    padding: 0 6px;
+                }
+
+                :host([size="sm"]) .btn { min-width: 28px; height: 28px; font-size: var(--nc-font-size-xs); }
+                :host([size="lg"]) .btn { min-width: 44px; height: 44px; font-size: var(--nc-font-size-base); }
+
+                .btn:hover:not(:disabled):not(.btn--active) { background: var(--nc-bg-secondary); border-color: var(--nc-border-dark); }
+                .btn:disabled { opacity: 0.4; cursor: not-allowed; }
+
+                .btn--active {
+                    background: var(--nc-primary);
+                    color: #fff;
+                    border-color: var(--nc-primary);
+                    font-weight: var(--nc-font-weight-semibold);
+                    pointer-events: none;
+                }
+
+                :host([variant="outline"]) .btn--active {
+                    background: transparent;
+                    color: var(--nc-primary);
+                }
+
+                .ellipsis {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    min-width: 36px;
+                    height: 36px;
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text-muted);
+                }
+            </style>
+            <nav aria-label="Pagination" class="pagination">
+                ${showFirstLast ? navBtn('first', 'First page', atFirst) : ''}
+                ${navBtn('prev', 'Previous page', atFirst)}
+                ${pages.map(p => p === '...'
+            ? `<span class="ellipsis" aria-hidden="true">...</span>`
+            : `<button class="btn${p === current ? ' btn--active' : ''}" data-page="${p}" aria-label="Page ${p}" aria-current="${p === current ? 'page' : 'false'}">${p}</button>`).join('')}
+                ${navBtn('next', 'Next page', atLast)}
+                ${showFirstLast ? navBtn('last', 'Last page', atLast) : ''}
+            </nav>
+        `;
+    }
+    onMount() {
+        this._bindEvents();
+    }
+    _bindEvents() {
+        this.$('.pagination').addEventListener('click', (e) => {
+            const btn = e.target.closest('button');
+            if (!btn || btn.disabled)
+                return;
+            const current = Number(this.getAttribute('page') || 1);
+            const total = Number(this.getAttribute('total') || 1);
+            let next = current;
+            if (btn.dataset.page) {
+                next = Number(btn.dataset.page);
+            }
+            else {
+                switch (btn.dataset.dir) {
+                    case 'first':
+                        next = 1;
+                        break;
+                    case 'prev':
+                        next = Math.max(1, current - 1);
+                        break;
+                    case 'next':
+                        next = Math.min(total, current + 1);
+                        break;
+                    case 'last':
+                        next = total;
+                        break;
+                }
+            }
+            if (next !== current) {
+                this.setAttribute('page', String(next));
+                this.dispatchEvent(new CustomEvent('change', {
+                    bubbles: true, composed: true,
+                    detail: { page: next }
+                }));
+            }
+        });
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted) {
+            this.render();
+            this._bindEvents();
+        }
+    }
+}
+defineComponent('nc-pagination', NcPagination);

package/dist/components/nc-popover.d.ts

@@ -0,0 +1,58 @@
+/**
+ * NcPopover Component - floating panel anchored to a trigger element
+ *
+ * More flexible than a dropdown: supports arbitrary slot content,
+ * arrow pointer, multiple placement options, and click/hover triggers.
+ *
+ * Attributes:
+ *   placement - 'top'|'bottom'(default)|'left'|'right'
+ *               + '-start' or '-end' suffix: 'bottom-start'|'top-end' etc.
+ *   trigger   - 'click'(default)|'hover'|'focus'|'manual'
+ *   open      - boolean - controlled open state
+ *   offset    - gap between anchor and popover in px (default: 8)
+ *   arrow     - boolean - show arrow pointer (default: true)
+ *   width     - popover width CSS value (default: 'auto')
+ *   max-width - CSS value (default: '320px')
+ *   close-on-outside - boolean(default true) - close on outside click
+ *   disabled  - boolean
+ *   hover-delay - ms before hover-trigger opens (default: 200)
+ *
+ * Slots:
+ *   trigger  - the anchor element
+ *   (default) - popover content
+ *
+ * Events:
+ *   open  - popover opened
+ *   close - popover closed
+ *
+ * Methods:
+ *   el.show() / el.hide() / el.toggle()
+ *
+ * Usage:
+ *   <nc-popover placement="bottom-start">
+ *     <nc-button slot="trigger">Info</nc-button>
+ *     <div style="padding:12px">
+ *       <p>Popover content here.</p>
+ *     </div>
+ *   </nc-popover>
+ */
+import { Component } from '../core/component.js';
+export declare class NcPopover extends Component {
+    static useShadowDOM: boolean;
+    private _open;
+    private _hoverTimer;
+    private _outside;
+    static get observedAttributes(): string[];
+    template(): string;
+    onMount(): void;
+    onUnmount(): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    private _bindTrigger;
+    private _position;
+    private _setupOutside;
+    private _cleanupOutside;
+    private _cleanup;
+    attributeChangedCallback(n: string, o: string, v: string): void;
+}