nativecorejs 0.1.0

package/dist/components/nc-switch.js

@@ -0,0 +1,194 @@
+import { Component, defineComponent } from '../core/component.js';
+export class NcSwitch extends Component {
+    static useShadowDOM = true;
+    static attributeOptions = {
+        variant: ['primary', 'success', 'danger'],
+        size: ['sm', 'md', 'lg'],
+        'label-position': ['left', 'right']
+    };
+    static get observedAttributes() {
+        return ['label', 'label-position', 'name', 'value', 'checked', 'disabled', 'size', 'variant'];
+    }
+    template() {
+        const label = this.getAttribute('label') || '';
+        const labelPosition = this.getAttribute('label-position') || 'right';
+        const disabled = this.hasAttribute('disabled');
+        const labelElement = label ? `<span class="label">${label}</span>` : '<slot></slot>';
+        const track = `<span class="track"><span class="thumb"></span></span>`;
+        return `
+            <style>
+                :host {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: var(--nc-spacing-sm, 0.5rem);
+                    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+                    user-select: none;
+                    font-family: var(--nc-font-family);
+                    opacity: ${disabled ? '0.5' : '1'};
+                }
+                .switch-wrapper {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: var(--nc-spacing-sm, 0.5rem);
+                }
+                input[type="checkbox"] {
+                    position: absolute;
+                    opacity: 0;
+                    width: 0;
+                    height: 0;
+                    pointer-events: none;
+                }
+                .track {
+                    display: inline-flex;
+                    align-items: center;
+                    flex-shrink: 0;
+                    border-radius: var(--nc-radius-full, 9999px);
+                    background: var(--nc-gray-300, #d1d5db);
+                    transition: background var(--nc-transition-fast, 160ms ease);
+                    position: relative;
+                    box-sizing: border-box;
+                    padding: 2px;
+                }
+                :host([size="sm"]) .track {
+                    width: 32px;
+                    height: 18px;
+                }
+                :host([size="sm"]) .thumb {
+                    width: 14px;
+                    height: 14px;
+                }
+                .track {
+                    width: 44px;
+                    height: 24px;
+                }
+                .thumb {
+                    width: 20px;
+                    height: 20px;
+                }
+                :host([size="md"]) .track {
+                    width: 44px;
+                    height: 24px;
+                }
+                :host([size="md"]) .thumb {
+                    width: 20px;
+                    height: 20px;
+                }
+                :host([size="lg"]) .track {
+                    width: 56px;
+                    height: 30px;
+                }
+                :host([size="lg"]) .thumb {
+                    width: 26px;
+                    height: 26px;
+                }
+                .thumb {
+                    border-radius: var(--nc-radius-full, 9999px);
+                    background: var(--nc-white, #ffffff);
+                    box-shadow: var(--nc-shadow-sm, 0 1px 2px rgba(0,0,0,0.08));
+                    transition: transform var(--nc-transition-fast, 160ms ease);
+                    transform: translateX(0);
+                    flex-shrink: 0;
+                }
+                :host([checked]) .thumb {
+                    transform: translateX(calc(100% - 0px));
+                }
+                :host([size="sm"][checked]) .thumb {
+                    transform: translateX(14px);
+                }
+                :host([size="md"][checked]) .thumb,
+                :host([checked]:not([size])) .thumb {
+                    transform: translateX(20px);
+                }
+                :host([size="lg"][checked]) .thumb {
+                    transform: translateX(26px);
+                }
+                :host([checked]) .track {
+                    background: var(--nc-primary, #10b981);
+                }
+                :host([variant="success"][checked]) .track {
+                    background: var(--nc-success, #10b981);
+                }
+                :host([variant="danger"][checked]) .track {
+                    background: var(--nc-danger, #ef4444);
+                }
+                :host(:not([disabled])) .track:hover {
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+                :host([variant="success"]:not([disabled])) .track:hover {
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+                :host([variant="danger"]:not([disabled])) .track:hover {
+                    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+                }
+                :host(:focus-visible) .track {
+                    outline: 2px solid var(--nc-primary, #10b981);
+                    outline-offset: 2px;
+                }
+                .label {
+                    font-size: var(--nc-font-size-base, 1rem);
+                    color: var(--nc-text, #111827);
+                    line-height: var(--nc-line-height-normal, 1.5);
+                }
+                :host([size="sm"]) .label {
+                    font-size: var(--nc-font-size-sm, 0.875rem);
+                }
+                :host([size="lg"]) .label {
+                    font-size: var(--nc-font-size-lg, 1.125rem);
+                }
+            </style>
+
+            <input type="hidden" name="${this.getAttribute('name') || ''}" value="${this.hasAttribute('checked') ? (this.getAttribute('value') || 'on') : ''}" />
+            <span class="switch-wrapper">
+                ${labelPosition === 'left' ? labelElement : ''}
+                ${track}
+                ${labelPosition !== 'left' ? labelElement : ''}
+            </span>
+        `;
+    }
+    onMount() {
+        if (!this.hasAttribute('tabindex')) {
+            this.setAttribute('tabindex', '0');
+        }
+        this.setAttribute('role', 'switch');
+        this.setAttribute('aria-checked', String(this.hasAttribute('checked')));
+        this.addEventListener('click', () => {
+            if (this.hasAttribute('disabled'))
+                return;
+            this.toggle();
+        });
+        this.addEventListener('keydown', (event) => {
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+                if (!this.hasAttribute('disabled'))
+                    this.toggle();
+            }
+        });
+    }
+    toggle() {
+        if (this.hasAttribute('checked')) {
+            this.removeAttribute('checked');
+        }
+        else {
+            this.setAttribute('checked', '');
+        }
+        this.setAttribute('aria-checked', String(this.hasAttribute('checked')));
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                checked: this.hasAttribute('checked'),
+                value: this.getAttribute('value') || 'on',
+                name: this.getAttribute('name') || ''
+            }
+        }));
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.render();
+            if (name === 'checked') {
+                this.setAttribute('aria-checked', String(this.hasAttribute('checked')));
+            }
+        }
+    }
+}
+defineComponent('nc-switch', NcSwitch);

