create-nativecore 0.1.1 → 0.2.0

package/template/src/components/core/nc-progress-circular.ts

@@ -0,0 +1,119 @@
+/**
+ * NcProgressCircular Component
+ *
+ * Circular/ring progress indicator.
+ *
+ * Attributes:
+ *   - value: number — 0–max (required; omit or set indeterminate for spinner)
+ *   - max: number — maximum value (default: 100)
+ *   - size: number|string — diameter in px, or CSS size string (default: 48)
+ *   - thickness: number — stroke width in px (default: 4)
+ *   - variant: 'primary'|'success'|'warning'|'danger'|'neutral' (default: 'primary')
+ *   - show-value: boolean — display percentage in centre
+ *   - indeterminate: boolean — animated spinner mode
+ *   - label: string — aria-label override
+ *
+ * Usage:
+ *   <nc-progress-circular value="72"></nc-progress-circular>
+ *   <nc-progress-circular indeterminate size="32"></nc-progress-circular>
+ *   <nc-progress-circular value="45" show-value variant="success" size="64"></nc-progress-circular>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+const VARIANT_COLORS: Record<string, string> = {
+    primary: 'var(--nc-primary)',
+    success: 'var(--nc-success, #10b981)',
+    warning: 'var(--nc-warning, #f59e0b)',
+    danger:  'var(--nc-danger, #ef4444)',
+    neutral: 'var(--nc-text-muted)',
+};
+
+export class NcProgressCircular extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['value', 'max', 'size', 'thickness', 'variant', 'show-value', 'indeterminate', 'label'];
+    }
+
+    template() {
+        const max = Number(this.getAttribute('max') || 100);
+        const value = Math.min(max, Math.max(0, Number(this.getAttribute('value') || 0)));
+        const pct = max > 0 ? Math.round((value / max) * 100) : 0;
+        const sizeAttr = this.getAttribute('size') || '48';
+        const size = Number(sizeAttr) || 48;
+        const thickness = Number(this.getAttribute('thickness') || 4);
+        const variant = this.getAttribute('variant') || 'primary';
+        const showValue = this.hasAttribute('show-value');
+        const indeterminate = this.hasAttribute('indeterminate');
+        const label = this.getAttribute('label') || (indeterminate ? 'Loading' : `${pct}%`);
+        const color = VARIANT_COLORS[variant] ?? VARIANT_COLORS.primary;
+
+        const r = (size - thickness) / 2;
+        const circumference = 2 * Math.PI * r;
+        const dashOffset = indeterminate ? circumference * 0.25 : circumference * (1 - pct / 100);
+        const cx = size / 2;
+        const cy = size / 2;
+        const fontSize = Math.max(10, Math.round(size * 0.22));
+
+        return `
+            <style>
+                :host { display: inline-flex; align-items: center; justify-content: center; }
+
+                svg { display: block; }
+
+                .track { fill: none; stroke: var(--nc-bg-tertiary); }
+                .fill  { fill: none; stroke: ${color}; stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; }
+
+                ${indeterminate ? `
+                @keyframes nc-spin {
+                    from { transform: rotate(0deg); }
+                    to   { transform: rotate(360deg); }
+                }
+                svg { animation: nc-spin 1s linear infinite; transform-origin: center; }
+                .fill { stroke-dashoffset: ${dashOffset}; }
+                ` : ''}
+
+                .label {
+                    font-family: var(--nc-font-family);
+                    font-size: ${fontSize}px;
+                    font-weight: var(--nc-font-weight-semibold);
+                    fill: var(--nc-text);
+                    dominant-baseline: central;
+                    text-anchor: middle;
+                }
+            </style>
+            <svg
+                width="${size}"
+                height="${size}"
+                viewBox="0 0 ${size} ${size}"
+                role="progressbar"
+                aria-label="${label}"
+                aria-valuenow="${indeterminate ? '' : value}"
+                aria-valuemin="0"
+                aria-valuemax="${max}"
+            >
+                <circle
+                    class="track"
+                    cx="${cx}" cy="${cy}" r="${r}"
+                    stroke-width="${thickness}"
+                />
+                <circle
+                    class="fill"
+                    cx="${cx}" cy="${cy}" r="${r}"
+                    stroke-width="${thickness}"
+                    stroke-dasharray="${circumference}"
+                    stroke-dashoffset="${dashOffset}"
+                    transform="rotate(-90 ${cx} ${cy})"
+                />
+                ${showValue && !indeterminate ? `<text class="label" x="${cx}" y="${cy}">${pct}%</text>` : ''}
+            </svg>
+        `;
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) this.render();
+    }
+}
+
+defineComponent('nc-progress-circular', NcProgressCircular);

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

@@ -0,0 +1,134 @@
+/**
+ * NcProgress Component
+ *
+ * Attributes:
+ *   - value: number — current value (0-100, or 0-max)
+ *   - max: number — maximum value (default: 100)
+ *   - variant: 'primary'|'success'|'warning'|'danger'|'neutral' (default: 'primary')
+ *   - size: 'xs'|'sm'|'md'|'lg' (default: 'sm')
+ *   - label: string — accessible label
+ *   - show-value: boolean — display percentage text
+ *   - indeterminate: boolean — animated indeterminate state (no value needed)
+ *   - striped: boolean — striped fill
+ *   - animated: boolean — animates the stripes (requires striped)
+ *
+ * Usage:
+ *   <nc-progress value="60"></nc-progress>
+ *   <nc-progress value="30" variant="success" show-value></nc-progress>
+ *   <nc-progress indeterminate></nc-progress>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcProgress extends Component {
+    static useShadowDOM = true;
+
+    static get observedAttributes() {
+        return ['value', 'max', 'variant', 'size', 'label', 'show-value', 'indeterminate', 'striped', 'animated'];
+    }
+
+    template() {
+        const max = Number(this.getAttribute('max') || 100);
+        const value = Math.min(max, Math.max(0, Number(this.getAttribute('value') || 0)));
+        const pct = max > 0 ? Math.round((value / max) * 100) : 0;
+        const variant = this.getAttribute('variant') || 'primary';
+        const showValue = this.hasAttribute('show-value');
+        const indeterminate = this.hasAttribute('indeterminate');
+        const striped = this.hasAttribute('striped');
+        const animated = this.hasAttribute('animated');
+        const label = this.getAttribute('label') || `${pct}%`;
+
+        return `
+            <style>
+                :host { display: block; width: 100%; font-family: var(--nc-font-family); }
+
+                .wrap { display: flex; align-items: center; gap: var(--nc-spacing-sm); }
+
+                .track {
+                    flex: 1;
+                    background: var(--nc-bg-tertiary);
+                    border-radius: 999px;
+                    overflow: hidden;
+                    position: relative;
+                }
+
+                :host([size="xs"]) .track { height: 4px; }
+                :host([size="sm"]) .track,
+                :host .track             { height: 6px; }
+                :host([size="md"]) .track { height: 10px; }
+                :host([size="lg"]) .track { height: 16px; }
+
+                .bar {
+                    height: 100%;
+                    border-radius: 999px;
+                    transition: width 0.4s ease;
+                    width: ${indeterminate ? '40%' : `${pct}%`};
+                }
+
+                .bar--primary { background: var(--nc-primary); }
+                .bar--success { background: var(--nc-success, #10b981); }
+                .bar--warning { background: var(--nc-warning, #f59e0b); }
+                .bar--danger  { background: var(--nc-danger,  #ef4444); }
+                .bar--neutral { background: var(--nc-text-muted); }
+
+                ${striped ? `
+                .bar {
+                    background-image: linear-gradient(
+                        45deg,
+                        rgba(255,255,255,.15) 25%,
+                        transparent 25%,
+                        transparent 50%,
+                        rgba(255,255,255,.15) 50%,
+                        rgba(255,255,255,.15) 75%,
+                        transparent 75%,
+                        transparent
+                    );
+                    background-size: 1rem 1rem;
+                }` : ''}
+
+                ${animated ? `
+                @keyframes nc-progress-stripes {
+                    from { background-position: 1rem 0; }
+                    to   { background-position: 0 0; }
+                }
+                .bar { animation: nc-progress-stripes 1s linear infinite; }` : ''}
+
+                ${indeterminate ? `
+                @keyframes nc-indeterminate {
+                    0%   { left: -40%; }
+                    100% { left: 100%; }
+                }
+                .bar {
+                    position: absolute;
+                    animation: nc-indeterminate 1.4s ease infinite;
+                }` : ''}
+
+                .value-label {
+                    font-size: var(--nc-font-size-xs);
+                    color: var(--nc-text-muted);
+                    min-width: 2.8ch;
+                    text-align: right;
+                }
+            </style>
+            <div class="wrap">
+                <div
+                    class="track"
+                    role="progressbar"
+                    aria-label="${label}"
+                    aria-valuenow="${indeterminate ? '' : value}"
+                    aria-valuemin="0"
+                    aria-valuemax="${max}"
+                >
+                    <div class="bar bar--${variant}"></div>
+                </div>
+                ${showValue && !indeterminate ? `<span class="value-label">${pct}%</span>` : ''}
+            </div>
+        `;
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue && this._mounted) this.render();
+    }
+}
+
+defineComponent('nc-progress', NcProgress);

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

@@ -0,0 +1,235 @@
+/**
+ * NcRadio Component
+ *
+ * NativeCore Framework Core Component
+ *
+ * Attributes:
+ *   - label: string — text label shown next to the radio
+ *   - name: string — radio group name (required for grouping)
+ *   - value: string — value submitted with a form
+ *   - checked: boolean — selected state
+ *   - disabled: boolean — disabled state
+ *   - size: 'sm' | 'md' | 'lg' (default: 'md')
+ *   - variant: 'primary' | 'success' | 'danger' (default: 'primary')
+ *
+ * Events:
+ *   - change: CustomEvent<{ value: string; name: string }>
+ *
+ * Usage:
+ *   <nc-radio name="plan" value="free" label="Free" checked></nc-radio>
+ *   <nc-radio name="plan" value="pro" label="Pro"></nc-radio>
+ *   <nc-radio name="plan" value="enterprise" label="Enterprise" disabled></nc-radio>
+ */
+
+import { Component, defineComponent } from '@core/component.js';
+
+export class NcRadio extends Component {
+    static useShadowDOM = true;
+
+    static attributeOptions = {
+        variant: ['primary', 'success', 'danger'],
+        size: ['sm', 'md', 'lg']
+    };
+
+    static get observedAttributes() {
+        return ['label', 'name', 'value', 'checked', 'disabled', 'size', 'variant'];
+    }
+
+    constructor() {
+        super();
+    }
+
+    template() {
+        const label = this.getAttribute('label') || '';
+        const size = this.getAttribute('size') || 'md';
+        const checked = this.hasAttribute('checked');
+        const disabled = this.hasAttribute('disabled');
+
+        const dotSize = size === 'sm' ? '6px' : size === 'lg' ? '10px' : '8px';
+        const boxSize = size === 'sm' ? '16px' : size === 'lg' ? '24px' : '20px';
+
+        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'};
+                }
+
+                .radio-wrapper {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: var(--nc-spacing-sm);
+                }
+
+                input[type="radio"] {
+                    position: absolute;
+                    opacity: 0;
+                    width: 0;
+                    height: 0;
+                    pointer-events: none;
+                }
+
+                .ring {
+                    display: inline-flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-shrink: 0;
+                    width: ${boxSize};
+                    height: ${boxSize};
+                    border-radius: var(--nc-radius-full);
+                    border: 2px solid var(--nc-border-dark);
+                    background: var(--nc-bg);
+                    transition: all var(--nc-transition-fast);
+                    box-sizing: border-box;
+                    position: relative;
+                }
+
+                .dot {
+                    width: ${dotSize};
+                    height: ${dotSize};
+                    border-radius: var(--nc-radius-full);
+                    background: var(--nc-white);
+                    opacity: 0;
+                    transform: scale(0);
+                    transition: all var(--nc-transition-fast);
+                }
+
+                /* Checked state */
+                :host([checked]) .ring {
+                    border-color: var(--nc-primary);
+                    background: var(--nc-primary);
+                }
+
+                :host([checked]) .dot {
+                    opacity: 1;
+                    transform: scale(1);
+                }
+
+                :host([variant="success"][checked]) .ring {
+                    border-color: var(--nc-success);
+                    background: var(--nc-success);
+                }
+
+                :host([variant="danger"][checked]) .ring {
+                    border-color: var(--nc-danger);
+                    background: var(--nc-danger);
+                }
+
+                /* Hover */
+                :host(:not([disabled])) .ring:hover {
+                    border-color: var(--nc-primary);
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+
+                :host([variant="success"]:not([disabled])) .ring:hover {
+                    border-color: var(--nc-success);
+                    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+                }
+
+                :host([variant="danger"]:not([disabled])) .ring:hover {
+                    border-color: var(--nc-danger);
+                    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+                }
+
+                /* Focus ring */
+                :host(:focus-visible) .ring {
+                    outline: 2px solid var(--nc-primary);
+                    outline-offset: 2px;
+                }
+
+                .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="radio-wrapper">
+                <input
+                    type="radio"
+                    ${checked ? 'checked' : ''}
+                    ${disabled ? 'disabled' : ''}
+                    name="${this.getAttribute('name') || ''}"
+                    value="${this.getAttribute('value') || ''}"
+                />
+                <span class="ring">
+                    <span class="dot"></span>
+                </span>
+                ${label ? `<span class="label">${label}</span>` : '<slot></slot>'}
+            </label>
+        `;
+    }
+
+    onMount() {
+        if (!this.hasAttribute('tabindex')) {
+            this.setAttribute('tabindex', '0');
+        }
+        this.setAttribute('role', 'radio');
+        this.setAttribute('aria-checked', String(this.hasAttribute('checked')));
+
+        this.shadowRoot!.addEventListener('click', () => {
+            if (this.hasAttribute('disabled')) return;
+            this._select();
+        });
+
+        this.addEventListener('keydown', (e: KeyboardEvent) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                if (!this.hasAttribute('disabled')) this._select();
+            }
+        });
+    }
+
+    private _select() {
+        if (this.hasAttribute('checked')) return;
+
+        // Deselect siblings in the same named group
+        const name = this.getAttribute('name');
+        if (name) {
+            const root = (this.getRootNode() as Document | ShadowRoot);
+            const siblings = Array.from(root.querySelectorAll<NcRadio>(`nc-radio[name="${name}"]`));
+            siblings.forEach(sibling => {
+                if (sibling !== this) {
+                    sibling.removeAttribute('checked');
+                    sibling.setAttribute('aria-checked', 'false');
+                }
+            });
+        }
+
+        this.setAttribute('checked', '');
+        this.setAttribute('aria-checked', 'true');
+
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.getAttribute('value') || '',
+                name: this.getAttribute('name') || ''
+            }
+        }));
+    }
+
+    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+        if (oldValue !== newValue) {
+            this.render();
+            if (name === 'checked') {
+                this.setAttribute('aria-checked', String(this.hasAttribute('checked')));
+            }
+        }
+    }
+}
+
+defineComponent('nc-radio', NcRadio);