@ahriknow/lux 0.0.1

package/src/components/lux-scroll/index.js

@@ -0,0 +1,349 @@
+/**
+ * lux-scroll — Custom scrollbar container.
+ *
+ * Hides native scrollbar and shows a styled custom scrollbar.
+ * Supports scroll-to-top/bottom buttons and theme-aware colors.
+ *
+ * Usage:
+ *   <lux-scroll height="400px">
+ *     <div>Long content...</div>
+ *   </lux-scroll>
+ *   <lux-scroll height="100%" show-buttons>
+ *     <div>Content with scroll buttons</div>
+ *   </lux-scroll>
+ *
+ * Props:
+ *   height        — container height (default: 100%)
+ *   width         — container width (default: 100%)
+ *   show-buttons  — show scroll-to-top/bottom buttons
+ *   disabled      — disable custom scrollbar (show native)
+ */
+
+import { html, css, LuxElement, registerComponent } from '../../index.js';
+
+const styles = css`
+    :host {
+        display: block;
+        position: relative;
+        width: var(--scroll-w, 100%);
+        height: var(--scroll-h, 100%);
+    }
+
+    .scroll-container {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        position: relative;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+
+    .scroll-container::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* ── Custom Track ── */
+    .scroll-track {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        width: 6px;
+        height: calc(100% - 8px);
+        background: rgb(var(--lux-border, 226 232 240) / 0.2);
+        border-radius: 3px;
+        z-index: 10;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+    }
+
+    :host(:hover) .scroll-track,
+    .scroll-container:hover + .scroll-track,
+    .scroll-track.visible {
+        opacity: 1;
+    }
+
+    /* ── Custom Thumb ── */
+    .scroll-thumb {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        border-radius: 3px;
+        background: rgb(var(--lux-scrollbar, 180 196 214));
+        cursor: grab;
+        transition:
+            background 0.15s ease,
+            height 0.15s ease;
+        min-height: 20px;
+    }
+
+    .scroll-thumb:hover,
+    .scroll-thumb.dragging {
+        background: rgb(var(--lux-primary-400, 129 120 247));
+    }
+
+    .scroll-thumb.dragging {
+        cursor: grabbing;
+    }
+
+    /* ── Scroll Buttons ─── */
+    .scroll-buttons {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        z-index: 11;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+    }
+
+    :host(:hover) .scroll-buttons,
+    .scroll-buttons.visible {
+        opacity: 1;
+    }
+
+    .scroll-btn {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        border: 1px solid rgb(var(--lux-border, 51 65 85));
+        background: rgb(var(--lux-card, 30 41 59));
+        color: rgb(var(--lux-text-secondary, 148 163 184));
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        transition: all 0.15s ease;
+        padding: 0;
+    }
+
+    .scroll-btn:hover {
+        background: rgb(var(--lux-primary-400, 129 120 247));
+        color: #fff;
+        border-color: rgb(var(--lux-primary-400, 129 120 247));
+    }
+
+    .scroll-btn:disabled {
+        opacity: 0.3;
+        pointer-events: none;
+    }
+
+    /* ── Disabled (show native) ── */
+    :host([disabled]) .scroll-track,
+    :host([disabled]) .scroll-buttons {
+        display: none;
+    }
+    :host([disabled]) .scroll-container {
+        scrollbar-width: auto;
+        -ms-overflow-style: auto;
+    }
+    :host([disabled]) .scroll-container::-webkit-scrollbar {
+        display: block;
+    }
+`;
+
+class LuxScroll extends LuxElement {
+    static styles = styles;
+
+    static properties = {
+        height: { type: String, attribute: 'height', reflect: true },
+        width: { type: String, attribute: 'width', reflect: true },
+        showButtons: { type: Boolean, attribute: 'show-buttons', reflect: true },
+        disabled: { type: Boolean, attribute: 'disabled', reflect: true },
+    };
+
+    constructor() {
+        super();
+        this.height = '100%';
+        this.width = '100%';
+        this.showButtons = false;
+        this.disabled = false;
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.style.height = this.height;
+        this.style.width = this.width;
+    }
+
+    firstUpdated() {
+        this._setupScroll();
+    }
+
+    updated() {
+        this.style.height = this.height;
+        this.style.width = this.width;
+        requestAnimationFrame(() => this._syncThumb());
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._teardownScroll();
+    }
+
+    _setupScroll() {
+        const container = this.renderRoot.querySelector('.scroll-container');
+        const thumb = this.renderRoot.querySelector('.scroll-thumb');
+        const track = this.renderRoot.querySelector('.scroll-track');
+        if (!container || !thumb || !track) return;
+
+        this._container = container;
+        this._thumb = thumb;
+        this._track = track;
+
+        // Sync thumb position on scroll
+        this._onScroll = () => this._syncThumb();
+        container.addEventListener('scroll', this._onScroll, { passive: true });
+
+        // Drag thumb
+        this._onThumbDown = (e) => this._startDrag(e);
+        thumb.addEventListener('mousedown', this._onThumbDown);
+
+        // Click track to scroll
+        this._onTrackClickBound = (e) => this._onTrackClick(e);
+        track.addEventListener('click', this._onTrackClickBound);
+
+        // Show/hide on hover
+        this._onMouseEnter = () => {
+            track.classList.add('visible');
+            this._showButtons(true);
+        };
+        this._onMouseLeave = () => {
+            track.classList.remove('visible');
+            this._showButtons(false);
+        };
+        this.addEventListener('mouseenter', this._onMouseEnter);
+        this.addEventListener('mouseleave', this._onMouseLeave);
+
+        // Initial sync
+        requestAnimationFrame(() => this._syncThumb());
+    }
+
+    _teardownScroll() {
+        if (this._container) {
+            this._container.removeEventListener('scroll', this._onScroll);
+        }
+        if (this._thumb) {
+            this._thumb.removeEventListener('mousedown', this._onThumbDown);
+        }
+        if (this._track) {
+            this._track.removeEventListener('click', this._onTrackClickBound);
+        }
+        this.removeEventListener('mouseenter', this._onMouseEnter);
+        this.removeEventListener('mouseleave', this._onMouseLeave);
+    }
+
+    _syncThumb() {
+        const c = this._container;
+        const t = this._thumb;
+        const track = this._track;
+        if (!c || !t || !track) return;
+
+        const scrollH = c.scrollHeight;
+        const clientH = c.clientHeight;
+        const trackH = track.offsetHeight || clientH - 8;
+        if (scrollH <= clientH) {
+            t.style.height = '0px';
+            t.style.opacity = '0';
+            return;
+        }
+
+        const ratio = clientH / scrollH;
+        const thumbH = Math.max(20, trackH * ratio);
+        const maxTop = trackH - thumbH;
+        const scrollTop = c.scrollTop;
+        const maxScroll = scrollH - clientH;
+        const top = maxScroll > 0 ? (scrollTop / maxScroll) * maxTop : 0;
+
+        t.style.height = thumbH + 'px';
+        t.style.top = top + 'px';
+        t.style.opacity = '1';
+    }
+
+    _startDrag(e) {
+        e.preventDefault();
+        const c = this._container;
+        const t = this._thumb;
+        if (!c || !t) return;
+
+        const startY = e.clientY;
+        const startScroll = c.scrollTop;
+        const scrollH = c.scrollHeight;
+        const clientH = c.clientHeight;
+        const thumbH = t.offsetHeight;
+        const maxScroll = scrollH - clientH;
+        const maxTop = clientH - thumbH;
+        const ratio = maxScroll > maxTop ? maxScroll / maxTop : 1;
+
+        t.classList.add('dragging');
+
+        const onMove = (ev) => {
+            const dy = ev.clientY - startY;
+            const newScroll = startScroll + dy * ratio;
+            c.scrollTop = Math.max(0, Math.min(maxScroll, newScroll));
+        };
+
+        const onUp = () => {
+            t.classList.remove('dragging');
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+        };
+
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }
+
+    _onTrackClick(e) {
+        const c = this._container;
+        if (!c) return;
+        const rect = this._track.getBoundingClientRect();
+        const clickY = e.clientY - rect.top;
+        const trackH = rect.height;
+        const ratio = clickY / trackH;
+        const maxScroll = c.scrollHeight - c.clientHeight;
+        c.scrollTop = ratio * maxScroll;
+    }
+
+    _showButtons(show) {
+        if (!this.showButtons) return;
+        const btns = this.renderRoot.querySelector('.scroll-buttons');
+        if (btns) btns.classList.toggle('visible', show);
+    }
+
+    scrollToTop() {
+        this._container?.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+
+    scrollToBottom() {
+        const c = this._container;
+        if (c) c.scrollTo({ top: c.scrollHeight, behavior: 'smooth' });
+    }
+
+    render() {
+        return html`
+            <div class="scroll-container">
+                <slot></slot>
+            </div>
+            <div class="scroll-track">
+                <div class="scroll-thumb"></div>
+            </div>
+            ${
+          this.showButtons
+              ? html`
+                    <div class="scroll-buttons">
+                        <button class="scroll-btn" @click=${() => this.scrollToTop()}>▲</button>
+                        <button class="scroll-btn" @click=${() => this.scrollToBottom()}>▼</button>
+                    </div>
+                `
+              : ''
+      }
+        `;
+    }
+}
+
+registerComponent('lux-scroll', LuxScroll);
+export default LuxScroll;

package/src/components/lux-switch/index.js

@@ -0,0 +1,203 @@
+/**
+ * lux-switch — Toggle switch component.
+ *
+ * Usage:
+ *   <lux-switch checked></lux-switch>
+ *   <lux-switch checked size="lg" shape="square"></lux-switch>
+ *   <lux-switch checked-on-color="#10b981" checked-off-color="#ef4444">ON/OFF</lux-switch>
+ *
+ * Props:
+ *   checked         — switch state
+ *   disabled        — disable interaction
+ *   size            — sm / md / lg
+ *   shape           — round (default) / square
+ *   checked-on-bg   — background when checked
+ *   checked-on-color — text/icon color when checked
+ *   checked-off-bg  — background when unchecked
+ *   checked-off-color — text/icon color when unchecked
+ *
+ * Events:
+ *   change — detail: { checked: boolean }
+ */
+
+import { html, css, LuxElement, registerComponent } from '../../index.js';
+
+const styles = css`
+    :host {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        vertical-align: middle;
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    :host([disabled]) {
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    :host([loading]) {
+        pointer-events: none;
+    }
+
+    .track {
+        position: relative;
+        width: var(--sw-w, 40px);
+        height: var(--sw-h, 22px);
+        background: var(--sw-off-bg, rgb(var(--lux-border, 51 65 85)));
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        transition: background var(--lux-transition, 150ms ease);
+        flex-shrink: 0;
+    }
+
+    :host([checked]) .track {
+        background: var(--sw-on-bg, rgb(var(--lux-primary-500, 99 91 218)));
+    }
+
+    .thumb {
+        position: absolute;
+        top: calc((var(--sw-h, 22px) - var(--sw-thumb, 18px)) / 2);
+        left: calc((var(--sw-h, 22px) - var(--sw-thumb, 18px)) / 2);
+        width: var(--sw-thumb, 18px);
+        height: var(--sw-thumb, 18px);
+        background: var(--sw-thumb-bg, rgb(var(--lux-bg, 255 255 255)));
+        border-radius: inherit;
+        transition: transform var(--lux-transition, 150ms ease);
+        box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
+    }
+
+    :host([checked]) .thumb {
+        transform: translateX(calc(var(--sw-w, 40px) - var(--sw-h, 22px)));
+    }
+
+    .content {
+        font-size: var(--sw-font, 14px);
+        color: var(--sw-off-color, rgb(var(--lux-text, 241 245 249)));
+        transition: color var(--lux-transition, 150ms ease);
+    }
+
+    :host([checked]) .content {
+        color: var(--sw-on-color, rgb(var(--lux-text, 241 245 249)));
+    }
+
+    /* ── Size: sm ── */
+    :host([size='sm']) .track {
+        --sw-w: 32px;
+        --sw-h: 18px;
+        --sw-thumb: 14px;
+        --sw-font: 12px;
+    }
+
+    /* ── Size: md (default) ── */
+    /* uses CSS variables above */
+
+    /* ── Size: lg ── */
+    :host([size='lg']) .track {
+        --sw-w: 52px;
+        --sw-h: 28px;
+        --sw-thumb: 22px;
+        --sw-font: 16px;
+    }
+
+    /* ── Shape: square ── */
+    :host([shape='square']) .track,
+    :host([shape='square']) .thumb {
+        border-radius: 4px;
+    }
+
+    /* ── Shape: round (default) ── */
+    .track {
+        border-radius: 9999px;
+    }
+    .thumb {
+        border-radius: 9999px;
+    }
+
+    /* ── Loading ── */
+    :host([loading]) .thumb::after {
+        content: '';
+        position: absolute;
+        inset: 1px;
+        border: 2px solid rgb(var(--lux-border, 51 65 85) / 0.2);
+        border-top-color: rgb(var(--lux-text, 241 245 249));
+        border-radius: 50%;
+        animation: sw-spin 0.8s linear infinite;
+    }
+    @keyframes sw-spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+`;
+
+class LuxSwitch extends LuxElement {
+    static styles = styles;
+
+    static properties = {
+        checked: { type: Boolean, reflect: true },
+        disabled: { type: Boolean, reflect: true },
+        loading: { type: Boolean, reflect: true },
+        size: { type: String, reflect: true },
+        shape: { type: String, reflect: true },
+        checkedOnBg: { type: String, attribute: 'checked-on-bg', reflect: true },
+        checkedOnColor: { type: String, attribute: 'checked-on-color', reflect: true },
+        checkedOffBg: { type: String, attribute: 'checked-off-bg', reflect: true },
+        checkedOffColor: { type: String, attribute: 'checked-off-color', reflect: true },
+        toggle: { type: Function, attribute: false },
+    };
+
+    constructor() {
+        super();
+        this.checked = false;
+        this.disabled = false;
+        this.loading = false;
+        this.size = 'md';
+        this.shape = 'round';
+    }
+
+    updated() {
+        const s = this.style;
+        if (this.checkedOnBg) s.setProperty('--sw-on-bg', this.checkedOnBg);
+        if (this.checkedOnColor) s.setProperty('--sw-on-color', this.checkedOnColor);
+        if (this.checkedOffBg) s.setProperty('--sw-off-bg', this.checkedOffBg);
+        if (this.checkedOffColor) s.setProperty('--sw-off-color', this.checkedOffColor);
+    }
+
+    async _toggle() {
+        if (this.disabled || this.loading) return;
+
+        if (typeof this.toggle === 'function') {
+            this.loading = true;
+            try {
+                const result = await this.toggle();
+                if (result === true) {
+                    this.checked = !this.checked;
+                }
+            } catch {
+                // error — don't toggle
+            } finally {
+                this.loading = false;
+            }
+        } else {
+            this.checked = !this.checked;
+        }
+
+        this.emit('change', { checked: this.checked });
+    }
+
+    render() {
+        return html`
+            <div class="track" @click=${() => this._toggle()}>
+                <div class="thumb"></div>
+            </div>
+            <div class="content"><slot></slot></div>
+        `;
+    }
+}
+
+registerComponent('lux-switch', LuxSwitch);
+export default LuxSwitch;

package/src/components/lux-table/index.js

@@ -0,0 +1,105 @@
+/**
+ * lux-table — Table component.
+ *
+ * Props:
+ *   border, stripe, row-border, col-border, size, hover
+ */
+
+import { html, css, LuxElement, registerComponent } from '../../index.js';
+
+const styles = css`
+    :host {
+        display: block;
+        width: 100%;
+        margin: 12px 0;
+    }
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        font-size: 14px;
+    }
+    th,
+    td {
+        padding: 10px 16px;
+        text-align: left;
+        vertical-align: top;
+    }
+    th {
+        color: rgb(var(--lux-text-muted, 100 116 139));
+        font-weight: 500;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        background: rgb(var(--lux-bg-alt, 30 41 59));
+    }
+    td {
+        color: rgb(var(--lux-text-secondary, 148 163 184));
+    }
+    code {
+        font-family: 'SF Mono', Consolas, monospace;
+        font-size: 0.88em;
+        background: rgb(var(--lux-bg-alt, 30 41 59));
+        padding: 2px 6px;
+        border-radius: 4px;
+    }
+    :host([size='sm']) table {
+        font-size: 13px;
+    }
+    :host([size='sm']) th,
+    :host([size='sm']) td {
+        padding: 6px 12px;
+    }
+    :host([size='lg']) table {
+        font-size: 15px;
+    }
+    :host([size='lg']) th,
+    :host([size='lg']) td {
+        padding: 14px 20px;
+    }
+    :host([border]) table {
+        border: 1px solid rgb(var(--lux-border, 51 65 85));
+    }
+    :host([row-border]) th,
+    :host([row-border]) td {
+        border-bottom: 1px solid rgb(var(--lux-border, 51 65 85));
+    }
+    :host([col-border]) td + td,
+    :host([col-border]) th + th {
+        border-left: 1px solid rgb(var(--lux-border, 51 65 85));
+    }
+    :host([stripe]) tbody tr:nth-child(even) {
+        background: rgb(var(--lux-hover, 255 255 255 / 3%));
+    }
+    :host([hover]) tbody tr:hover {
+        background: rgb(var(--lux-hover, 255 255 255 / 5%));
+    }
+`;
+
+class LuxTable extends LuxElement {
+    static styles = styles;
+
+    static properties = {
+        border: { type: Boolean, reflect: true },
+        stripe: { type: Boolean, reflect: true },
+        rowBorder: { type: Boolean, attribute: 'row-border', reflect: true },
+        colBorder: { type: Boolean, attribute: 'col-border', reflect: true },
+        size: { type: String, reflect: true },
+        hover: { type: Boolean, reflect: true },
+    };
+
+    firstUpdated() {
+        const table = this.renderRoot.querySelector('table');
+        if (table) {
+            while (this.firstChild) {
+                table.appendChild(this.firstChild);
+            }
+        }
+    }
+
+    render() {
+        return html`<table></table>`;
+    }
+}
+
+registerComponent('lux-table', LuxTable);
+export default LuxTable;

package/src/core.js

@@ -0,0 +1,7 @@
+/**
+ * Lux Core — template engine + element base class
+ * Use this when you need Web Components but not router/i18n/theme.
+ */
+export { html, svg, css, render, isTemplateResult, nothing, escapeHtml } from './template.js';
+export { repeat, when, show, classMap, styleMap, guard } from './template.js';
+export { LuxElement, registerComponent, createComponent } from './element.js';