package/dist/components/nc-tab-item.d.ts

@@ -0,0 +1,39 @@
+/**
+ * NativeCore Tab Item Component (nc-tab-item)
+ *
+ * A single content panel inside an nc-tabs container.
+ * Visibility is driven entirely by the `active` attribute set by the parent
+ * nc-tabs - no JS show/hide logic required here.
+ *
+ * Attributes:
+ *   label    - Text shown in the tab bar button (read by nc-tabs)
+ *   active   - Boolean. Present = panel visible. Managed by nc-tabs.
+ *   disabled - Boolean. Prevents the tab from being selected.
+ *
+ * Slots:
+ *   default  - Any content for this panel.
+ *
+ * Usage:
+ *   <nc-tabs>
+ *     <nc-tab-item label="Overview">...</nc-tab-item>
+ *     <nc-tab-item label="Settings">...</nc-tab-item>
+ *     <nc-tab-item label="Logs" disabled>...</nc-tab-item>
+ *   </nc-tabs>
+ *
+ * Events emitted:
+ *   (none - nc-tabs owns all interaction events)
+ */
+import { Component } from '../core/component.js';
+export declare class NcTabItem extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    template(): string;
+    /**
+     * Override to suppress re-renders - :host([active]) CSS handles show/hide,
+     * and label/disabled changes are handled by nc-tabs rebuilding its bar.
+     * A full re-render would needlessly flash slot content on every tab click.
+     */
+    attributeChangedCallback(_name: string, _oldValue: string | null, _newValue: string | null): void;
+    onMount(): void;
+    onUnmount(): void;
+}

