create-nativecore 0.1.1 → 0.2.1

package/template/src/components/core/nc-card.ts

@@ -0,0 +1,160 @@
+/**
+ * NcCard Component
+ * 
+ * NativeCore Framework Core Component
+ * Generated on 2/1/2026
+ * 
+ * ⚠️ FRAMEWORK INTERNAL COMPONENT ⚠️
+ * This component uses --nc- CSS variables from core-variables.css
+ * for consistent styling across the framework.
+ * 
+ * ═══════════════════════════════════════════════════════════════════
+ * DEV TOOLS INTEGRATION - How to make attributes editable in sidebar:
+ * ═══════════════════════════════════════════════════════════════════
+ * 
+ * 1. ADD TO observedAttributes:
+ *    static get observedAttributes() {
+ *      return ['variant', 'size', 'disabled'];  // ← These become editable
+ *    }
+ * 
+ * 2. USE getAttribute() IN template():
+ *    const variant = this.getAttribute('variant') || 'primary';
+ *    const size = this.getAttribute('size') || 'md';
+ * 
+ * 3. FOR DROPDOWN SELECTORS (variant/size):
+ *    Name attributes 'variant' or 'size' AND use CSS patterns:
+ * 
+ *    Option A - :host() selectors (RECOMMENDED for core components):
+ *      :host([variant="primary"]) { ... }
+ *      :host([variant="secondary"]) { ... }
+ *      :host([size="sm"]) { ... }
+ *      :host([size="lg"]) { ... }
+ * 
+ *    Option B - Class selectors:
+ *      .primary { ... }
+ *      .secondary { ... }
+ *      .btn-sm { ... }
+ *      .btn-lg { ... }
+ * 
+ *    The dev tools will auto-detect these patterns and create dropdowns!
+ * 
+ * 4. ATTRIBUTE TYPES (auto-detected):
+ *    - Boolean: disabled, loading, hidden, readonly → Checkbox
+ *    - Variant/Size: variant, size (with CSS) → Dropdown
+ *    - Number: count, max, min, step → Slider
+ *    - Everything else → Text input
+ * 
+ * 5. LIVE UPDATES:
+ *    Implement attributeChangedCallback for instant preview updates
+ * 
+ * ═══════════════════════════════════════════════════════════════════
+ * 
+ * Usage:
+ *   
+ *   
+ * 
+ * Attributes:
+ *   - variant: Component style variant
+ *   - size: Component size (sm, md, lg)
+ *   - disabled: Disabled state
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcCard extends Component {
+    static useShadowDOM = true;
+    
+    // ═══ Define dropdown options for dev tools (auto-detected) ═══
+    static attributeOptions = {
+        variant: ['primary', 'secondary', 'success', 'danger'],
+        size: ['sm', 'md', 'lg']
+    };
+    
+    // ═══ Attributes listed here become editable in dev tools sidebar ═══
+    static get observedAttributes() {
+        return ['variant', 'size', 'disabled'];
+    }
+    
+    constructor() {
+        super();
+    }
+    
+    template() {
+        return `
+            <style>
+                :host {
+                    display: block;
+                    font-family: var(--nc-font-family);
+                    padding: var(--nc-spacing-md);
+                    border-radius: var(--nc-radius-md);
+                    transition: all var(--nc-transition-fast);
+                    width: 100%;
+                    box-sizing: border-box;
+                }
+                
+                /* ═══ Variant Options (auto-detected for dropdown) ═══ */
+                /* Dev tools will scan :host([variant="..."]) patterns */
+                
+                :host([variant="primary"]) {
+                    background: var(--nc-gradient-primary);
+                    color: var(--nc-white);
+                }
+                
+                :host([variant="secondary"]) {
+                    background: var(--nc-bg-secondary);
+                    color: var(--nc-text);
+                    border: 1px solid var(--nc-border);
+                }
+                
+                :host([variant="success"]) {
+                    background: var(--nc-gradient-success);
+                    color: var(--nc-white);
+                }
+                
+                :host([variant="danger"]) {
+                    background: var(--nc-gradient-danger);
+                    color: var(--nc-white);
+                }
+                
+                /* ═══ Size Options (auto-detected for dropdown) ═══ */
+                /* Dev tools will scan :host([size="..."]) patterns */
+                
+                :host([size="sm"]) {
+                    padding: var(--nc-spacing-sm);
+                    font-size: var(--nc-font-size-sm);
+                }
+                
+                :host([size="md"]) {
+                    padding: var(--nc-spacing-md);
+                    font-size: var(--nc-font-size-base);
+                }
+                
+                :host([size="lg"]) {
+                    padding: var(--nc-spacing-lg);
+                    font-size: var(--nc-font-size-lg);
+                }
+                
+                /* ═══ Disabled State (auto-detected as checkbox) ═══ */
+                :host([disabled]) {
+                    opacity: 0.5;
+                    pointer-events: none;
+                }
+            </style>
+            
+            <slot></slot>
+        `;
+    }
+    
+    onMount() {
+        // Component logic here
+    }
+    
+    // ═══ Makes changes instant in dev tools preview ═══
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) {
+            this.render();
+        }
+    }
+}
+
+defineComponent('nc-card', NcCard);

package/template/src/components/core/nc-checkbox.ts

@@ -0,0 +1,282 @@
+/**
+ * NcCheckbox Component
+ *
+ * NativeCore Framework Core Component
+ *
+ * Attributes:
+ *   - label: string — text label shown next to the checkbox
+ *   - name: string — form field name
+ *   - value: string — value submitted with a form (default: 'on')
+ *   - checked: boolean — checked state
+ *   - disabled: boolean — disabled state
+ *   - size: 'sm' | 'md' | 'lg' (default: 'md')
+ *   - variant: 'primary' | 'success' | 'danger' (default: 'primary')
+ *   - indeterminate: boolean — indeterminate visual state
+ *
+ * Events:
+ *   - change: CustomEvent<{ checked: boolean; value: string; name: string }>
+ *
+ * Usage:
+ *   <nc-checkbox label="Accept terms" name="terms" checked></nc-checkbox>
+ *   <nc-checkbox label="Disabled" disabled></nc-checkbox>
+ *   <nc-checkbox label="Danger" variant="danger"></nc-checkbox>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcCheckbox extends Component {
+    static useShadowDOM = true;
+
+    private readonly _handleInputChange = (event: Event) => {
+        const target = event.target as HTMLInputElement | null;
+        if (!target || target.type !== 'checkbox') return;
+        this._setCheckedState(target.checked);
+    };
+
+    private readonly _handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.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'];
+    }
+
+    constructor() {
+        super();
+    }
+
+    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);
+                    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);
+                }
+
+                /* Hidden native input — keeps form semantics */
+                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);
+                    border: 2px solid var(--nc-border-dark);
+                    background: var(--nc-bg);
+                    transition: all var(--nc-transition-fast);
+                    position: relative;
+                    box-sizing: border-box;
+                }
+
+                /* Size variants */
+                :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;
+                }
+
+                /* Default size (md) */
+                .box {
+                    width: 20px;
+                    height: 20px;
+                }
+
+                /* Checked state — variant colors */
+                :host([checked]) .box,
+                :host([indeterminate]) .box {
+                    border-color: var(--nc-primary);
+                    background: var(--nc-primary);
+                }
+
+                :host([variant="success"][checked]) .box,
+                :host([variant="success"][indeterminate]) .box {
+                    border-color: var(--nc-success);
+                    background: var(--nc-success);
+                }
+
+                :host([variant="danger"][checked]) .box,
+                :host([variant="danger"][indeterminate]) .box {
+                    border-color: var(--nc-danger);
+                    background: var(--nc-danger);
+                }
+
+                /* Checkmark SVG */
+                .check-icon {
+                    display: none;
+                    pointer-events: none;
+                }
+
+                :host([checked]) .check-icon {
+                    display: block;
+                }
+
+                /* Indeterminate dash */
+                .indeterminate-icon {
+                    display: none;
+                    pointer-events: none;
+                }
+
+                :host([indeterminate]:not([checked])) .indeterminate-icon {
+                    display: block;
+                }
+
+                :host([indeterminate]:not([checked])) .check-icon {
+                    display: none;
+                }
+
+                /* Hover */
+                :host(:not([disabled])) .box:hover {
+                    border-color: var(--nc-primary);
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+
+                :host([variant="success"]:not([disabled])) .box:hover {
+                    border-color: var(--nc-success);
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+
+                :host([variant="danger"]:not([disabled])) .box:hover {
+                    border-color: var(--nc-danger);
+                    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+                }
+
+                /* Focus ring */
+                :host(:focus-visible) .box {
+                    outline: 2px solid var(--nc-primary);
+                    outline-offset: 2px;
+                }
+
+                /* Label */
+                .label {
+                    font-size: var(--nc-font-size-base);
+                    color: var(--nc-text);
+                    line-height: var(--nc-line-height-normal);
+                }
+
+                :host([size="sm"]) .label {
+                    font-size: var(--nc-font-size-sm);
+                }
+
+                :host([size="lg"]) .label {
+                    font-size: var(--nc-font-size-lg);
+                }
+            </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);
+    }
+
+    private _setCheckedState(isChecked: boolean) {
+        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: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue) {
+            this.render();
+            if (name === 'checked' || name === 'indeterminate') {
+                this.setAttribute('aria-checked',
+                    this.hasAttribute('indeterminate') ? 'mixed' : String(this.hasAttribute('checked'))
+                );
+            }
+        }
+    }
+}
+
+defineComponent('nc-checkbox', NcCheckbox);

package/template/src/components/core/nc-chip.ts

@@ -0,0 +1,115 @@
+/**
+ * NcChip Component
+ *
+ * Attributes:
+ *   - variant: 'default'|'primary'|'success'|'warning'|'danger'|'neutral' (default: 'default')
+ *   - size: 'sm'|'md'|'lg' (default: 'md')
+ *   - dismissible: boolean — shows an × button; fires 'dismiss' event on click
+ *   - disabled: boolean
+ *   - icon: string — URL/path to a leading icon image
+ *
+ * Events:
+ *   - dismiss: CustomEvent (when × is clicked)
+ *
+ * Usage:
+ *   <nc-chip>React</nc-chip>
+ *   <nc-chip variant="success" dismissible>Published</nc-chip>
+ */
+
+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);
+                    border-radius: 999px;
+                    font-family: var(--nc-font-family);
+                    font-weight: var(--nc-font-weight-medium);
+                    white-space: nowrap;
+                    border: 1px solid transparent;
+                    transition: opacity var(--nc-transition-fast);
+                    opacity: ${disabled ? '0.5' : '1'};
+                    pointer-events: ${disabled ? 'none' : 'auto'};
+                }
+
+                :host([size="sm"]) .chip { font-size: var(--nc-font-size-xs);  padding: 2px 8px; }
+                :host([size="lg"]) .chip { font-size: var(--nc-font-size-base); padding: 6px 14px; }
+                .chip                    { font-size: var(--nc-font-size-sm);   padding: 3px 10px; }
+
+                /* Variants */
+                .chip--default { background: var(--nc-bg-secondary); color: var(--nc-text); border-color: var(--nc-border); }
+                .chip--primary { background: rgba(16,185,129,.12); color: var(--nc-primary); border-color: var(--nc-primary); }
+                .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); color: var(--nc-text-muted); border-color: var(--nc-border-dark); }
+
+                .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);
+                    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 btn = this.$<HTMLButtonElement>('.chip__dismiss');
+        if (btn) {
+            btn.addEventListener('click', (e) => {
+                e.stopPropagation();
+                this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));
+            });
+        }
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) {
+            this.render();
+            this.onMount();
+        }
+    }
+}
+
+defineComponent('nc-chip', NcChip);