@chromvoid/uikit 0.1.0

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

@@ -0,0 +1,57 @@
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+export declare function setIconBasePath(path: string): void;
+export declare function getIconBasePath(): string;
+export declare function registerIconCollection(name: string, path: string): void;
+export declare function unregisterIconCollection(name: string): void;
+export type CVIconSize = 'xs' | 's' | 'm' | 'md' | 'l' | 'lg';
+export type CVIconColor = 'default' | 'muted' | 'primary' | 'success' | 'warning' | 'danger';
+export declare class CVIcon extends ReatomLitElement {
+    static elementName: string;
+    private static svgCache;
+    private static inFlight;
+    static get properties(): {
+        name: {
+            type: StringConstructor;
+        };
+        src: {
+            type: StringConstructor;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        color: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        label: {
+            type: StringConstructor;
+        };
+    };
+    name: string;
+    src: string | undefined;
+    size: CVIconSize;
+    color: CVIconColor;
+    label?: string;
+    private svgMarkup;
+    private hasSlottedContent;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    /**
+     * Eagerly fetch and cache SVG for the given icon name(s) so that
+     * later renders are instant (no network wait).
+     */
+    static prefetch(names: string | string[]): void;
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    private static resolveIconName;
+    private static getCollectionBasePath;
+    private static getIconUrls;
+    private loadSvg;
+    private static fetchSvg;
+    private static fetchSingleSvg;
+    private handleSlotChange;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export type LucideIconName = string;
+export type IconName = LucideIconName;

package/dist/components/cv-icon.js

@@ -0,0 +1,352 @@
+import { css, html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ReatomLitElement } from '../reatom-lit/ReatomLitElement.js';
+let iconBasePath = '/assets/icons/lucide';
+const iconCollections = new Map();
+function normalizeBasePath(path) {
+    return path.endsWith('/') ? path.slice(0, -1) : path;
+}
+function normalizeCollectionName(name) {
+    return name.trim().toLowerCase();
+}
+export function setIconBasePath(path) {
+    iconBasePath = normalizeBasePath(path);
+}
+export function getIconBasePath() {
+    return iconBasePath;
+}
+export function registerIconCollection(name, path) {
+    iconCollections.set(normalizeCollectionName(name), normalizeBasePath(path));
+}
+export function unregisterIconCollection(name) {
+    iconCollections.delete(normalizeCollectionName(name));
+}
+const BOOTSTRAP_TO_LUCIDE = {
+    folder: 'folder',
+    'folder-fill': 'folder',
+    'folder-plus': 'folder-plus',
+    'folder2-open': 'folder-open',
+    'folder-open': 'folder-open',
+    'folder-x': 'folder-x',
+    'file-earmark-text': 'file-text',
+    'file-earmark': 'file',
+    'file-earmark-image': 'file-image',
+    'file-earmark-pdf': 'file-text',
+    'file-earmark-word': 'file-text',
+    'file-earmark-excel': 'file-spreadsheet',
+    'file-earmark-ppt': 'file-text',
+    'file-earmark-zip': 'file-archive',
+    'file-earmark-music': 'file-music',
+    'file-earmark-play': 'file-play',
+    'file-earmark-code': 'file-code',
+    file: 'file',
+    'chevron-down': 'chevron-down',
+    'chevron-up': 'chevron-up',
+    'chevron-right': 'chevron-right',
+    'chevron-left': 'chevron-left',
+    'arrow-up': 'arrow-up',
+    'arrow-down': 'arrow-down',
+    'arrow-left': 'arrow-left',
+    'arrow-right': 'arrow-right',
+    'arrow-clockwise': 'refresh-cw',
+    'arrow-repeat': 'refresh-cw',
+    'arrows-move': 'move',
+    upload: 'upload',
+    download: 'download',
+    'cloud-upload': 'cloud-upload',
+    'cloud-download': 'cloud-download',
+    trash: 'trash-2',
+    pencil: 'pencil',
+    'pencil-square': 'square-pen',
+    copy: 'copy',
+    clipboard: 'clipboard',
+    clipboard2: 'clipboard',
+    eye: 'eye',
+    search: 'search',
+    x: 'x',
+    'x-lg': 'x',
+    'plus-lg': 'plus',
+    check: 'check',
+    justify: 'align-justify',
+    bars: 'menu',
+    menu: 'menu',
+    list: 'list',
+    'list-check': 'list-checks',
+    grid: 'grid-2x2',
+    table: 'table',
+    funnel: 'funnel',
+    'three-dots': 'ellipsis',
+    'three-dots-vertical': 'ellipsis-vertical',
+    'dots-vertical': 'ellipsis-vertical',
+    'ellipsis-vertical': 'ellipsis-vertical',
+    'more-vertical': 'ellipsis-vertical',
+    kebab: 'ellipsis-vertical',
+    ellipsis: 'ellipsis',
+    more: 'ellipsis',
+    'info-circle': 'info',
+    'info-circle-fill': 'info',
+    info: 'info',
+    'check-circle-fill': 'check-circle',
+    'x-circle-fill': 'x-circle',
+    'exclamation-triangle': 'triangle-alert',
+    'exclamation-triangle-fill': 'triangle-alert',
+    'pause-circle-fill': 'pause-circle',
+    house: 'home',
+    'house-fill': 'home',
+    home: 'home',
+    key: 'key',
+    lock: 'lock',
+    database: 'database',
+    activity: 'activity',
+    settings: 'settings',
+    gear: 'settings',
+    tags: 'tags',
+    tag: 'tag',
+    star: 'star',
+    clock: 'clock',
+    'wifi-off': 'wifi-off',
+    wifi: 'wifi',
+    globe: 'globe',
+    'person-circle': 'user-circle',
+    user: 'user',
+    'shield-lock': 'shield',
+    'shield-check': 'shield-check',
+    sun: 'sun',
+    moon: 'moon',
+    eyeglasses: 'glasses',
+    'calendar-plus': 'calendar-plus',
+    paperclip: 'paperclip',
+    'box-arrow-up-right': 'external-link',
+    'layout-three-columns': 'columns-3',
+    columns: 'columns-2',
+    'sort-alpha-down': 'arrow-down-a-z',
+    'sort-alpha-up': 'arrow-up-a-z',
+    hdd: 'hard-drive',
+    'disc-fill': 'disc',
+    sticky: 'sticky-note',
+    'sticky-note': 'sticky-note',
+    'clock-history': 'history',
+    history: 'history',
+};
+export class CVIcon extends ReatomLitElement {
+    static elementName = 'cv-icon';
+    static svgCache = new Map();
+    static inFlight = new Map();
+    static get properties() {
+        return {
+            name: { type: String },
+            src: { type: String },
+            size: { type: String, reflect: true },
+            color: { type: String, reflect: true },
+            label: { type: String },
+        };
+    }
+    svgMarkup = '';
+    hasSlottedContent = false;
+    constructor() {
+        super();
+        this.name = '';
+        this.size = 'm';
+        this.color = 'default';
+    }
+    static styles = [
+        css `
+      :host {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+        line-height: 0;
+        color: inherit;
+        inline-size: var(--cv-icon-size, 1em);
+        block-size: var(--cv-icon-size, 1em);
+      }
+
+      :host([size='xs']) {
+        --cv-icon-size: 12px;
+      }
+
+      :host([size='s']) {
+        --cv-icon-size: 16px;
+      }
+
+      :host([size='m']),
+      :host([size='md']) {
+        --cv-icon-size: 20px;
+      }
+
+      :host([size='l']),
+      :host([size='lg']) {
+        --cv-icon-size: 24px;
+      }
+
+      :host([color='muted']) {
+        color: var(--cv-color-text-muted, #9aa6bf);
+      }
+
+      :host([color='primary']) {
+        color: var(--cv-color-primary, #65d7ff);
+      }
+
+      :host([color='success']) {
+        color: var(--cv-color-success, #6ef7c8);
+      }
+
+      :host([color='warning']) {
+        color: var(--cv-color-warning, #ffd36e);
+      }
+
+      :host([color='danger']) {
+        color: var(--cv-color-danger, #ff7d86);
+      }
+
+      .icon {
+        display: contents;
+      }
+
+      .icon svg,
+      ::slotted(svg) {
+        inline-size: 100%;
+        block-size: 100%;
+        display: block;
+        stroke: currentColor;
+        fill: none;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      :host([fill]) .icon svg,
+      :host([fill]) ::slotted(svg) {
+        fill: currentColor;
+        stroke: none;
+      }
+
+      :host(:not([data-slotted])) slot {
+        display: none;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    /**
+     * Eagerly fetch and cache SVG for the given icon name(s) so that
+     * later renders are instant (no network wait).
+     */
+    static prefetch(names) {
+        const list = Array.isArray(names) ? names : [names];
+        for (const name of list) {
+            const urls = CVIcon.getIconUrls(name);
+            void CVIcon.fetchSvg(urls);
+        }
+    }
+    willUpdate(changedProperties) {
+        super.willUpdate(changedProperties);
+        if (changedProperties.has('src') && this.src) {
+            void this.loadSvg(this.src);
+            return;
+        }
+        if (changedProperties.has('name') && this.name && !this.src) {
+            void this.loadSvg(CVIcon.getIconUrls(this.name));
+        }
+    }
+    static resolveIconName(name) {
+        return BOOTSTRAP_TO_LUCIDE[name] ?? name;
+    }
+    static getCollectionBasePath(name) {
+        const normalizedName = normalizeCollectionName(name);
+        if (normalizedName === 'lucide') {
+            return iconBasePath;
+        }
+        return iconCollections.get(normalizedName) ?? null;
+    }
+    static getIconUrls(name) {
+        const separatorIndex = name.indexOf(':');
+        if (separatorIndex <= 0 || separatorIndex === name.length - 1) {
+            return [`${iconBasePath}/${CVIcon.resolveIconName(name)}.svg`];
+        }
+        const collectionName = name.slice(0, separatorIndex);
+        const iconName = name.slice(separatorIndex + 1);
+        const collectionBasePath = CVIcon.getCollectionBasePath(collectionName);
+        const urls = [];
+        if (collectionBasePath) {
+            urls.push(`${collectionBasePath}/${iconName}.svg`);
+        }
+        const fallbackUrl = `${iconBasePath}/${CVIcon.resolveIconName(iconName)}.svg`;
+        if (!urls.includes(fallbackUrl)) {
+            urls.push(fallbackUrl);
+        }
+        return urls;
+    }
+    async loadSvg(urls) {
+        this.svgMarkup = await CVIcon.fetchSvg(urls);
+        this.requestUpdate();
+    }
+    static async fetchSvg(urls) {
+        const candidates = Array.isArray(urls) ? urls : [urls];
+        for (const url of candidates) {
+            const svg = await CVIcon.fetchSingleSvg(url);
+            if (svg) {
+                return svg;
+            }
+        }
+        return '';
+    }
+    static async fetchSingleSvg(url) {
+        const cached = CVIcon.svgCache.get(url);
+        if (cached)
+            return cached;
+        const inFlight = CVIcon.inFlight.get(url);
+        if (inFlight)
+            return inFlight;
+        const promise = (async () => {
+            try {
+                const response = await fetch(url);
+                if (!response.ok) {
+                    CVIcon.inFlight.delete(url);
+                    return '';
+                }
+                const svg = await response.text();
+                CVIcon.svgCache.set(url, svg);
+                CVIcon.inFlight.delete(url);
+                return svg;
+            }
+            catch {
+                CVIcon.inFlight.delete(url);
+                return '';
+            }
+        })();
+        CVIcon.inFlight.set(url, promise);
+        return promise;
+    }
+    handleSlotChange(event) {
+        const slot = event.target;
+        const nodes = slot.assignedNodes({ flatten: true });
+        this.hasSlottedContent = nodes.some((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName === 'SVG');
+        if (this.hasSlottedContent) {
+            this.setAttribute('data-slotted', '');
+            return;
+        }
+        this.removeAttribute('data-slotted');
+    }
+    render() {
+        const ariaHidden = this.label ? 'false' : 'true';
+        const ariaLabel = this.label ?? '';
+        if (this.svgMarkup && !this.hasSlottedContent) {
+            return html `
+        <span class="icon" role="img" aria-hidden=${ariaHidden} aria-label=${ariaLabel}>
+          ${unsafeHTML(this.svgMarkup)}
+        </span>
+      `;
+        }
+        return html `
+      <span class="icon" role="img" aria-hidden=${ariaHidden} aria-label=${ariaLabel}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+        ${this.svgMarkup ? unsafeHTML(this.svgMarkup) : ''}
+      </span>
+    `;
+    }
+}

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

@@ -0,0 +1,127 @@
+import { type InputType } from '@chromvoid/headless-ui/input';
+import type { PropertyValues } from 'lit';
+import { FormAssociatedReatomElement } from '../form-associated/FormAssociatedReatomElement.js';
+import type { FormAssociatedValidity } from '../form-associated/withFormAssociated.js';
+type CVInputSize = 'small' | 'medium' | 'large';
+type CVInputVariant = 'outlined' | 'filled';
+export interface CVInputValueDetail {
+    value: string;
+}
+export type CVInputInputEvent = CustomEvent<CVInputValueDetail>;
+export type CVInputChangeEvent = CustomEvent<CVInputValueDetail>;
+export type CVInputClearEvent = CustomEvent<Record<string, never>>;
+export type CVInputFocusEvent = CustomEvent<Record<string, never>>;
+export type CVInputBlurEvent = CustomEvent<Record<string, never>>;
+export interface CVInputEventMap {
+    'cv-input': CVInputInputEvent;
+    'cv-change': CVInputChangeEvent;
+    'cv-clear': CVInputClearEvent;
+    'cv-focus': CVInputFocusEvent;
+    'cv-blur': CVInputBlurEvent;
+}
+export declare class CVInput extends FormAssociatedReatomElement {
+    static elementName: string;
+    static hostDisplay: "inline-block";
+    static get properties(): {
+        value: {
+            type: StringConstructor;
+        };
+        type: {
+            type: StringConstructor;
+        };
+        placeholder: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        clearable: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        passwordToggle: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: string;
+        };
+        size: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+        };
+        autofocus: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        autocomplete: {
+            type: StringConstructor;
+        };
+        maxlength: {
+            type: NumberConstructor;
+        };
+        invalid: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    value: string;
+    type: InputType;
+    placeholder: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    clearable: boolean;
+    passwordToggle: boolean;
+    size: CVInputSize;
+    variant: CVInputVariant;
+    name: string;
+    autofocus: boolean;
+    autocomplete: string;
+    maxlength: number | undefined;
+    invalid: boolean;
+    private model;
+    private _valueOnFocus;
+    private defaultValue;
+    private didCaptureDefaultValue;
+    private didAutoFocus;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    willUpdate(changedProperties: PropertyValues): void;
+    protected onFormDisabledChanged(_disabled: boolean): void;
+    protected onFormReset(): void;
+    protected onFormStateRestore(state: string | File | FormData | null): void;
+    focus(options?: FocusOptions): void;
+    select(): void;
+    private createModel;
+    private isEffectivelyDisabled;
+    protected isFormAssociatedDisabled(): boolean;
+    protected getFormAssociatedValue(): string | File | FormData | null;
+    protected getFormAssociatedValidity(): FormAssociatedValidity;
+    private scheduleAutofocus;
+    private handleNativeInput;
+    private handleNativeFocus;
+    private handleNativeBlur;
+    private handleNativeKeyDown;
+    private handleClearClick;
+    private handlePasswordToggleClick;
+    protected render(): import("lit").TemplateResult<1>;
+}
+export {};