nativecorejs 0.1.0

package/dist/components/nc-color-picker.js

@@ -0,0 +1,265 @@
+/**
+ * NcColorPicker Component
+ *
+ * Attributes:
+ *   - name: string
+ *   - value: string - current hex color (default: '#10b981')
+ *   - swatches: JSON string array of hex colors - quick-pick palette
+ *   - show-input: boolean - show hex text input (default: true)
+ *   - disabled: boolean
+ *   - size: 'sm'|'md'|'lg' (default: 'md')
+ *
+ * Events:
+ *   - change: CustomEvent<{ value: string; name: string }>
+ *   - input:  CustomEvent<{ value: string; name: string }>
+ *
+ * Usage:
+ *   <nc-color-picker name="bg" value="#3b82f6"></nc-color-picker>
+ *   <nc-color-picker name="accent" swatches='["#ef4444","#f59e0b","#10b981","#3b82f6","#8b5cf6"]'></nc-color-picker>
+ */
+import { Component, defineComponent } from '../core/component.js';
+const DEFAULT_SWATCHES = [
+    '#ef4444', '#f97316', '#f59e0b', '#eab308',
+    '#84cc16', '#22c55e', '#10b981', '#14b8a6',
+    '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6',
+    '#a855f7', '#ec4899', '#f43f5e', '#64748b',
+    '#000000', '#ffffff',
+];
+export class NcColorPicker extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['name', 'value', 'swatches', 'show-input', 'disabled', 'size'];
+    }
+    _value = '#10b981';
+    constructor() { super(); }
+    _getSwatches() {
+        const raw = this.getAttribute('swatches');
+        if (!raw)
+            return DEFAULT_SWATCHES;
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return DEFAULT_SWATCHES;
+        }
+    }
+    template() {
+        if (!this._mounted) {
+            this._value = this.getAttribute('value') || '#10b981';
+        }
+        const value = this._value;
+        const showInput = this.getAttribute('show-input') !== 'false';
+        const disabled = this.hasAttribute('disabled');
+        const swatches = this._getSwatches();
+        return `
+            <style>
+                :host { display: inline-block; font-family: var(--nc-font-family); }
+
+                .picker {
+                    display: inline-flex;
+                    flex-direction: column;
+                    gap: var(--nc-spacing-sm);
+                    opacity: ${disabled ? '0.5' : '1'};
+                    pointer-events: ${disabled ? 'none' : 'auto'};
+                }
+
+                .swatches {
+                    display: grid;
+                    grid-template-columns: repeat(9, 1fr);
+                    gap: 4px;
+                }
+
+                .swatch {
+                    width: 24px;
+                    height: 24px;
+                    border-radius: 4px;
+                    border: 2px solid transparent;
+                    cursor: pointer;
+                    transition: transform var(--nc-transition-fast), border-color var(--nc-transition-fast);
+                    outline: none;
+                    padding: 0;
+                }
+
+                :host([size="sm"]) .swatch { width: 18px; height: 18px; }
+                :host([size="lg"]) .swatch { width: 30px; height: 30px; }
+
+                .swatch:hover { transform: scale(1.15); }
+                .swatch:focus-visible { border-color: var(--nc-primary) !important; }
+                .swatch.active { border-color: var(--nc-primary) !important; transform: scale(1.1); }
+
+                /* White swatch needs a border to be visible */
+                .swatch--light { border-color: var(--nc-border) !important; }
+                .swatch--light.active { border-color: var(--nc-primary) !important; }
+
+                .input-row {
+                    display: flex;
+                    align-items: center;
+                    gap: var(--nc-spacing-sm);
+                }
+
+                .preview {
+                    width: 32px;
+                    height: 32px;
+                    border-radius: var(--nc-radius-sm, 4px);
+                    border: 1px solid var(--nc-border);
+                    flex-shrink: 0;
+                    position: relative;
+                    overflow: hidden;
+                    cursor: pointer;
+                }
+
+                /* Native color input - hidden but triggered by clicking the preview */
+                .native-input {
+                    position: absolute;
+                    inset: 0;
+                    opacity: 0;
+                    cursor: pointer;
+                    width: 100%;
+                    height: 100%;
+                    padding: 0;
+                    border: none;
+                }
+
+                .hex-input {
+                    flex: 1;
+                    padding: 4px 8px;
+                    background: var(--nc-bg);
+                    border: var(--nc-input-border);
+                    border-radius: var(--nc-input-radius);
+                    color: var(--nc-text);
+                    font-size: var(--nc-font-size-sm);
+                    font-family: var(--nc-font-family);
+                    font-variant-numeric: tabular-nums;
+                    outline: none;
+                    width: 90px;
+                }
+
+                .hex-input:focus { border-color: var(--nc-input-focus-border); box-shadow: 0 0 0 2px rgba(16,185,129,.15); }
+            </style>
+            <div class="picker">
+                <div class="swatches" role="listbox" aria-label="Color swatches">
+                    ${swatches.map(color => {
+            const isLight = this._isLight(color);
+            const active = color.toLowerCase() === value.toLowerCase();
+            return `<button
+                            class="swatch${active ? ' active' : ''}${isLight ? ' swatch--light' : ''}"
+                            style="background:${color}"
+                            data-color="${color}"
+                            aria-label="${color}"
+                            aria-selected="${active}"
+                            role="option"
+                            type="button"
+                            title="${color}"
+                        ></button>`;
+        }).join('')}
+                </div>
+
+                ${showInput ? `
+                <div class="input-row">
+                    <div class="preview" style="background:${value}" title="Click to open color picker">
+                        <input class="native-input" type="color" value="${value}" aria-label="Color picker" />
+                    </div>
+                    <input class="hex-input" type="text" value="${value}" maxlength="7" placeholder="#rrggbb" aria-label="Hex color value" />
+                </div>` : ''}
+
+                <input type="hidden" name="${this.getAttribute('name') || ''}" value="${value}" />
+            </div>
+        `;
+    }
+    _isLight(hex) {
+        const c = hex.replace('#', '');
+        const r = parseInt(c.slice(0, 2), 16);
+        const g = parseInt(c.slice(2, 4), 16);
+        const b = parseInt(c.slice(4, 6), 16);
+        return (r * 299 + g * 587 + b * 114) / 1000 > 200;
+    }
+    onMount() {
+        this._bindEvents();
+    }
+    _bindEvents() {
+        // Swatch clicks
+        this.$('.swatches').addEventListener('click', (e) => {
+            const btn = e.target.closest('[data-color]');
+            if (btn)
+                this._commit(btn.dataset.color);
+        });
+        // Native color input
+        const native = this.$('.native-input');
+        if (native) {
+            native.addEventListener('input', () => {
+                this._commit(native.value, false);
+                const hex = this.$('.hex-input');
+                if (hex)
+                    hex.value = native.value;
+            });
+            native.addEventListener('change', () => this._commit(native.value));
+        }
+        // Hex text input
+        const hexIn = this.$('.hex-input');
+        if (hexIn) {
+            hexIn.addEventListener('input', () => {
+                const v = hexIn.value.trim();
+                if (/^#[0-9a-fA-F]{6}$/.test(v)) {
+                    this._commit(v, false);
+                    const nat = this.$('.native-input');
+                    if (nat)
+                        nat.value = v;
+                }
+            });
+            hexIn.addEventListener('change', () => {
+                const v = hexIn.value.trim();
+                if (/^#[0-9a-fA-F]{6}$/.test(v))
+                    this._commit(v);
+                else
+                    hexIn.value = this._value; // revert invalid
+            });
+        }
+    }
+    _commit(value, fireChange = true) {
+        this._value = value;
+        this.setAttribute('value', value);
+        // Update swatch active states
+        this.$$('.swatch').forEach(s => {
+            const active = s.dataset.color?.toLowerCase() === value.toLowerCase();
+            s.classList.toggle('active', active);
+            s.setAttribute('aria-selected', String(active));
+        });
+        // Update preview
+        const preview = this.$('.preview');
+        if (preview)
+            preview.style.background = value;
+        // Update hidden input
+        const hidden = this.$('input[type="hidden"]');
+        if (hidden)
+            hidden.value = value;
+        const name = this.getAttribute('name') || '';
+        const eventType = fireChange ? 'change' : 'input';
+        this.dispatchEvent(new CustomEvent(eventType, {
+            bubbles: true, composed: true,
+            detail: { value, name }
+        }));
+        if (fireChange) {
+            this.dispatchEvent(new CustomEvent('input', {
+                bubbles: true, composed: true,
+                detail: { value, name }
+            }));
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'value' && this._mounted) {
+            this._value = newValue;
+            this._commit(newValue, false);
+            const hex = this.$('.hex-input');
+            if (hex)
+                hex.value = newValue;
+            return;
+        }
+        if (this._mounted) {
+            this.render();
+            this._bindEvents();
+        }
+    }
+}
+defineComponent('nc-color-picker', NcColorPicker);