package/dist/components/nc-tab-item.js

@@ -0,0 +1,127 @@
+/**
+ * NativeCore Tab Item Component (nc-tab-item)
+ *
+ * A single content panel inside an nc-tabs container.
+ * Visibility is driven entirely by the `active` attribute set by the parent
+ * nc-tabs - no JS show/hide logic required here.
+ *
+ * Attributes:
+ *   label    - Text shown in the tab bar button (read by nc-tabs)
+ *   active   - Boolean. Present = panel visible. Managed by nc-tabs.
+ *   disabled - Boolean. Prevents the tab from being selected.
+ *
+ * Slots:
+ *   default  - Any content for this panel.
+ *
+ * Usage:
+ *   <nc-tabs>
+ *     <nc-tab-item label="Overview">...</nc-tab-item>
+ *     <nc-tab-item label="Settings">...</nc-tab-item>
+ *     <nc-tab-item label="Logs" disabled>...</nc-tab-item>
+ *   </nc-tabs>
+ *
+ * Events emitted:
+ *   (none - nc-tabs owns all interaction events)
+ */
+import { Component, defineComponent } from '../core/component.js';
+import { html } from '../utils/templates.js';
+export class NcTabItem extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['label', 'active', 'disabled'];
+    }
+    template() {
+        return html `
+            <style>
+                :host {
+                    display: none;
+                }
+
+                :host([active]) {
+                    display: block;
+                }
+
+                /* ── Animation variants driven by data-nc-transition set by nc-tabs ── */
+                :host([active]) .panel {
+                    animation: nc-tab-fade 250ms ease both;
+                }
+
+                :host([data-nc-transition="fade"][active]) .panel {
+                    animation: nc-tab-fade 250ms ease both;
+                }
+
+                :host([data-nc-transition="slide-up"][active]) .panel {
+                    animation: nc-tab-slide-up 300ms ease both;
+                }
+
+                :host([data-nc-transition="slide-right"][active]) .panel {
+                    animation: nc-tab-slide-right 300ms ease both;
+                }
+
+                :host([data-nc-transition="slide-left"][active]) .panel {
+                    animation: nc-tab-slide-left 300ms ease both;
+                }
+
+                :host([data-nc-transition="slide-down"][active]) .panel {
+                    animation: nc-tab-slide-down 300ms ease both;
+                }
+
+                :host([data-nc-transition="none"][active]) .panel {
+                    animation: none;
+                }
+
+                /* ── Keyframes ───────────────────────────────────────────────── */
+                @keyframes nc-tab-fade {
+                    from { opacity: 0; }
+                    to   { opacity: 1; }
+                }
+
+                @keyframes nc-tab-slide-up {
+                    from { opacity: 0; transform: translateY(20px); }
+                    to   { opacity: 1; transform: translateY(0); }
+                }
+
+                @keyframes nc-tab-slide-right {
+                    from { opacity: 0; transform: translateX(-24px); }
+                    to   { opacity: 1; transform: translateX(0); }
+                }
+
+                @keyframes nc-tab-slide-left {
+                    from { opacity: 0; transform: translateX(24px); }
+                    to   { opacity: 1; transform: translateX(0); }
+                }
+
+                @keyframes nc-tab-slide-down {
+                    from { opacity: 0; transform: translateY(-20px); }
+                    to   { opacity: 1; transform: translateY(0); }
+                }
+
+                .panel {
+                    box-sizing: border-box;
+                    padding: var(--nc-spacing-lg);
+                    background: var(--nc-bg-secondary);
+                    border-radius: var(--nc-radius-lg);
+                }
+
+                @media (max-width: 640px) {
+                    .panel {
+                        padding: var(--nc-spacing-sm);
+                        border-radius: var(--nc-radius-md);
+                    }
+                }
+            </style>
+            <div class="panel"><slot></slot></div>
+        `;
+    }
+    /**
+     * Override to suppress re-renders - :host([active]) CSS handles show/hide,
+     * and label/disabled changes are handled by nc-tabs rebuilding its bar.
+     * A full re-render would needlessly flash slot content on every tab click.
+     */
+    attributeChangedCallback(_name, _oldValue, _newValue) {
+        // intentionally empty - CSS selectors handle all visual state
+    }
+    onMount() { }
+    onUnmount() { }
+}
+defineComponent('nc-tab-item', NcTabItem);

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

