@easemate/web-kit 0.1.5 → 0.3.0

package/build/elements/tooltip/index.js

@@ -1,183 +0,0 @@
-import "../popover/index.js";
-import { html } from 'lit-html';
-import { Component } from '../../decorators/Component';
-import { OutsideClick, requestOutsideClickUpdate } from '../../decorators/OutsideClick';
-import { Prop } from '../../decorators/Prop';
-import { Query } from '../../decorators/Query';
-@Component({
-    tag: 'ease-tooltip',
-    shadowMode: 'open',
-    styles: `
-    :host {
-      display: inline-block;
-      position: relative;
-    }
-
-    ease-popover::part(content) {
-      inset: auto;
-    }
-
-    [data-tooltip-content] {
-      background-color: var(--ease-tooltip-background, var(--color-gray-400));
-      color: var(--ease-tooltip-color, var(--color-gray-900));
-      padding: var(--ease-tooltip-padding, 4px 8px);
-      border-radius: var(--ease-tooltip-radius, 4px);
-      font-family: var(--ease-font-family, inherit);
-      font-size: var(--ease-tooltip-font-size, 10px);
-      font-weight: var(--ease-tooltip-font-weight, 500);
-      max-width: var(--ease-tooltip-max-width, 220px);
-      box-shadow: var(--ease-tooltip-shadow, 0 2px 8px rgba(0, 0, 0, 0.2));
-      display: none;
-    }
-
-    :host([open]) [data-tooltip-content] {
-      display: block;
-    }
-  `
-})
-export class Tooltip extends HTMLElement {
-    #hoverTimer = null;
-    #trigger = null;
-    #content = null;
-    @Prop({
-        type: Boolean,
-        reflect: true,
-        onChange(next, previous) {
-            this._handleOpenChange(next, previous);
-        }
-    })
-    accessor open = false;
-    @Prop({ type: Number, reflect: true, defaultValue: 300 })
-    accessor delay = 300;
-    @Prop({ reflect: true, defaultValue: 'top-center' })
-    accessor placement = 'top-center';
-    @Query('[slot="trigger"]')
-    accessor triggerElement;
-    @Query('[data-tooltip-content]')
-    accessor contentElement;
-    disconnectedCallback() {
-        this.#clearTimer();
-        if (this.#trigger) {
-            this.#trigger.removeEventListener('mouseenter', this.#handleEnter);
-            this.#trigger.removeEventListener('mouseleave', this.#handleLeave);
-            this.#trigger.removeEventListener('focusin', this.#handleFocusIn);
-            this.#trigger.removeEventListener('focusout', this.#handleFocusOut);
-            this.#trigger = null;
-        }
-        if (this.#content) {
-            this.#content.removeEventListener('mouseenter', this.#handleEnter);
-            this.#content.removeEventListener('mouseleave', this.#handleLeave);
-            this.#content = null;
-        }
-    }
-    afterRender() {
-        this.#updateListeners();
-        const content = this.contentElement;
-        const isVisible = this.open;
-        if (content) {
-            content.setAttribute('role', 'tooltip');
-            content.setAttribute('aria-hidden', isVisible ? 'false' : 'true');
-            content.dataset.open = isVisible ? 'true' : 'false';
-            content.hidden = !isVisible;
-        }
-    }
-    render() {
-        return html `
-      <ease-popover .placement=${this.placement} ?open=${this.open}>
-        <slot name="trigger" slot="trigger"></slot>
-        <div
-          data-tooltip-content
-          role="tooltip"
-          data-open=${this.open ? 'true' : 'false'}
-          ?hidden=${!this.open}
-        >
-          <slot></slot>
-        </div>
-      </ease-popover>
-    `;
-    }
-    _handleOpenChange(next, previous) {
-        if (next === previous) {
-            return;
-        }
-        if (!next) {
-            this.#clearTimer();
-        }
-        requestOutsideClickUpdate(this);
-    }
-    @OutsideClick({
-        content: (host) => host.contentElement,
-        triggers: (host) => [host.triggerElement],
-        disabled: (host) => !host.open
-    })
-    handleOutsideDismiss() {
-        if (!this.open) {
-            return;
-        }
-        this.#clearTimer();
-        this.open = false;
-    }
-    #clearTimer() {
-        if (this.#hoverTimer !== null) {
-            window.clearTimeout(this.#hoverTimer);
-            this.#hoverTimer = null;
-        }
-    }
-    #startTimer(callback) {
-        this.#clearTimer();
-        const wait = this.delay ?? 0;
-        if (wait > 0) {
-            this.#hoverTimer = window.setTimeout(callback, wait);
-        }
-        else {
-            callback();
-        }
-    }
-    #handleEnter = () => {
-        this.#startTimer(() => {
-            this.open = true;
-        });
-    };
-    #handleLeave = () => {
-        this.#clearTimer();
-        this.open = false;
-    };
-    #handleFocusIn = () => {
-        this.#clearTimer();
-        this.open = true;
-    };
-    #handleFocusOut = () => {
-        this.#clearTimer();
-        this.open = false;
-    };
-    #updateListeners() {
-        const trigger = this.triggerElement;
-        const content = this.contentElement ?? null;
-        if (trigger !== this.#trigger) {
-            if (this.#trigger) {
-                this.#trigger.removeEventListener('mouseenter', this.#handleEnter);
-                this.#trigger.removeEventListener('mouseleave', this.#handleLeave);
-                this.#trigger.removeEventListener('focusin', this.#handleFocusIn);
-                this.#trigger.removeEventListener('focusout', this.#handleFocusOut);
-            }
-            if (trigger) {
-                trigger.addEventListener('mouseenter', this.#handleEnter);
-                trigger.addEventListener('mouseleave', this.#handleLeave);
-                trigger.addEventListener('focusin', this.#handleFocusIn);
-                trigger.addEventListener('focusout', this.#handleFocusOut);
-            }
-            this.#trigger = trigger;
-        }
-        if (content !== this.#content) {
-            if (this.#content) {
-                this.#content.removeEventListener('mouseenter', this.#handleEnter);
-                this.#content.removeEventListener('mouseleave', this.#handleLeave);
-            }
-            if (content) {
-                content.addEventListener('mouseenter', this.#handleEnter);
-                content.addEventListener('mouseleave', this.#handleLeave);
-            }
-            this.#content = content ?? null;
-        }
-    }
-}

package/build/init.cjs

@@ -1,325 +0,0 @@
-"use strict";
-/**
- * Main initialization API for @easemate/web-kit
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.initWebKit = initWebKit;
-const theme_1 = require("./theme/index.cjs");
-const registry_1 = require("./theme/registry.cjs");
-// --------------------------
-// Helpers
-// --------------------------
-const isBrowser = () => typeof document !== 'undefined' && typeof window !== 'undefined';
-const isThemeModeConfig = (value) => {
-    if (typeof value !== 'object' || value === null) {
-        return false;
-    }
-    const obj = value;
-    return obj.mode !== undefined && (obj.light !== undefined || obj.dark !== undefined);
-};
-/**
- * Register replacement components before loading built-in ones.
- */
-function registerReplacements(replace) {
-    if (!isBrowser()) {
-        return;
-    }
-    for (const [tag, replacement] of Object.entries(replace)) {
-        // Skip if already defined
-        if (customElements.get(tag)) {
-            continue;
-        }
-        if (typeof replacement === 'function') {
-            // Register custom constructor
-            customElements.define(tag, replacement);
-        }
-        else if (typeof replacement === 'string') {
-            // Create a bridge element that renders the aliased tag
-            const aliasTag = replacement;
-            class BridgeElement extends HTMLElement {
-                _inner = null;
-                connectedCallback() {
-                    // Create the aliased element
-                    this._inner = document.createElement(aliasTag);
-                    // Copy attributes
-                    for (const attr of this.attributes) {
-                        this._inner.setAttribute(attr.name, attr.value);
-                    }
-                    // Move children
-                    while (this.firstChild) {
-                        this._inner.appendChild(this.firstChild);
-                    }
-                    // Use shadow DOM to contain the aliased element
-                    const shadow = this.attachShadow({ mode: 'open' });
-                    shadow.appendChild(this._inner);
-                }
-                disconnectedCallback() {
-                    this._inner = null;
-                }
-            }
-            customElements.define(tag, BridgeElement);
-        }
-    }
-}
-/**
- * Resolve and apply styles configuration.
- */
-async function applyStyles(styles, nonce) {
-    if (styles === false) {
-        return { dispose: () => { } };
-    }
-    const { injectPreset, removePreset } = await Promise.resolve().then(() => __importStar(require("./internal/style-inject.cjs")));
-    const injected = [];
-    if (typeof styles === 'string') {
-        injectPreset(styles, nonce);
-        injected.push(styles);
-    }
-    else if (typeof styles === 'object') {
-        if (styles.reset) {
-            injectPreset('reset', nonce);
-            injected.push('reset');
-        }
-        if (styles.base) {
-            injectPreset('base', nonce);
-            injected.push('base');
-        }
-    }
-    return {
-        dispose: () => {
-            for (const preset of injected) {
-                removePreset(preset);
-            }
-        }
-    };
-}
-/**
- * Resolve and apply theme configuration.
- */
-function applyThemeConfig(theme, target) {
-    if (isThemeModeConfig(theme)) {
-        // Light/dark mode configuration
-        const lightConfig = (0, registry_1.getTheme)(theme.light);
-        const darkConfig = (0, registry_1.getTheme)(theme.dark);
-        if (theme.mode === 'system') {
-            const cleanup = (0, theme_1.followSystemTheme)({ light: lightConfig, dark: darkConfig }, { element: target });
-            return {
-                dispose: cleanup,
-                controller: {
-                    set: (t) => {
-                        const config = (0, registry_1.getTheme)(t);
-                        (0, theme_1.applyTheme)(config, { element: target });
-                    },
-                    mode: (m) => {
-                        if (m === 'system') {
-                            // Re-apply system theme
-                            const systemMode = window.matchMedia('(prefers-color-scheme: light)').matches
-                                ? 'light'
-                                : 'dark';
-                            const config = systemMode === 'light' ? lightConfig : darkConfig;
-                            (0, theme_1.applyTheme)(config, {
-                                element: target,
-                                name: systemMode,
-                                colorScheme: systemMode
-                            });
-                        }
-                        else {
-                            const config = m === 'light' ? lightConfig : darkConfig;
-                            (0, theme_1.applyTheme)(config, {
-                                element: target,
-                                name: m,
-                                colorScheme: m
-                            });
-                        }
-                    }
-                }
-            };
-        }
-        // Fixed mode
-        const config = theme.mode === 'light' ? lightConfig : darkConfig;
-        (0, theme_1.applyTheme)(config, {
-            element: target,
-            name: theme.mode,
-            colorScheme: theme.mode
-        });
-        return {
-            dispose: () => { },
-            controller: {
-                set: (t) => {
-                    const resolvedConfig = (0, registry_1.getTheme)(t);
-                    (0, theme_1.applyTheme)(resolvedConfig, { element: target });
-                }
-            }
-        };
-    }
-    // Simple theme (name, ref, or config)
-    const config = (0, registry_1.getTheme)(theme);
-    const name = (0, registry_1.isThemeRef)(theme) ? theme.name : typeof theme === 'string' ? theme : undefined;
-    (0, theme_1.applyTheme)(config, {
-        element: target,
-        name,
-        colorScheme: 'dark'
-    });
-    return {
-        dispose: () => { },
-        controller: {
-            set: (t) => {
-                const resolvedConfig = (0, registry_1.getTheme)(t);
-                const themeName = (0, registry_1.isThemeRef)(t) ? t.name : typeof t === 'string' ? t : undefined;
-                (0, theme_1.applyTheme)(resolvedConfig, { element: target, name: themeName });
-            }
-        }
-    };
-}
-// --------------------------
-// Main API
-// --------------------------
-/**
- * Initialize the web-kit.
- *
- * @example
- * ```ts
- * // Basic usage - register all components with default theme
- * initWebKit({ theme: 'default' });
- *
- * // Selective loading
- * initWebKit({
- *   include: ['ease-button', 'ease-slider'],
- *   theme: 'default'
- * });
- *
- * // With styles
- * initWebKit({
- *   theme: 'default',
- *   styles: 'main',
- *   fonts: 'default'
- * });
- *
- * // Light/dark mode
- * initWebKit({
- *   theme: {
- *     mode: 'system',
- *     light: myLightTheme,
- *     dark: 'default'
- *   }
- * });
- * ```
- */
-function initWebKit(options = {}) {
-    // SSR safety - no-op on server
-    if (!isBrowser()) {
-        return {
-            dispose: () => { },
-            ready: Promise.resolve()
-        };
-    }
-    const { include, exclude, replace, theme, target, styles = false, fonts = false, lazyLoad = false, cspNonce, dev } = options;
-    const disposers = [];
-    // Controller object that will be populated
-    const controller = {
-        dispose: () => {
-            for (const dispose of disposers) {
-                dispose();
-            }
-        },
-        theme: undefined,
-        ready: Promise.resolve()
-    };
-    // Build the ready promise
-    const readyPromise = (async () => {
-        // 1. Register replacements first (before loading any components)
-        if (replace) {
-            registerReplacements(replace);
-        }
-        // 2. Apply styles
-        const stylesResult = await applyStyles(styles, cspNonce);
-        disposers.push(stylesResult.dispose);
-        // 3. Apply theme
-        if (theme) {
-            const themeResult = applyThemeConfig(theme, target);
-            disposers.push(themeResult.dispose);
-            controller.theme = themeResult.controller;
-        }
-        // 4. Load fonts
-        if (fonts !== false) {
-            const { injectFonts, removeFonts } = await Promise.resolve().then(() => __importStar(require("./internal/fonts.cjs")));
-            injectFonts(fonts);
-            const fontsToRemove = fonts;
-            disposers.push(() => removeFonts(fontsToRemove));
-        }
-        // 5. Load components
-        if (lazyLoad) {
-            // Lazy loading mode
-            const { createLazyLoader } = await Promise.resolve().then(() => __importStar(require("./internal/lazy-load.cjs")));
-            const lazyConfig = typeof lazyLoad === 'object' ? lazyLoad : {};
-            // Apply include/exclude to lazy loader
-            if (include) {
-                lazyConfig.include = include;
-            }
-            else if (exclude) {
-                lazyConfig.exclude = exclude;
-            }
-            const loader = createLazyLoader(lazyConfig);
-            disposers.push(loader.dispose);
-        }
-        else {
-            // Eager loading mode
-            const { loadAllComponents, loadComponents, resolveTags } = await Promise.resolve().then(() => __importStar(require("./internal/component-loaders.cjs")));
-            if (include || exclude) {
-                const tags = resolveTags({ include, exclude });
-                if (dev?.warnUnknownTags) {
-                    const { WEB_KIT_ALL_TAGS } = await Promise.resolve().then(() => __importStar(require("./internal/component-loaders.cjs")));
-                    const allTags = new Set(WEB_KIT_ALL_TAGS);
-                    const unknown = (include ?? exclude ?? []).filter((t) => !allTags.has(t));
-                    if (unknown.length > 0) {
-                        console.warn('[web-kit] Unknown tags:', unknown);
-                    }
-                }
-                if (dev?.logLoads) {
-                    console.log('[web-kit] Loading components:', tags);
-                }
-                await loadComponents(tags);
-            }
-            else {
-                if (dev?.logLoads) {
-                    console.log('[web-kit] Loading all components');
-                }
-                await loadAllComponents();
-            }
-        }
-    })();
-    controller.ready = readyPromise;
-    return controller;
-}

package/build/init.d.cts

@@ -1,157 +0,0 @@
-/**
- * Main initialization API for @easemate/web-kit
- */
-import type { FontConfig } from "./internal/fonts.cjs";
-import type { LazyLoadConfig } from "./internal/lazy-load.cjs";
-import type { StylePreset } from "./internal/style-inject.cjs";
-import { type ThemeInput } from "./theme/registry.cjs";
-/**
- * Theme mode configuration for light/dark switching.
- */
-export interface ThemeModeConfig {
-    /** Mode selection: 'light', 'dark', or 'system' for auto-switching */
-    mode: 'light' | 'dark' | 'system';
-    /** Theme to use in light mode */
-    light: ThemeInput;
-    /** Theme to use in dark mode */
-    dark: ThemeInput;
-    /** Persist user preference to localStorage */
-    persist?: {
-        key: string;
-    };
-}
-/**
- * Style injection configuration.
- */
-export type StylesConfig = false | StylePreset | {
-    reset?: boolean;
-    base?: boolean;
-};
-/**
- * Component replacement configuration.
- * Keys are tag names, values are either:
- * - A custom element constructor
- * - A string tag name to alias to
- */
-export type ReplaceConfig = Record<string, CustomElementConstructor | string>;
-/**
- * initWebKit options.
- */
-export interface InitWebKitOptions {
-    /**
-     * Tags to include (register only these).
-     * If not provided, all components are registered.
-     */
-    include?: readonly string[];
-    /**
-     * Tags to exclude (register all except these).
-     * Ignored if `include` is provided.
-     */
-    exclude?: readonly string[];
-    /**
-     * Replace components with custom implementations.
-     * - Constructor: registers your class under the tag name
-     * - String: creates a bridge element that renders the aliased tag
-     */
-    replace?: ReplaceConfig;
-    /**
-     * Theme to apply.
-     * - String: registered theme name (e.g., 'default', 'dark')
-     * - WebKitThemeRef: theme reference from registerTheme()
-     * - ThemeConfig: inline theme configuration
-     * - ThemeModeConfig: light/dark mode configuration
-     */
-    theme?: ThemeInput | ThemeModeConfig;
-    /**
-     * Element to scope theme variables to (default: document.documentElement).
-     */
-    target?: HTMLElement;
-    /**
-     * Inject global styles.
-     * - false: no styles (default)
-     * - 'reset': minimal CSS reset
-     * - 'base': body/html dark theme styles
-     * - 'main': reset + base
-     * - { reset?: boolean; base?: boolean }: fine-grained control
-     */
-    styles?: StylesConfig;
-    /**
-     * Font loading configuration.
-     * - false: no font loading (default)
-     * - 'default': load default fonts (Instrument Sans, Geist Mono)
-     * - FontConfig: custom font configuration
-     */
-    fonts?: FontConfig | 'default' | false;
-    /**
-     * Enable lazy loading of components.
-     * - false: eager loading (default)
-     * - true: lazy load with default config
-     * - LazyLoadConfig: custom lazy load config
-     */
-    lazyLoad?: boolean | LazyLoadConfig;
-    /**
-     * CSP nonce for injected style/link elements.
-     */
-    cspNonce?: string;
-    /**
-     * Development mode options.
-     */
-    dev?: {
-        /** Warn about unknown tag names in include/exclude */
-        warnUnknownTags?: boolean;
-        /** Log component loads */
-        logLoads?: boolean;
-    };
-}
-/**
- * Controller returned by initWebKit.
- */
-export interface WebKitController {
-    /** Cleanup all injected styles, fonts, and listeners */
-    dispose: () => void;
-    /** Theme controller (if theme was configured) */
-    theme?: {
-        /** Set theme by name or config */
-        set: (theme: ThemeInput) => void;
-        /** Set theme mode (only for ThemeModeConfig) */
-        mode?: (mode: 'light' | 'dark' | 'system') => void;
-    };
-    /** Promise that resolves when all components are loaded */
-    ready: Promise<void>;
-}
-/**
- * Initialize the web-kit.
- *
- * @example
- * ```ts
- * // Basic usage - register all components with default theme
- * initWebKit({ theme: 'default' });
- *
- * // Selective loading
- * initWebKit({
- *   include: ['ease-button', 'ease-slider'],
- *   theme: 'default'
- * });
- *
- * // With styles
- * initWebKit({
- *   theme: 'default',
- *   styles: 'main',
- *   fonts: 'default'
- * });
- *
- * // Light/dark mode
- * initWebKit({
- *   theme: {
- *     mode: 'system',
- *     light: myLightTheme,
- *     dark: 'default'
- *   }
- * });
- * ```
- */
-export declare function initWebKit(options?: InitWebKitOptions): WebKitController;
-export type { WebKitComponentTag, WebKitElementTag, WebKitTag } from "./internal/component-loaders.cjs";
-export type { FontConfig, FontSource } from "./internal/fonts.cjs";
-export type { LazyLoadConfig, LazyLoader } from "./internal/lazy-load.cjs";
-export type { StylePreset } from "./internal/style-inject.cjs";