package/dist/components/nc-copy-button.d.ts

@@ -0,0 +1,10 @@
+import { Component } from '../core/component.js';
+export declare class NcCopyButton extends Component {
+    static useShadowDOM: boolean;
+    private timer;
+    private copied;
+    template(): string;
+    onMount(): void;
+    private copy;
+    onUnmount(): void;
+}

package/dist/components/nc-copy-button.js

@@ -0,0 +1,94 @@
+import { Component, defineComponent } from '../core/component.js';
+export class NcCopyButton extends Component {
+    static useShadowDOM = true;
+    timer = null;
+    copied = false;
+    template() {
+        const label = this.getAttribute('label') ?? 'Copy';
+        const copiedLabel = this.getAttribute('copied-label') ?? 'Copied!';
+        const variant = this.getAttribute('variant') ?? 'outline';
+        const size = this.getAttribute('size') ?? 'md';
+        const iconOnly = this.hasAttribute('icon-only');
+        const isCopied = this.copied;
+        const padding = size === 'sm' ? '4px 8px' : size === 'lg' ? '8px 20px' : '6px 14px';
+        const fontSize = size === 'sm' ? 'var(--nc-font-size-xs, 0.75rem)' : size === 'lg' ? 'var(--nc-font-size-base, 1rem)' : 'var(--nc-font-size-sm, 0.875rem)';
+        const iconSize = size === 'sm' ? 14 : size === 'lg' ? 20 : 16;
+        const copyIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`;
+        const checkIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="${iconSize}" height="${iconSize}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
+        const variantColors = {
+            outline: 'var(--nc-border, #e5e7eb)',
+            primary: 'var(--nc-primary, #10b981)',
+            ghost: 'transparent'
+        };
+        const border = variantColors[variant] ?? variantColors.outline;
+        const background = variant === 'primary' ? 'var(--nc-primary, #10b981)' : 'transparent';
+        const color = isCopied
+            ? 'var(--nc-success, #10b981)'
+            : variant === 'primary' ? 'var(--nc-white, #ffffff)' : 'var(--nc-text, #111827)';
+        return `
+            <style>
+                :host { display: inline-block; }
+                button {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 6px;
+                    font-family: var(--nc-font-family);
+                    font-size: ${fontSize};
+                    font-weight: var(--nc-font-weight-medium, 500);
+                    color: ${color};
+                    background: ${background};
+                    border: 1px solid ${border};
+                    border-radius: var(--nc-radius-md, 0.5rem);
+                    padding: ${padding};
+                    cursor: pointer;
+                    transition: color var(--nc-transition-fast, 160ms ease), background var(--nc-transition-fast, 160ms ease), border-color var(--nc-transition-fast, 160ms ease), opacity var(--nc-transition-fast, 160ms ease);
+                    outline: none;
+                    white-space: nowrap;
+                }
+                button:hover:not(:disabled) { opacity: 0.8; }
+                button:focus-visible { outline: 2px solid var(--nc-primary, #10b981); outline-offset: 2px; }
+                button:disabled { opacity: 0.5; cursor: default; }
+                .icon { flex-shrink: 0; display: flex; }
+            </style>
+            <button type="button" aria-label="${isCopied ? copiedLabel : label}" ${isCopied ? 'disabled' : ''}>
+                <span class="icon">${isCopied ? checkIcon : copyIcon}</span>
+                ${!iconOnly ? `<span>${isCopied ? copiedLabel : label}</span>` : ''}
+            </button>
+        `;
+    }
+    onMount() {
+        this.shadowRoot?.addEventListener('click', () => this.copy());
+    }
+    async copy() {
+        const value = this.getAttribute('value') ?? '';
+        const timeout = parseInt(this.getAttribute('timeout') ?? '2000', 10);
+        try {
+            await navigator.clipboard.writeText(value);
+            this.copied = true;
+            this.render();
+            if (this.timer)
+                clearTimeout(this.timer);
+            this.timer = setTimeout(() => {
+                this.copied = false;
+                this.render();
+            }, timeout);
+            this.dispatchEvent(new CustomEvent('copy', {
+                detail: { value },
+                bubbles: true,
+                composed: true
+            }));
+        }
+        catch (error) {
+            this.dispatchEvent(new CustomEvent('error', {
+                detail: { error },
+                bubbles: true,
+                composed: true
+            }));
+        }
+    }
+    onUnmount() {
+        if (this.timer)
+            clearTimeout(this.timer);
+    }
+}
+defineComponent('nc-copy-button', NcCopyButton);

package/dist/components/nc-date-picker.d.ts

@@ -0,0 +1,41 @@
+/**
+ * NcDatePicker Component
+ *
+ * Attributes:
+ *   - name: string
+ *   - value: string - ISO date string YYYY-MM-DD
+ *   - min: string - minimum selectable date (YYYY-MM-DD)
+ *   - max: string - maximum selectable date (YYYY-MM-DD)
+ *   - placeholder: string (default: 'Select date')
+ *   - disabled: boolean
+ *   - readonly: boolean
+ *   - size: 'sm'|'md'|'lg' (default: 'md')
+ *   - variant: 'default'|'filled' (default: 'default')
+ *   - first-day: 0|1 - 0=Sunday, 1=Monday (default: 0)
+ *
+ * Events:
+ *   - change: CustomEvent<{ value: string; date: Date | null; name: string }>
+ *
+ * Usage:
+ *   <nc-date-picker name="dob" value="2024-03-15"></nc-date-picker>
+ *   <nc-date-picker name="from" min="2024-01-01" max="2024-12-31"></nc-date-picker>
+ */
+import { Component } from '../core/component.js';
+export declare class NcDatePicker extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    private _open;
+    private _selected;
+    private _viewYear;
+    private _viewMonth;
+    constructor();
+    template(): string;
+    private _renderCalendar;
+    onMount(): void;
+    private _bindEvents;
+    private _outsideClick;
+    private _select;
+    private _refreshCalendar;
+    onUnmount(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}