@chromvoid/uikit 0.1.0

package/dist/components/cv-meter.d.ts

@@ -0,0 +1,66 @@
+import type { PropertyValues } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export declare class CVMeter extends ReatomLitElement {
+    static elementName: string;
+    static get properties(): {
+        value: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        min: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        max: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        low: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        high: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        optimum: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        valueText: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        ariaLabelledBy: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        ariaDescribedBy: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    value: number;
+    min: number;
+    max: number;
+    low: number | null;
+    high: number | null;
+    optimum: number | null;
+    valueText: string;
+    ariaLabel: string;
+    ariaLabelledBy: string;
+    ariaDescribedBy: string;
+    private readonly idBase;
+    private model;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    private createModel;
+    private toFiniteOrUndefined;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/components/cv-meter.js

@@ -0,0 +1,154 @@
+import { createMeter } from '@chromvoid/headless-ui/meter';
+import { css, html, nothing } from 'lit';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+let cvMeterNonce = 0;
+export class CVMeter extends ReatomLitElement {
+    static elementName = 'cv-meter';
+    static get properties() {
+        return {
+            value: { type: Number, reflect: true },
+            min: { type: Number, reflect: true },
+            max: { type: Number, reflect: true },
+            low: { type: Number, reflect: true },
+            high: { type: Number, reflect: true },
+            optimum: { type: Number, reflect: true },
+            valueText: { type: String, attribute: 'value-text' },
+            ariaLabel: { type: String, attribute: 'aria-label' },
+            ariaLabelledBy: { type: String, attribute: 'aria-labelledby' },
+            ariaDescribedBy: { type: String, attribute: 'aria-describedby' },
+        };
+    }
+    idBase = `cv-meter-${++cvMeterNonce}`;
+    model;
+    constructor() {
+        super();
+        this.value = 0;
+        this.min = 0;
+        this.max = 100;
+        this.low = null;
+        this.high = null;
+        this.optimum = null;
+        this.valueText = '';
+        this.ariaLabel = '';
+        this.ariaLabelledBy = '';
+        this.ariaDescribedBy = '';
+        this.model = this.createModel();
+    }
+    static styles = [
+        css `
+      :host {
+        display: block;
+      }
+
+      [part='base'] {
+        position: relative;
+        inline-size: 100%;
+        block-size: var(--cv-meter-height, 10px);
+        border-radius: var(--cv-meter-border-radius, 999px);
+        border: 1px solid var(--cv-color-border, #2a3245);
+        background: var(--cv-color-surface, #141923);
+        overflow: hidden;
+      }
+
+      [part='indicator'] {
+        block-size: 100%;
+        inline-size: var(--cv-meter-width, 0%);
+        border-radius: inherit;
+        background: linear-gradient(
+          90deg,
+          var(--cv-color-primary, #65d7ff) 0%,
+          color-mix(in oklab, var(--cv-color-primary, #65d7ff) 70%, white) 100%
+        );
+        transition: inline-size var(--cv-meter-transition-duration, var(--cv-duration-normal, 220ms))
+          var(--cv-easing-standard, ease);
+      }
+
+      [part='indicator'][data-status='low'] {
+        background: linear-gradient(
+          90deg,
+          var(--cv-meter-suboptimum-color, var(--cv-color-warning, #ffbe65)) 0%,
+          color-mix(in oklab, var(--cv-meter-suboptimum-color, var(--cv-color-warning, #ffbe65)) 72%, white)
+            100%
+        );
+      }
+
+      [part='indicator'][data-status='high'] {
+        background: linear-gradient(
+          90deg,
+          var(--cv-meter-danger-color, var(--cv-color-danger, #ff7a8a)) 0%,
+          color-mix(in oklab, var(--cv-meter-danger-color, var(--cv-color-danger, #ff7a8a)) 72%, white) 100%
+        );
+      }
+
+      [part='indicator'][data-status='optimum'] {
+        background: linear-gradient(
+          90deg,
+          var(--cv-meter-optimum-color, var(--cv-color-success, #6ef7c8)) 0%,
+          color-mix(in oklab, var(--cv-meter-optimum-color, var(--cv-color-success, #6ef7c8)) 72%, white) 100%
+        );
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('min') ||
+            changedProperties.has('max') ||
+            changedProperties.has('low') ||
+            changedProperties.has('high') ||
+            changedProperties.has('optimum') ||
+            changedProperties.has('valueText') ||
+            changedProperties.has('ariaLabel') ||
+            changedProperties.has('ariaLabelledBy') ||
+            changedProperties.has('ariaDescribedBy')) {
+            this.model = this.createModel();
+            return;
+        }
+        if (changedProperties.has('value') && this.model.state.value() !== this.value) {
+            this.model.actions.setValue(this.value);
+        }
+    }
+    createModel() {
+        return createMeter({
+            idBase: this.idBase,
+            value: this.value,
+            min: this.min,
+            max: this.max,
+            low: this.toFiniteOrUndefined(this.low),
+            high: this.toFiniteOrUndefined(this.high),
+            optimum: this.toFiniteOrUndefined(this.optimum),
+            ariaLabel: this.ariaLabel || undefined,
+            ariaLabelledBy: this.ariaLabelledBy || undefined,
+            ariaDescribedBy: this.ariaDescribedBy || undefined,
+            formatValueText: this.valueText ? () => this.valueText : undefined,
+        });
+    }
+    toFiniteOrUndefined(value) {
+        return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+    }
+    render() {
+        const props = this.model.contracts.getMeterProps();
+        const percentage = Math.max(0, Math.min(100, this.model.state.percentage()));
+        const status = this.model.state.status();
+        return html `
+      <div
+        id=${props.id}
+        role=${props.role}
+        aria-valuenow=${props['aria-valuenow']}
+        aria-valuemin=${props['aria-valuemin']}
+        aria-valuemax=${props['aria-valuemax']}
+        aria-valuetext=${props['aria-valuetext'] ?? nothing}
+        aria-label=${props['aria-label'] ?? nothing}
+        aria-labelledby=${props['aria-labelledby'] ?? nothing}
+        aria-describedby=${props['aria-describedby'] ?? nothing}
+        part="base"
+      >
+        <div part="indicator" data-status=${status} style=${`--cv-meter-width:${percentage}%;`}><span part="label"><slot></slot></span></div>
+      </div>
+    `;
+    }
+}

package/dist/components/cv-number.d.ts

@@ -0,0 +1,139 @@
+import type { PropertyValues } from 'lit';
+import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedReatomElement.js';
+type CVNumberSize = 'small' | 'medium' | 'large';
+type CVNumberVariant = 'outlined' | 'filled';
+export interface CVNumberValueDetail {
+    value: number;
+}
+export type CVNumberChangeEvent = CustomEvent<CVNumberValueDetail>;
+export type CVNumberClearEvent = CustomEvent<Record<string, never>>;
+export type CVNumberFocusEvent = CustomEvent<Record<string, never>>;
+export type CVNumberBlurEvent = CustomEvent<Record<string, never>>;
+export interface CVNumberEventMap {
+    'cv-change': CVNumberChangeEvent;
+    'cv-clear': CVNumberClearEvent;
+    'cv-focus': CVNumberFocusEvent;
+    'cv-blur': CVNumberBlurEvent;
+}
+export declare class CVNumber extends FormAssociatedReatomElement {
+    static elementName: string;
+    static hostDisplay: "inline-block";
+    static get properties(): {
+        value: {
+            type: NumberConstructor;
+        };
+        defaultValue: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        min: {
+            type: NumberConstructor;
+        };
+        max: {
+            type: NumberConstructor;
+        };
+        step: {
+            type: NumberConstructor;
+        };
+        largeStep: {
+            type: NumberConstructor;
+            attribute: string;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readOnly: {
+            type: BooleanConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        clearable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        stepper: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        ariaLabel: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        ariaLabelledBy: {
+            type: StringConstructor;
+            attribute: string;
+        };
+        ariaDescribedBy: {
+            type: StringConstructor;
+            attribute: string;
+        };
+    };
+    value: number;
+    defaultValue: number | undefined;
+    min: number | undefined;
+    max: number | undefined;
+    step: number;
+    largeStep: number;
+    name: string;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
+    clearable: boolean;
+    stepper: boolean;
+    placeholder: string;
+    size: CVNumberSize;
+    variant: CVNumberVariant;
+    ariaLabel: string;
+    ariaLabelledBy: string;
+    ariaDescribedBy: string;
+    private readonly idBase;
+    private model;
+    private modelInitialized;
+    private _valueOnFocus;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    private isEffectivelyDisabled;
+    protected isFormAssociatedDisabled(): boolean;
+    protected getFormAssociatedValue(): string | File | FormData | null;
+    private toFiniteOrUndefined;
+    private createModel;
+    private ensureModel;
+    willUpdate(changedProperties: PropertyValues): void;
+    private reflectHostAttributes;
+    private syncValueFromModel;
+    protected onFormDisabledChanged(_disabled: boolean): void;
+    protected onFormReset(): void;
+    protected onFormStateRestore(state: string | File | FormData | null): void;
+    get type(): string;
+    focus(options?: FocusOptions): void;
+    select(): void;
+    private handleNativeInput;
+    private handleNativeFocus;
+    private handleNativeBlur;
+    private handleNativeKeyDown;
+    private handleIncrementClick;
+    private handleDecrementClick;
+    private handleClearClick;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export {};