@nuraly/lumenui 0.1.0

package/dist/src/components/slider-input/slider-input.component.js

@@ -0,0 +1,191 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import styles from './slider-input.style.js';
+import { debounce } from './utils/index.js';
+export class SliderInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.max = 100;
+        this.min = 0;
+        this.step = 1;
+        this.value = 0;
+        this._actualMin = 0;
+        this._actualMax = 0;
+        /**
+         * Dispatches change events (debounced to avoid excessive event firing).
+         */
+        this._dispatchChangeEvents = debounce(() => {
+            // Dispatch the change event for range-slider. (For event handlers.)
+            this.dispatchEvent(new Event('change'));
+            this.dispatchEvent(new CustomEvent('changed', {
+                detail: {
+                    value: Number(this.value)
+                }
+            }));
+        }, 50); // Reduced debounce time for more responsive events
+    }
+    firstUpdated() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.updateComplete;
+            this._input = this.shadowRoot.querySelector('input');
+            this._slider = this.shadowRoot.querySelector('.range-slider');
+            this._thumb = this.shadowRoot.querySelector('.range-thumb');
+            this._actualMin = this.min;
+            this._actualMax = this.max;
+            if (this.step) {
+                const minRemainder = this.min % this.step;
+                const maxRemainder = this.max % this.step;
+                if (minRemainder !== 0) {
+                    this.min = this.min - minRemainder;
+                }
+                if (maxRemainder !== 0) {
+                    this.max = this.max + this.step - maxRemainder;
+                }
+            }
+            // Initial visual update
+            requestAnimationFrame(() => {
+                this._updateSliderVisuals();
+            });
+        });
+    }
+    render() {
+        return html `
+		  <div class="slider-wrapper">
+	        <input
+	          max=${this.max}
+	          min=${this.min}
+	          step=${this.step}
+	          type="range"
+	          value=${this.value}
+	          ?disabled=${this.disabled}
+	          @input=${this._inputHandler}
+	          @change=${this._changeHandler}
+	        />
+            <div class="range-container">
+	          <div class="range-slider"></div>
+	          <div class="range-slider-value"></div>
+	          <div class="range-thumb"></div>
+	        </div>
+	      </div>`;
+    }
+    updated(changedProps) {
+        if (changedProps.has('value') || changedProps.has('min') || changedProps.has('max')) {
+            // Use requestAnimationFrame to ensure DOM is updated before calculating positions
+            requestAnimationFrame(() => {
+                this._updateSliderVisuals();
+            });
+        }
+    }
+    /**
+     * Handles input events for immediate visual feedback during dragging.
+     */
+    _inputHandler(event) {
+        event.stopPropagation();
+        const input = event.target;
+        const newValue = Number(input.value);
+        // Clamp value to actual min/max bounds
+        this.value = newValue > this._actualMax
+            ? this._actualMax
+            : newValue < this._actualMin
+                ? this._actualMin
+                : newValue;
+        // Update visuals immediately for smooth dragging
+        this._updateSliderVisuals();
+        this.requestUpdate();
+    }
+    /**
+     * Handles change events when dragging is complete.
+     */
+    _changeHandler(event) {
+        event.stopPropagation();
+        const input = event.target;
+        const newValue = Number(input.value);
+        // Clamp value to actual min/max bounds
+        this.value = newValue > this._actualMax
+            ? this._actualMax
+            : newValue < this._actualMin
+                ? this._actualMin
+                : newValue;
+        // Dispatch events when dragging is complete
+        this._dispatchChangeEvents();
+        this.requestUpdate();
+    }
+    /**
+     * Updates the slider's visual appearance immediately (no debounce for smooth dragging).
+     */
+    _updateSliderVisuals() {
+        if (!this._thumb || !this._slider)
+            return;
+        const min = this.min < this._actualMin ? this._actualMin : this.min;
+        const max = this.max > this._actualMax ? this._actualMax : this.max;
+        const range = max - min;
+        if (range === 0)
+            return; // Avoid division by zero
+        const percentage = Math.max(0, Math.min(1, (this.value - min) / range));
+        const thumbWidth = this._thumb.offsetWidth || 20; // Fallback if not measured yet
+        const sliderWidth = this._slider.offsetWidth || 200; // Fallback if not measured yet
+        const sliderValueWidth = `${percentage * 100}%`;
+        // Calculate thumb position so it stays within track bounds
+        const maxThumbOffset = sliderWidth - thumbWidth;
+        const thumbOffset = `${Math.max(0, Math.min(maxThumbOffset, maxThumbOffset * percentage))}px`;
+        this.style.setProperty('--nr-slider-value-width', sliderValueWidth);
+        this.style.setProperty('--nr-slider-thumb-offset', thumbOffset);
+    }
+    /**
+     * Updates the slider's value width and thumb position (UI) and dispatches events.
+     */
+    _updateSlider() {
+        this._updateSliderVisuals();
+        this._dispatchChangeEvents();
+        this.requestUpdate();
+    }
+}
+SliderInput.styles = styles;
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SliderInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number })
+], SliderInput.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], SliderInput.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], SliderInput.prototype, "step", void 0);
+__decorate([
+    property({ type: Number })
+], SliderInput.prototype, "value", void 0);
+__decorate([
+    state()
+], SliderInput.prototype, "_actualMin", void 0);
+__decorate([
+    state()
+], SliderInput.prototype, "_actualMax", void 0);
+__decorate([
+    state()
+], SliderInput.prototype, "_input", void 0);
+__decorate([
+    state()
+], SliderInput.prototype, "_slider", void 0);
+__decorate([
+    state()
+], SliderInput.prototype, "_thumb", void 0);
+customElements.define('nr-slider-input', SliderInput);
+//# sourceMappingURL=slider-input.component.js.map

