nativecorejs 0.1.0

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

@@ -0,0 +1,142 @@
+/**
+ * NcNavItem Component - sidebar / navigation link with icon, label, badge, active state
+ *
+ * Attributes:
+ *   href       - link URL; if omitted renders as a <button>
+ *   label      - visible text (can also use default slot)
+ *   icon       - preset icon name OR raw SVG string (see below)
+ *   active     - boolean - mark as active
+ *   disabled   - boolean
+ *   badge      - badge count (number string); shown as a pill on the right
+ *   badge-variant - 'primary'(default)|'success'|'danger'|'warning'
+ *   indent     - indentation level for nested nav (default: 0)
+ *   target     - anchor target (default: '_self')
+ *   exact      - boolean - only activate on exact URL match (router integration)
+ *
+ * Slots:
+ *   icon   - custom icon (overrides icon attribute)
+ *   (default) - label text (overrides label attribute)
+ *   badge  - custom badge content
+ *
+ * Events:
+ *   nav-click - CustomEvent<{ href: string | null }> - bubbles from both <a> and <button>
+ *
+ * Usage:
+ *   <nc-nav-item href="/dashboard" label="Dashboard" icon="home" active></nc-nav-item>
+ *   <nc-nav-item href="/users" label="Users" icon="users" badge="14"></nc-nav-item>
+ */
+import { Component, defineComponent } from '../core/component.js';
+const NAV_ICONS = {
+    home: `<path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1H14v-5h-4v5H4a1 1 0 0 1-1-1V9.5z"/>`,
+    dashboard: `<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>`,
+    users: `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
+    settings: `<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>`,
+    chart: `<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>`,
+    inbox: `<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>`,
+    file: `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>`,
+    folder: `<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>`,
+    bell: `<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>`,
+    lock: `<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`,
+    logout: `<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>`,
+    help: `<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
+};
+const svgWrap = (paths) => `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${paths}</svg>`;
+export class NcNavItem extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() { return ['active', 'disabled', 'badge', 'href']; }
+    template() {
+        const href = this.getAttribute('href');
+        const label = this.getAttribute('label') ?? '';
+        const iconName = this.getAttribute('icon') ?? '';
+        const active = this.hasAttribute('active');
+        const disabled = this.hasAttribute('disabled');
+        const badge = this.getAttribute('badge') ?? '';
+        const badgeVariant = this.getAttribute('badge-variant') ?? 'primary';
+        const indent = parseInt(this.getAttribute('indent') ?? '0', 10);
+        const target = this.getAttribute('target') ?? '_self';
+        const iconHtml = NAV_ICONS[iconName]
+            ? svgWrap(NAV_ICONS[iconName])
+            : iconName.startsWith('<') ? iconName : '';
+        const badgeColors = {
+            primary: ['var(--nc-primary)', 'var(--nc-white)'],
+            success: ['var(--nc-success)', 'var(--nc-white)'],
+            danger: ['var(--nc-danger)', 'var(--nc-white)'],
+            warning: ['var(--nc-warning)', 'var(--nc-text)'],
+        };
+        const [bgColor, textColor] = badgeColors[badgeVariant] ?? badgeColors.primary;
+        const paddingLeft = `calc(var(--nc-spacing-md) + ${indent * 16}px)`;
+        const tag = href ? 'a' : 'button';
+        const tagAttrs = href
+            ? `href="${href}" target="${target}"`
+            : `type="button"`;
+        return `
+            <style>
+                :host { display: block; }
+                ${tag} {
+                    display: flex;
+                    align-items: center;
+                    gap: var(--nc-spacing-sm);
+                    width: 100%;
+                    padding: 9px ${paddingLeft === 'calc(var(--nc-spacing-md) + 0px)' ? 'var(--nc-spacing-md)' : `var(--nc-spacing-md) var(--nc-spacing-md) var(--nc-spacing-md) ${paddingLeft}`};
+                    border-radius: var(--nc-radius-md);
+                    text-decoration: none;
+                    font-family: var(--nc-font-family);
+                    font-size: var(--nc-font-size-sm);
+                    font-weight: ${active ? 'var(--nc-font-weight-semibold)' : 'var(--nc-font-weight-normal)'};
+                    color: ${active ? 'var(--nc-primary)' : disabled ? 'var(--nc-text-muted)' : 'var(--nc-text-secondary)'};
+                    background: ${active ? 'rgba(var(--nc-primary-rgb, 99,102,241), 0.1)' : 'transparent'};
+                    border: none;
+                    cursor: ${disabled ? 'not-allowed' : 'pointer'};
+                    opacity: ${disabled ? 0.5 : 1};
+                    text-align: left;
+                    outline: none;
+                    transition: background var(--nc-transition-fast), color var(--nc-transition-fast);
+                    user-select: none;
+                    position: relative;
+                }
+                ${active ? `${tag}::before { content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 3px; background: var(--nc-primary); border-radius: 0 2px 2px 0; }` : ''}
+                ${tag}:hover:not([disabled]) {
+                    background: ${active ? 'rgba(var(--nc-primary-rgb, 99,102,241), 0.14)' : 'var(--nc-bg-secondary)'};
+                    color: ${active ? 'var(--nc-primary)' : 'var(--nc-text)'};
+                }
+                ${tag}:focus-visible { outline: 2px solid var(--nc-primary); outline-offset: -2px; }
+                .icon { flex-shrink: 0; display: flex; opacity: ${active ? 1 : 0.65}; }
+                .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+                .badge {
+                    flex-shrink: 0;
+                    background: ${bgColor};
+                    color: ${textColor};
+                    font-size: 10px;
+                    font-weight: var(--nc-font-weight-semibold);
+                    line-height: 1;
+                    padding: 2px 6px;
+                    border-radius: 99px;
+                    min-width: 18px;
+                    text-align: center;
+                }
+            </style>
+            <${tag} ${tagAttrs} ${disabled ? (href ? 'aria-disabled="true"' : 'disabled') : ''} aria-current="${active ? 'page' : 'false'}">
+                ${iconHtml ? `<span class="icon">${iconHtml}<slot name="icon"></slot></span>` : '<slot name="icon"></slot>'}
+                <span class="label">${label}<slot></slot></span>
+                ${badge ? `<span class="badge">${badge}<slot name="badge"></slot></span>` : '<slot name="badge"></slot>'}
+            </${tag}>
+        `;
+    }
+    onMount() {
+        this.shadowRoot.addEventListener('click', (e) => {
+            if (this.hasAttribute('disabled')) {
+                e.preventDefault();
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('nav-click', {
+                detail: { href: this.getAttribute('href') },
+                bubbles: true, composed: true,
+            }));
+        });
+    }
+    attributeChangedCallback(n, o, v) {
+        if (o !== v && this._mounted)
+            this.render();
+    }
+}
+defineComponent('nc-nav-item', NcNavItem);

