nativecorejs 0.1.0

package/dist/components/nc-card.js

@@ -0,0 +1,74 @@
+import { Component, defineComponent } from '../core/component.js';
+export class NcCard extends Component {
+    static useShadowDOM = true;
+    static attributeOptions = {
+        variant: ['primary', 'secondary', 'success', 'danger'],
+        size: ['sm', 'md', 'lg']
+    };
+    static get observedAttributes() {
+        return ['variant', 'size', 'disabled'];
+    }
+    template() {
+        return `
+            <style>
+                :host {
+                    display: block;
+                    font-family: var(--nc-font-family);
+                    padding: var(--nc-spacing-md, 1rem);
+                    border-radius: var(--nc-radius-md, 0.75rem);
+                    transition: all var(--nc-transition-fast, 160ms ease);
+                    width: 100%;
+                    box-sizing: border-box;
+                }
+
+                :host([variant="primary"]) {
+                    background: var(--nc-gradient-primary, linear-gradient(135deg, #10b981, #059669));
+                    color: var(--nc-white, #ffffff);
+                }
+
+                :host([variant="secondary"]) {
+                    background: var(--nc-bg-secondary, #f8fafc);
+                    color: var(--nc-text, #111827);
+                    border: 1px solid var(--nc-border, #e5e7eb);
+                }
+
+                :host([variant="success"]) {
+                    background: var(--nc-gradient-success, linear-gradient(135deg, #22c55e, #16a34a));
+                    color: var(--nc-white, #ffffff);
+                }
+
+                :host([variant="danger"]) {
+                    background: var(--nc-gradient-danger, linear-gradient(135deg, #ef4444, #dc2626));
+                    color: var(--nc-white, #ffffff);
+                }
+
+                :host([size="sm"]) {
+                    padding: var(--nc-spacing-sm, 0.75rem);
+                    font-size: var(--nc-font-size-sm, 0.875rem);
+                }
+
+                :host([size="md"]) {
+                    padding: var(--nc-spacing-md, 1rem);
+                    font-size: var(--nc-font-size-base, 1rem);
+                }
+
+                :host([size="lg"]) {
+                    padding: var(--nc-spacing-lg, 1.5rem);
+                    font-size: var(--nc-font-size-lg, 1.125rem);
+                }
+
+                :host([disabled]) {
+                    opacity: 0.5;
+                    pointer-events: none;
+                }
+            </style>
+            <slot></slot>
+        `;
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted) {
+            this.render();
+        }
+    }
+}
+defineComponent('nc-card', NcCard);

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