package/dist/src/components/slider-input/slider-input.style.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=slider-input.style.d.ts.map

package/dist/src/components/slider-input/slider-input.style.js

@@ -0,0 +1,171 @@
+import { css } from "lit";
+import { styleVariables } from './slider-input.style.variables.js';
+export default css `
+  ${styleVariables}
+
+  :host {
+    display: inline-block;
+    width: var(--nuraly-slider-input-local-width);
+    font-family: var(--nuraly-slider-input-local-font-family);
+    font-size: var(--nuraly-slider-input-local-font-size);
+    font-weight: var(--nuraly-slider-input-local-font-weight);
+  }
+
+  /* Host attribute selectors for configuration */
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .slider-wrapper {
+    position: relative;
+    padding: calc(var(--nuraly-slider-input-local-thumb-diameter) / 2) 0;
+  }
+
+  .range-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .range-slider,
+  .range-slider-value {
+    border-radius: var(--nuraly-slider-input-local-border-radius);
+    height: var(--nuraly-slider-input-local-track-height);
+    position: absolute;
+    top: calc((var(--nuraly-slider-input-local-thumb-diameter) - var(--nuraly-slider-input-local-track-height)) / 2);
+    transition: all var(--nuraly-slider-input-local-transition-duration) var(--nuraly-slider-input-local-transition-timing);
+  }
+
+  .range-slider {
+    background: var(--nuraly-slider-input-local-track-color);
+    width: 100%;
+    border: var(--nuraly-slider-input-local-border-width) solid var(--nuraly-slider-input-local-border-color);
+  }
+
+  .range-slider-value {
+    background: var(--nuraly-slider-input-local-track-filled-color);
+    width: var(--nr-slider-value-width, 0%);
+    z-index: calc(var(--nuraly-slider-input-local-z-index) + 1);
+  }
+
+  .range-thumb {
+    background: var(--nuraly-slider-input-local-thumb-color);
+    border: 2px solid var(--nuraly-slider-input-local-thumb-border-color);
+    border-radius: var(--nuraly-slider-input-local-thumb-border-radius);
+    height: var(--nuraly-slider-input-local-thumb-diameter);
+    width: var(--nuraly-slider-input-local-thumb-diameter);
+    position: absolute;
+    top: calc((var(--nuraly-slider-input-local-track-height) - var(--nuraly-slider-input-local-thumb-diameter)) / 2);
+    left: var(--nr-slider-thumb-offset, 0px);
+    cursor: pointer;
+    z-index: calc(var(--nuraly-slider-input-local-z-index) + 2);
+    box-shadow: var(--nuraly-slider-input-local-thumb-shadow);
+    transition: all var(--nuraly-slider-input-local-transition-duration) var(--nuraly-slider-input-local-transition-timing);
+  }
+
+  .range-thumb:hover {
+    background: var(--nuraly-slider-input-local-thumb-hover-color);
+    box-shadow: var(--nuraly-slider-input-local-focus-shadow);
+  }
+
+  .range-thumb:active {
+    background: var(--nuraly-slider-input-local-thumb-active-color);
+    box-shadow: var(--nuraly-slider-input-local-focus-shadow);
+  }
+
+  input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    width: 100%;
+    cursor: pointer;
+    z-index: calc(var(--nuraly-slider-input-local-z-index) + 3);
+    appearance: none;
+    background: transparent;
+    pointer-events: auto;
+  }
+
+  input::-webkit-slider-thumb {
+    appearance: none;
+    width: var(--nuraly-slider-input-local-thumb-diameter);
+    height: var(--nuraly-slider-input-local-thumb-diameter);
+    background: transparent;
+    cursor: pointer;
+  }
+
+  input::-moz-range-thumb {
+    appearance: none;
+    width: var(--nuraly-slider-input-local-thumb-diameter);
+    height: var(--nuraly-slider-input-local-thumb-diameter);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  input:focus-visible + .range-container .range-thumb {
+    box-shadow: var(--nuraly-slider-input-local-focus-shadow);
+  }
+
+  /* Disabled state styling */
+  :host([disabled]) .range-slider {
+    background: var(--nuraly-slider-input-local-disabled-track-color);
+    border-color: var(--nuraly-slider-input-local-disabled-border-color);
+  }
+
+  :host([disabled]) .range-slider-value {
+    background: var(--nuraly-slider-input-local-disabled-color);
+  }
+
+  :host([disabled]) .range-thumb {
+    background: var(--nuraly-slider-input-local-disabled-thumb-color);
+    border-color: var(--nuraly-slider-input-local-disabled-border-color);
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  :host([disabled]) input {
+    cursor: not-allowed;
+  }
+
+  /* Size variants */
+  :host([size="small"]) {
+    --nuraly-slider-input-local-track-height: var(--nuraly-slider-input-local-small-height);
+    --nuraly-slider-input-local-thumb-diameter: var(--nuraly-slider-input-local-small-thumb-diameter);
+  }
+
+  :host([size="large"]) {
+    --nuraly-slider-input-local-track-height: var(--nuraly-slider-input-local-large-height);
+    --nuraly-slider-input-local-thumb-diameter: var(--nuraly-slider-input-local-large-thumb-diameter);
+  }
+
+  /* Error state */
+  :host([error]) .range-slider-value {
+    background: var(--nuraly-slider-input-local-error-color);
+  }
+
+  :host([error]) .range-thumb {
+    border-color: var(--nuraly-slider-input-local-error-color);
+  }
+
+  /* Warning state */
+  :host([warning]) .range-slider-value {
+    background: var(--nuraly-slider-input-local-warning-color);
+  }
+
+  :host([warning]) .range-thumb {
+    border-color: var(--nuraly-slider-input-local-warning-color);
+  }
+
+  /* Success state */
+  :host([success]) .range-slider-value {
+    background: var(--nuraly-slider-input-local-success-color);
+  }
+
+  :host([success]) .range-thumb {
+    border-color: var(--nuraly-slider-input-local-success-color);
+  }
+`;
+//# sourceMappingURL=slider-input.style.js.map