package/dist/components/nc-number-input.d.ts

@@ -0,0 +1,22 @@
+import { Component } from '../core/component.js';
+export declare class NcNumberInput extends Component {
+    static useShadowDOM: boolean;
+    static attributeOptions: {
+        variant: string[];
+        size: string[];
+    };
+    static get observedAttributes(): string[];
+    private holdTimer;
+    private holdInterval;
+    private getNumber;
+    private getCurrentValue;
+    private clamp;
+    template(): string;
+    onMount(): void;
+    private bindEvents;
+    private step;
+    private setValue;
+    private updateButtons;
+    onUnmount(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

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

@@ -0,0 +1,270 @@
+import { Component, defineComponent } from '../core/component.js';
+export class NcNumberInput extends Component {
+    static useShadowDOM = true;
+    static attributeOptions = {
+        variant: ['default', 'filled'],
+        size: ['sm', 'md', 'lg']
+    };
+    static get observedAttributes() {
+        return ['name', 'value', 'min', 'max', 'step', 'placeholder', 'disabled', 'readonly', 'size', 'variant'];
+    }
+    holdTimer = null;
+    holdInterval = null;
+    getNumber(attr, fallback) {
+        const value = this.getAttribute(attr);
+        return value !== null && value !== '' ? Number(value) : fallback;
+    }
+    getCurrentValue() {
+        const value = this.getAttribute('value');
+        return value !== null && value !== '' ? Number(value) : 0;
+    }
+    clamp(value) {
+        const min = this.getAttribute('min');
+        const max = this.getAttribute('max');
+        if (min !== null && value < Number(min))
+            return Number(min);
+        if (max !== null && value > Number(max))
+            return Number(max);
+        return value;
+    }
+    template() {
+        const value = this.getCurrentValue();
+        const placeholder = this.getAttribute('placeholder') || '';
+        const disabled = this.hasAttribute('disabled');
+        const readonly = this.hasAttribute('readonly');
+        const min = this.getAttribute('min');
+        const max = this.getAttribute('max');
+        const step = this.getNumber('step', 1);
+        const atMin = min !== null && value <= Number(min);
+        const atMax = max !== null && value >= Number(max);
+        return `
+            <style>
+                :host { display: inline-flex; font-family: var(--nc-font-family); }
+                .wrap {
+                    display: inline-flex;
+                    align-items: stretch;
+                    border: var(--nc-input-border, 1px solid #d1d5db);
+                    border-radius: var(--nc-input-radius, 0.5rem);
+                    overflow: hidden;
+                    transition: border-color var(--nc-transition-fast, 160ms ease), box-shadow var(--nc-transition-fast, 160ms ease);
+                    background: var(--nc-bg, #ffffff);
+                    opacity: ${disabled ? '0.5' : '1'};
+                    width: 100%;
+                }
+                :host([variant="filled"]) .wrap {
+                    background: var(--nc-bg-tertiary, #f3f4f6);
+                    border-color: transparent;
+                }
+                .wrap:focus-within {
+                    border-color: var(--nc-input-focus-border, #10b981);
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+                .btn {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-shrink: 0;
+                    background: var(--nc-bg-secondary, #f8fafc);
+                    border: none;
+                    cursor: ${disabled || readonly ? 'not-allowed' : 'pointer'};
+                    color: var(--nc-text-muted, #6b7280);
+                    transition: background var(--nc-transition-fast, 160ms ease), color var(--nc-transition-fast, 160ms ease);
+                    user-select: none;
+                    -webkit-user-select: none;
+                    padding: 0;
+                }
+                :host([size="sm"]) .btn { width: 28px; }
+                :host([size="lg"]) .btn { width: 40px; }
+                .btn { width: 34px; }
+                .btn:hover:not(:disabled):not([aria-disabled="true"]) {
+                    background: var(--nc-bg-tertiary, #f3f4f6);
+                    color: var(--nc-text, #111827);
+                }
+                .btn:active:not(:disabled):not([aria-disabled="true"]) {
+                    background: var(--nc-border, #d1d5db);
+                }
+                .btn[aria-disabled="true"] {
+                    opacity: 0.35;
+                    cursor: not-allowed;
+                }
+                input[type="number"] {
+                    flex: 1;
+                    min-width: 0;
+                    border: none;
+                    outline: none;
+                    background: transparent;
+                    color: var(--nc-text, #111827);
+                    font-size: var(--nc-font-size-base, 1rem);
+                    font-family: var(--nc-font-family);
+                    text-align: center;
+                    padding: 0;
+                    cursor: ${disabled ? 'not-allowed' : 'auto'};
+                    -moz-appearance: textfield;
+                }
+                input[type="number"]::-webkit-outer-spin-button,
+                input[type="number"]::-webkit-inner-spin-button {
+                    -webkit-appearance: none;
+                    margin: 0;
+                }
+                input[type="number"]::placeholder { color: var(--nc-text-muted, #6b7280); }
+                :host([size="sm"]) input { font-size: var(--nc-font-size-sm, 0.875rem); padding: var(--nc-spacing-xs, 0.25rem) 0; }
+                :host([size="md"]) input,
+                :host input { padding: var(--nc-spacing-sm, 0.5rem) 0; }
+                :host([size="lg"]) input { font-size: var(--nc-font-size-lg, 1.125rem); padding: var(--nc-spacing-md, 1rem) 0; }
+            </style>
+
+            <div class="wrap">
+                <button class="btn btn-dec" type="button" aria-label="Decrease" aria-disabled="${atMin || disabled || readonly}" tabindex="${disabled ? '-1' : '0'}">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+                </button>
+                <input type="number" value="${value}" ${min !== null ? `min="${min}"` : ''} ${max !== null ? `max="${max}"` : ''} step="${step}" ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''} placeholder="${placeholder}" name="${this.getAttribute('name') || ''}" aria-label="${this.getAttribute('name') || 'number'}" />
+                <button class="btn btn-inc" type="button" aria-label="Increase" aria-disabled="${atMax || disabled || readonly}" tabindex="${disabled ? '-1' : '0'}">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" width="14" height="14"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
+                </button>
+            </div>
+        `;
+    }
+    onMount() {
+        this.bindEvents();
+    }
+    bindEvents() {
+        const shadowRoot = this.shadowRoot;
+        if (!shadowRoot)
+            return;
+        const input = shadowRoot.querySelector('input[type="number"]');
+        const decreaseButton = shadowRoot.querySelector('.btn-dec');
+        const increaseButton = shadowRoot.querySelector('.btn-inc');
+        if (!input || !decreaseButton || !increaseButton)
+            return;
+        input.addEventListener('input', () => {
+            const value = this.clamp(Number(input.value));
+            this.updateButtons(value);
+            this.dispatchEvent(new CustomEvent('input', {
+                bubbles: true,
+                composed: true,
+                detail: { value, name: this.getAttribute('name') || '' }
+            }));
+        });
+        input.addEventListener('change', () => {
+            const value = this.clamp(Number(input.value));
+            input.value = String(value);
+            this.setAttribute('value', String(value));
+            this.updateButtons(value);
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: { value, name: this.getAttribute('name') || '' }
+            }));
+        });
+        input.addEventListener('wheel', event => {
+            if (document.activeElement !== this && !this.shadowRoot?.activeElement)
+                return;
+            event.preventDefault();
+            const delta = event.deltaY;
+            if (delta < 0) {
+                this.step(1);
+            }
+            else {
+                this.step(-1);
+            }
+        }, { passive: false });
+        const setupHold = (button, direction) => {
+            button.addEventListener('mousedown', event => {
+                if (event.button !== 0)
+                    return;
+                if (button.getAttribute('aria-disabled') === 'true')
+                    return;
+                this.step(direction);
+                this.holdTimer = setTimeout(() => {
+                    this.holdInterval = setInterval(() => this.step(direction), 80);
+                }, 400);
+            });
+        };
+        setupHold(decreaseButton, -1);
+        setupHold(increaseButton, 1);
+        const stopHold = () => {
+            if (this.holdTimer) {
+                clearTimeout(this.holdTimer);
+                this.holdTimer = null;
+            }
+            if (this.holdInterval) {
+                clearInterval(this.holdInterval);
+                this.holdInterval = null;
+            }
+        };
+        document.addEventListener('mouseup', stopHold);
+        decreaseButton.addEventListener('click', () => {
+            if (decreaseButton.getAttribute('aria-disabled') !== 'true')
+                this.step(-1);
+        });
+        increaseButton.addEventListener('click', () => {
+            if (increaseButton.getAttribute('aria-disabled') !== 'true')
+                this.step(1);
+        });
+        input.addEventListener('keydown', (event) => {
+            if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                this.step(1);
+            }
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                this.step(-1);
+            }
+        });
+    }
+    step(direction) {
+        if (this.hasAttribute('disabled') || this.hasAttribute('readonly'))
+            return;
+        const step = this.getNumber('step', 1);
+        const decimals = step.toString().split('.')[1]?.length ?? 0;
+        const next = this.clamp(parseFloat((this.getCurrentValue() + direction * step).toFixed(decimals)));
+        this.setValue(next);
+    }
+    setValue(value) {
+        const input = this.shadowRoot?.querySelector('input[type="number"]');
+        if (input)
+            input.value = String(value);
+        this.setAttribute('value', String(value));
+        this.updateButtons(value);
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: { value, name: this.getAttribute('name') || '' }
+        }));
+    }
+    updateButtons(value) {
+        const shadowRoot = this.shadowRoot;
+        if (!shadowRoot)
+            return;
+        const min = this.getAttribute('min');
+        const max = this.getAttribute('max');
+        const decreaseButton = shadowRoot.querySelector('.btn-dec');
+        const increaseButton = shadowRoot.querySelector('.btn-inc');
+        if (decreaseButton)
+            decreaseButton.setAttribute('aria-disabled', String(min !== null && value <= Number(min)));
+        if (increaseButton)
+            increaseButton.setAttribute('aria-disabled', String(max !== null && value >= Number(max)));
+    }
+    onUnmount() {
+        if (this.holdTimer)
+            clearTimeout(this.holdTimer);
+        if (this.holdInterval)
+            clearInterval(this.holdInterval);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'value' && this._mounted) {
+            const input = this.shadowRoot?.querySelector('input[type="number"]');
+            if (input)
+                input.value = newValue || '0';
+            this.updateButtons(Number(newValue || 0));
+            return;
+        }
+        if (this._mounted) {
+            this.render();
+            this.bindEvents();
+        }
+    }
+}
+defineComponent('nc-number-input', NcNumberInput);

package/dist/components/nc-otp-input.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 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 } from '../core/component.js';
+export declare class NcOtpInput extends Component {
+    static useShadowDOM: boolean;
+    private _values;
+    static get observedAttributes(): string[];
+    get value(): string;
+    set value(v: string);
+    private _length;
+    template(): string;
+    onMount(): void;
+    private _bindEvents;
+    private _applyFilledClass;
+    private _emitChange;
+    private _boxes;
+    private _boxAt;
+    attributeChangedCallback(name: string, oldVal: string, newVal: string): void;
+}