@@ -0,0 +1,44 @@
+/**
+ * NcTable Component - lightweight sortable data table
+ *
+ * Renders a table from JSON data with optional sorting, striping, compact mode,
+ * sticky header, and simple empty state. Zero dependencies.
+ *
+ * Attributes:
+ *   columns   - JSON array of column defs:
+ *               [{ key, label?, sortable?, align?, width?, format? }]
+ *               format: 'text'(default)|'number'|'currency'|'date'|'badge'
+ *   rows      - JSON array of row objects
+ *   sortable  - boolean - enable sorting on all columns unless column.sortable=false
+ *   striped   - boolean - alternating row backgrounds
+ *   compact   - boolean - reduced cell padding
+ *   sticky-header - boolean - sticky thead
+ *   empty     - empty state text (default: 'No data available')
+ *   max-height - CSS value to constrain height and enable scrolling
+ *
+ * Events:
+ *   sort  - CustomEvent<{ key: string; direction: 'asc'|'desc' }>
+ *   row-click - CustomEvent<{ row: Record<string, unknown>; index: number }>
+ *
+ * Usage:
+ *   <nc-table
+ *      sortable
+ *      striped
+ *      columns='[{"key":"name","label":"Name"},{"key":"role","label":"Role"}]'
+ *      rows='[{"name":"Alice","role":"Admin"},{"name":"Bob","role":"Editor"}]'>
+ *   </nc-table>
+ */
+import { Component } from '../core/component.js';
+export declare class NcTable extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    private _sortKey;
+    private _sortDir;
+    private _parseColumns;
+    private _parseRows;
+    private _sortedRows;
+    private _fmt;
+    template(): string;
+    onMount(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/components/nc-table.js

@@ -0,0 +1,265 @@
+/**
+ * NcTable Component - lightweight sortable data table
+ *
+ * Renders a table from JSON data with optional sorting, striping, compact mode,
+ * sticky header, and simple empty state. Zero dependencies.
+ *
+ * Attributes:
+ *   columns   - JSON array of column defs:
+ *               [{ key, label?, sortable?, align?, width?, format? }]
+ *               format: 'text'(default)|'number'|'currency'|'date'|'badge'
+ *   rows      - JSON array of row objects
+ *   sortable  - boolean - enable sorting on all columns unless column.sortable=false
+ *   striped   - boolean - alternating row backgrounds
+ *   compact   - boolean - reduced cell padding
+ *   sticky-header - boolean - sticky thead
+ *   empty     - empty state text (default: 'No data available')
+ *   max-height - CSS value to constrain height and enable scrolling
+ *
+ * Events:
+ *   sort  - CustomEvent<{ key: string; direction: 'asc'|'desc' }>
+ *   row-click - CustomEvent<{ row: Record<string, unknown>; index: number }>
+ *
+ * Usage:
+ *   <nc-table
+ *      sortable
+ *      striped
+ *      columns='[{"key":"name","label":"Name"},{"key":"role","label":"Role"}]'
+ *      rows='[{"name":"Alice","role":"Admin"},{"name":"Bob","role":"Editor"}]'>
+ *   </nc-table>
+ */
+import { Component, defineComponent } from '../core/component.js';
+function esc(s) {
+    return String(s ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+export class NcTable extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['columns', 'rows', 'sortable', 'striped', 'compact', 'sticky-header', 'empty', 'max-height'];
+    }
+    _sortKey = '';
+    _sortDir = 'asc';
+    _parseColumns() {
+        try {
+            const raw = this.getAttribute('columns') ?? '[]';
+            const cols = JSON.parse(raw);
+            return Array.isArray(cols) ? cols : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    _parseRows() {
+        try {
+            const raw = this.getAttribute('rows') ?? '[]';
+            const rows = JSON.parse(raw);
+            return Array.isArray(rows) ? rows : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    _sortedRows(rows, columns) {
+        if (!this._sortKey)
+            return rows;
+        const col = columns.find(c => c.key === this._sortKey);
+        if (!col)
+            return rows;
+        const dir = this._sortDir === 'asc' ? 1 : -1;
+        return [...rows].sort((a, b) => {
+            const va = a[this._sortKey];
+            const vb = b[this._sortKey];
+            if (va == null && vb == null)
+                return 0;
+            if (va == null)
+                return -1 * dir;
+            if (vb == null)
+                return 1 * dir;
+            if (typeof va === 'number' && typeof vb === 'number')
+                return (va - vb) * dir;
+            const sa = String(va).toLowerCase();
+            const sb = String(vb).toLowerCase();
+            return sa.localeCompare(sb) * dir;
+        });
+    }
+    _fmt(value, col) {
+        if (value == null)
+            return '';
+        switch (col.format) {
+            case 'number':
+                return typeof value === 'number' ? String(value) : esc(value);
+            case 'currency':
+                return typeof value === 'number'
+                    ? new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value)
+                    : esc(value);
+            case 'date': {
+                const d = new Date(String(value));
+                return isNaN(d.getTime()) ? esc(value) : d.toLocaleDateString();
+            }
+            case 'badge':
+                return `<span class="badge">${esc(value)}</span>`;
+            default:
+                return esc(value);
+        }
+    }
+    template() {
+        const columns = this._parseColumns();
+        const rows = this._sortedRows(this._parseRows(), columns);
+        const striped = this.hasAttribute('striped');
+        const compact = this.hasAttribute('compact');
+        const stickyHeader = this.hasAttribute('sticky-header');
+        const emptyText = this.getAttribute('empty') ?? 'No data available';
+        const maxHeight = this.getAttribute('max-height') ?? '';
+        const sortableAll = this.hasAttribute('sortable');
+        const tableRows = rows.length === 0
+            ? `<tr><td class="empty" colspan="${Math.max(columns.length, 1)}">${esc(emptyText)}</td></tr>`
+            : rows.map((row, rowIndex) => `
+                <tr data-row-index="${rowIndex}">
+                    ${columns.map(col => {
+                const align = col.align ?? 'left';
+                return `<td style="text-align:${align}">${this._fmt(row[col.key], col)}</td>`;
+            }).join('')}
+                </tr>
+            `).join('');
+        const headers = columns.map(col => {
+            const align = col.align ?? 'left';
+            const sortable = sortableAll && col.sortable !== false;
+            const active = this._sortKey === col.key;
+            const arrow = active ? (this._sortDir === 'asc' ? '▲' : '▼') : '';
+            return `
+                <th style="text-align:${align};${col.width ? `width:${col.width};` : ''}">
+                    <button class="head-btn ${sortable ? 'is-sortable' : ''} ${active ? 'is-active' : ''}" type="button" ${sortable ? `data-sort-key="${col.key}"` : 'disabled'}>
+                        <span>${esc(col.label ?? col.key)}</span>
+                        <span class="sort-indicator">${arrow}</span>
+                    </button>
+                </th>
+            `;
+        }).join('');
+        return `
+            <style>
+                :host { display: block; font-family: var(--nc-font-family); }
+                .wrap {
+                    border: 1px solid var(--nc-border);
+                    border-radius: var(--nc-radius-lg);
+                    overflow: auto;
+                    background: var(--nc-bg);
+                    ${maxHeight ? `max-height:${maxHeight};` : ''}
+                }
+                table {
+                    width: 100%;
+                    border-collapse: collapse;
+                    min-width: 480px;
+                }
+                thead th {
+                    position: ${stickyHeader ? 'sticky' : 'static'};
+                    top: 0;
+                    z-index: 1;
+                    background: var(--nc-bg-secondary);
+                    border-bottom: 1px solid var(--nc-border);
+                    padding: 0;
+                    font-size: var(--nc-font-size-xs);
+                    text-transform: uppercase;
+                    letter-spacing: .04em;
+                    color: var(--nc-text-muted);
+                }
+                .head-btn {
+                    width: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    gap: 8px;
+                    padding: ${compact ? '10px 12px' : '14px 16px'};
+                    background: none;
+                    border: none;
+                    cursor: default;
+                    font: inherit;
+                    color: inherit;
+                    text-align: inherit;
+                }
+                .head-btn.is-sortable { cursor: pointer; }
+                .head-btn.is-sortable:hover { background: rgba(0,0,0,.03); }
+                .head-btn.is-active { color: var(--nc-text); }
+                tbody tr {
+                    transition: background var(--nc-transition-fast);
+                    cursor: pointer;
+                }
+                tbody tr:hover { background: rgba(0,0,0,.02); }
+                ${striped ? 'tbody tr:nth-child(even) { background: var(--nc-bg-secondary); }' : ''}
+                td {
+                    padding: ${compact ? '10px 12px' : '14px 16px'};
+                    border-bottom: 1px solid var(--nc-border);
+                    font-size: var(--nc-font-size-sm);
+                    color: var(--nc-text-secondary);
+                    vertical-align: top;
+                }
+                tbody tr:last-child td { border-bottom: none; }
+                .empty {
+                    text-align: center;
+                    color: var(--nc-text-muted);
+                    padding: 28px 16px;
+                    cursor: default;
+                }
+                .badge {
+                    display: inline-flex;
+                    align-items: center;
+                    padding: 2px 8px;
+                    border-radius: 99px;
+                    background: rgba(var(--nc-primary-rgb, 99,102,241), .12);
+                    color: var(--nc-primary);
+                    font-size: var(--nc-font-size-xs);
+                    font-weight: var(--nc-font-weight-medium);
+                }
+                .sort-indicator {
+                    min-width: 1em;
+                    font-size: 10px;
+                    text-align: center;
+                    color: var(--nc-text-muted);
+                }
+            </style>
+            <div class="wrap">
+                <table role="table">
+                    <thead><tr>${headers}</tr></thead>
+                    <tbody>${tableRows}</tbody>
+                </table>
+            </div>
+        `;
+    }
+    onMount() {
+        this.shadowRoot.addEventListener('click', (e) => {
+            const sortBtn = e.target.closest('[data-sort-key]');
+            if (sortBtn) {
+                const key = sortBtn.dataset.sortKey ?? '';
+                if (this._sortKey === key)
+                    this._sortDir = this._sortDir === 'asc' ? 'desc' : 'asc';
+                else {
+                    this._sortKey = key;
+                    this._sortDir = 'asc';
+                }
+                this.render();
+                this.dispatchEvent(new CustomEvent('sort', {
+                    detail: { key: this._sortKey, direction: this._sortDir }, bubbles: true, composed: true,
+                }));
+                return;
+            }
+            const row = e.target.closest('tbody tr[data-row-index]');
+            if (row) {
+                const index = parseInt(row.dataset.rowIndex ?? '-1', 10);
+                const rows = this._sortedRows(this._parseRows(), this._parseColumns());
+                if (index >= 0 && rows[index]) {
+                    this.dispatchEvent(new CustomEvent('row-click', {
+                        detail: { row: rows[index], index }, bubbles: true, composed: true,
+                    }));
+                }
+            }
+        });
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted)
+            this.render();
+    }
+}
+defineComponent('nc-table', NcTable);