package/dist/src/components/slider-input/slider-input.style.variables.d.ts

@@ -0,0 +1,2 @@
+export declare const styleVariables: import("lit").CSSResult;
+//# sourceMappingURL=slider-input.style.variables.d.ts.map

package/dist/src/components/slider-input/slider-input.style.variables.js

@@ -0,0 +1,59 @@
+import { css } from 'lit';
+export const styleVariables = css `
+  :host {
+    /* Component dimensions */
+    --nuraly-slider-input-local-width: var(--nuraly-size-slider-input-width, 100%);
+    --nuraly-slider-input-local-track-height: var(--nuraly-size-slider-input-track-height, 8px);
+    --nuraly-slider-input-local-thumb-diameter: var(--nuraly-size-slider-input-thumb-diameter, 20px);
+    --nuraly-slider-input-local-border-width: var(--nuraly-border-slider-input-width, 1px);
+
+    /* Size variants */
+    --nuraly-slider-input-local-small-height: var(--nuraly-size-slider-input-small-height, 6px);
+    --nuraly-slider-input-local-small-thumb-diameter: var(--nuraly-size-slider-input-small-thumb-diameter, 16px);
+    --nuraly-slider-input-local-large-height: var(--nuraly-size-slider-input-large-height, 10px);
+    --nuraly-slider-input-local-large-thumb-diameter: var(--nuraly-size-slider-input-large-thumb-diameter, 24px);
+
+    /* Typography */
+    --nuraly-slider-input-local-font-family: var(--nuraly-typograpnr-slider-input-font-family, var(--nuraly-font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif));
+    --nuraly-slider-input-local-font-size: var(--nuraly-typograpnr-slider-input-font-size, var(--nuraly-font-size-base, 14px));
+    --nuraly-slider-input-local-font-weight: var(--nuraly-typograpnr-slider-input-font-weight, var(--nuraly-font-weight-normal, 400));
+
+    /* Border radius */
+    --nuraly-slider-input-local-border-radius: var(--nuraly-border-slider-input-radius, var(--nuraly-border-radius-base, 6px));
+    --nuraly-slider-input-local-thumb-border-radius: var(--nuraly-border-slider-input-thumb-radius, var(--nuraly-border-radius-round, 50%));
+
+    /* Colors - Track */
+    --nuraly-slider-input-local-track-color: var(--nuraly-color-slider-input-track, var(--nuraly-color-neutral-200, #e5e7eb));
+    --nuraly-slider-input-local-track-filled-color: var(--nuraly-color-slider-input-track-filled, var(--nuraly-color-primary-500, #3b82f6));
+    --nuraly-slider-input-local-border-color: var(--nuraly-color-slider-input-border, var(--nuraly-color-neutral-300, #d1d5db));
+
+    /* Colors - Thumb */
+    --nuraly-slider-input-local-thumb-color: var(--nuraly-color-slider-input-thumb, var(--nuraly-color-white, #ffffff));
+    --nuraly-slider-input-local-thumb-border-color: var(--nuraly-color-slider-input-thumb-border, var(--nuraly-color-primary-500, #3b82f6));
+    --nuraly-slider-input-local-thumb-hover-color: var(--nuraly-color-slider-input-thumb-hover, var(--nuraly-color-primary-50, #eff6ff));
+    --nuraly-slider-input-local-thumb-active-color: var(--nuraly-color-slider-input-thumb-active, var(--nuraly-color-primary-100, #dbeafe));
+
+    /* Colors - Disabled states */
+    --nuraly-slider-input-local-disabled-track-color: var(--nuraly-color-slider-input-disabled-track, var(--nuraly-color-neutral-100, #f5f5f5));
+    --nuraly-slider-input-local-disabled-color: var(--nuraly-color-slider-input-disabled, var(--nuraly-color-neutral-300, #d1d5db));
+    --nuraly-slider-input-local-disabled-thumb-color: var(--nuraly-color-slider-input-disabled-thumb, var(--nuraly-color-neutral-200, #e5e7eb));
+    --nuraly-slider-input-local-disabled-border-color: var(--nuraly-color-slider-input-disabled-border, var(--nuraly-color-neutral-200, #e5e7eb));
+
+    /* Colors - Status states */
+    --nuraly-slider-input-local-error-color: var(--nuraly-color-slider-input-error, var(--nuraly-color-error-500, #ef4444));
+    --nuraly-slider-input-local-warning-color: var(--nuraly-color-slider-input-warning, var(--nuraly-color-warning-500, #f59e0b));
+    --nuraly-slider-input-local-success-color: var(--nuraly-color-slider-input-success, var(--nuraly-color-success-500, #10b981));
+
+    /* Shadows */
+    --nuraly-slider-input-local-thumb-shadow: var(--nuraly-shadow-slider-input-thumb, var(--nuraly-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)));
+    --nuraly-slider-input-local-focus-shadow: var(--nuraly-shadow-slider-input-focus, var(--nuraly-shadow-focus, 0 0 0 3px rgba(59, 130, 246, 0.15)));
+
+    /* Elevation */
+    --nuraly-slider-input-local-z-index: var(--nuraly-elevation-slider-input-z-index, var(--nuraly-z-index-base, 1));
+
+    /* Transitions */
+    --nuraly-slider-input-local-transition-duration: var(--nuraly-transition-slider-input-duration, var(--nuraly-transition-duration-base, 150ms));
+    --nuraly-slider-input-local-transition-timing: var(--nuraly-transition-slider-input-timing, var(--nuraly-transition-timing-ease, ease));
+  }
+`;
+//# sourceMappingURL=slider-input.style.variables.js.map

package/dist/src/components/slider-input/slider-input.types.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Slider Input Types
+ * Type definitions for the slider input component
+ */
+export interface SliderInputChangeEvent extends CustomEvent {
+    detail: {
+        value: number;
+        min: number;
+        max: number;
+    };
+}
+export interface SliderInputOptions {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    disabled?: boolean;
+}
+export type SliderInputSize = 'small' | 'medium' | 'large';
+export type SliderInputVariant = 'default' | 'primary' | 'success' | 'warning' | 'error';
+//# sourceMappingURL=slider-input.types.d.ts.map

package/dist/src/components/slider-input/slider-input.types.js

@@ -0,0 +1,6 @@
+/**
+ * Slider Input Types
+ * Type definitions for the slider input component
+ */
+export {};
+//# sourceMappingURL=slider-input.types.js.map