@@ -0,0 +1,16 @@
+import { Component } from '../core/component.js';
+export declare class NcCheckbox extends Component {
+    static useShadowDOM: boolean;
+    private readonly handleInputChange;
+    private readonly handleKeyDown;
+    static attributeOptions: {
+        variant: string[];
+        size: string[];
+    };
+    static get observedAttributes(): string[];
+    template(): string;
+    onMount(): void;
+    onUnmount(): void;
+    private setCheckedState;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/components/nc-checkbox.js

@@ -0,0 +1,194 @@
+import { Component, defineComponent } from '../core/component.js';
+export class NcCheckbox extends Component {
+    static useShadowDOM = true;
+    handleInputChange = (event) => {
+        const target = event.target;
+        if (!target || target.type !== 'checkbox')
+            return;
+        this.setCheckedState(target.checked);
+    };
+    handleKeyDown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            if (!this.hasAttribute('disabled')) {
+                this.setCheckedState(!this.hasAttribute('checked'));
+            }
+        }
+    };
+    static attributeOptions = {
+        variant: ['primary', 'success', 'danger'],
+        size: ['sm', 'md', 'lg']
+    };
+    static get observedAttributes() {
+        return ['label', 'name', 'value', 'checked', 'disabled', 'size', 'variant', 'indeterminate'];
+    }
+    template() {
+        const label = this.getAttribute('label') || '';
+        const size = this.getAttribute('size') || 'md';
+        const checked = this.hasAttribute('checked');
+        const disabled = this.hasAttribute('disabled');
+        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'};
+                }
+                .checkbox-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;
+                }
+                .box {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-shrink: 0;
+                    border-radius: var(--nc-radius-sm, 4px);
+                    border: 2px solid var(--nc-border-dark, #9ca3af);
+                    background: var(--nc-bg, #ffffff);
+                    transition: all var(--nc-transition-fast, 160ms ease);
+                    position: relative;
+                    box-sizing: border-box;
+                }
+                :host([size="sm"]) .box,
+                :host(:not([size])) .box {
+                    width: 16px;
+                    height: 16px;
+                }
+                :host([size="md"]) .box {
+                    width: 20px;
+                    height: 20px;
+                }
+                :host([size="lg"]) .box {
+                    width: 24px;
+                    height: 24px;
+                }
+                .box {
+                    width: 20px;
+                    height: 20px;
+                }
+                :host([checked]) .box,
+                :host([indeterminate]) .box {
+                    border-color: var(--nc-primary, #10b981);
+                    background: var(--nc-primary, #10b981);
+                }
+                :host([variant="success"][checked]) .box,
+                :host([variant="success"][indeterminate]) .box {
+                    border-color: var(--nc-success, #10b981);
+                    background: var(--nc-success, #10b981);
+                }
+                :host([variant="danger"][checked]) .box,
+                :host([variant="danger"][indeterminate]) .box {
+                    border-color: var(--nc-danger, #ef4444);
+                    background: var(--nc-danger, #ef4444);
+                }
+                .check-icon {
+                    display: none;
+                    pointer-events: none;
+                }
+                :host([checked]) .check-icon {
+                    display: block;
+                }
+                .indeterminate-icon {
+                    display: none;
+                    pointer-events: none;
+                }
+                :host([indeterminate]:not([checked])) .indeterminate-icon {
+                    display: block;
+                }
+                :host([indeterminate]:not([checked])) .check-icon {
+                    display: none;
+                }
+                :host(:not([disabled])) .box:hover {
+                    border-color: var(--nc-primary, #10b981);
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+                :host([variant="success"]:not([disabled])) .box:hover {
+                    border-color: var(--nc-success, #10b981);
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+                :host([variant="danger"]:not([disabled])) .box:hover {
+                    border-color: var(--nc-danger, #ef4444);
+                    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+                }
+                :host(:focus-visible) .box {
+                    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>
+
+            <label class="checkbox-wrapper">
+                <input type="checkbox" ${checked ? 'checked' : ''} ${disabled ? 'disabled' : ''} name="${this.getAttribute('name') || ''}" value="${this.getAttribute('value') || 'on'}" />
+                <span class="box">
+                    <svg class="check-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" width="${size === 'sm' ? '8' : size === 'lg' ? '14' : '11'}" height="${size === 'sm' ? '8' : size === 'lg' ? '14' : '11'}"><path d="M2 6l3 3 5-5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                    <svg class="indeterminate-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" width="${size === 'sm' ? '8' : size === 'lg' ? '14' : '11'}" height="${size === 'sm' ? '8' : size === 'lg' ? '14' : '11'}"><path d="M2 6h8" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>
+                </span>
+                ${label ? `<span class="label">${label}</span>` : '<slot></slot>'}
+            </label>
+        `;
+    }
+    onMount() {
+        if (!this.hasAttribute('tabindex')) {
+            this.setAttribute('tabindex', '0');
+        }
+        this.setAttribute('role', 'checkbox');
+        this.setAttribute('aria-checked', String(this.hasAttribute('checked')));
+        this.shadowRoot?.addEventListener('change', this.handleInputChange);
+        this.addEventListener('keydown', this.handleKeyDown);
+    }
+    onUnmount() {
+        this.shadowRoot?.removeEventListener('change', this.handleInputChange);
+        this.removeEventListener('keydown', this.handleKeyDown);
+    }
+    setCheckedState(isChecked) {
+        if (isChecked) {
+            this.setAttribute('checked', '');
+            this.removeAttribute('indeterminate');
+        }
+        else {
+            this.removeAttribute('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._mounted) {
+            this.render();
+            if (name === 'checked') {
+                this.setAttribute('aria-checked', String(this.hasAttribute('checked')));
+            }
+        }
+    }
+}
+defineComponent('nc-checkbox', NcCheckbox);

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

@@ -0,0 +1,8 @@
+import { Component } from '../core/component.js';
+export declare class NcChip extends Component {
+    static useShadowDOM: boolean;
+    static get observedAttributes(): string[];
+    template(): string;
+    onMount(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+}

package/dist/components/nc-chip.js

@@ -0,0 +1,89 @@
+import { Component, defineComponent } from '../core/component.js';
+export class NcChip extends Component {
+    static useShadowDOM = true;
+    static get observedAttributes() {
+        return ['variant', 'size', 'dismissible', 'disabled', 'icon'];
+    }
+    template() {
+        const variant = this.getAttribute('variant') || 'default';
+        const dismissible = this.hasAttribute('dismissible');
+        const disabled = this.hasAttribute('disabled');
+        const icon = this.getAttribute('icon');
+        return `
+            <style>
+                :host { display: inline-flex; }
+
+                .chip {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: var(--nc-spacing-xs, 0.25rem);
+                    border-radius: 999px;
+                    font-family: var(--nc-font-family);
+                    font-weight: var(--nc-font-weight-medium, 500);
+                    white-space: nowrap;
+                    border: 1px solid transparent;
+                    transition: opacity var(--nc-transition-fast, 160ms ease);
+                    opacity: ${disabled ? '0.5' : '1'};
+                    pointer-events: ${disabled ? 'none' : 'auto'};
+                }
+
+                :host([size="sm"]) .chip { font-size: var(--nc-font-size-xs, 0.75rem);  padding: 2px 8px; }
+                :host([size="lg"]) .chip { font-size: var(--nc-font-size-base, 1rem); padding: 6px 14px; }
+                .chip                    { font-size: var(--nc-font-size-sm, 0.875rem);   padding: 3px 10px; }
+
+                .chip--default { background: var(--nc-bg-secondary, #f8fafc); color: var(--nc-text, #111827); border-color: var(--nc-border, #e5e7eb); }
+                .chip--primary { background: rgba(16,185,129,.12); color: var(--nc-primary, #10b981); border-color: var(--nc-primary, #10b981); }
+                .chip--success { background: rgba(16,185,129,.12); color: var(--nc-success, #10b981); border-color: var(--nc-success, #10b981); }
+                .chip--warning { background: rgba(245,158,11,.12); color: var(--nc-warning, #f59e0b); border-color: var(--nc-warning, #f59e0b); }
+                .chip--danger  { background: rgba(239,68,68,.10);  color: var(--nc-danger,  #ef4444); border-color: var(--nc-danger,  #ef4444); }
+                .chip--neutral { background: var(--nc-bg-tertiary, #f3f4f6); color: var(--nc-text-muted, #6b7280); border-color: var(--nc-border-dark, #d1d5db); }
+
+                .chip__icon { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; }
+
+                .chip__dismiss {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                    padding: 0;
+                    margin-left: 2px;
+                    color: inherit;
+                    opacity: 0.6;
+                    transition: opacity var(--nc-transition-fast, 160ms ease);
+                    line-height: 1;
+                }
+                .chip__dismiss:hover { opacity: 1; }
+
+                ::slotted(*) { pointer-events: none; }
+            </style>
+            <span class="chip chip--${variant}">
+                ${icon ? `<img class="chip__icon" src="${icon}" alt="" aria-hidden="true" />` : ''}
+                <slot></slot>
+                ${dismissible ? `
+                <button class="chip__dismiss" type="button" aria-label="Remove">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" width="10" height="10">
+                        <path d="M2 2l8 8M10 2l-8 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    </svg>
+                </button>` : ''}
+            </span>
+        `;
+    }
+    onMount() {
+        const button = this.$('.chip__dismiss');
+        if (button) {
+            button.addEventListener('click', event => {
+                event.stopPropagation();
+                this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));
+            });
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue && this._mounted) {
+            this.render();
+            this.onMount();
+        }
+    }
+}
+defineComponent('nc-chip', NcChip);

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

@@ -0,0 +1,37 @@
+/**
+ * NcCode Component - syntax-highlighted code block with copy button
+ *
+ * Performs simple tokenization for common languages so it works
+ * without a runtime dependency (zero JS syntax libraries).
+ *
+ * Attributes:
+ *   language  - 'typescript'|'javascript'|'html'|'css'|'json'|'bash'|'text' (default: 'text')
+ *   label     - optional filename / caption shown in header bar
+ *   no-copy   - boolean - hide the copy button
+ *   no-lines  - boolean - hide line numbers
+ *   max-height - CSS value e.g. '400px' - sets overflow-y: auto
+ *   highlight - comma-separated 1-based line numbers to highlight (e.g. "2,4,6")
+ *   wrap      - boolean - enable word wrap
+ *
+ * Slots:
+ *   (default) - code content (plain text; HTML will be escaped automatically)
+ *               OR use the `code` attribute for programmatic use.
+ *
+ * code property:
+ *   el.code = '...' - set code programmatically (overrides slot content)
+ *
+ * Usage:
+ *   <nc-code language="typescript" label="app.ts">
+ *     const x = useState(0);
+ *   </nc-code>
+ */
+import { Component } from '../core/component.js';
+export declare class NcCode extends Component {
+    static useShadowDOM: boolean;
+    private _code;
+    get code(): string;
+    set code(v: string);
+    template(): string;
+    onMount(): void;
+    private _copy;
+}