@chromvoid/uikit 0.1.0

package/dist/reatom-lit/watch.js

@@ -0,0 +1,40 @@
+import { top } from '@reatom/core';
+import { noChange } from 'lit';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+class AtomDirective extends AsyncDirective {
+    target;
+    unsubscribe;
+    frame;
+    constructor(partInfo) {
+        super(partInfo);
+    }
+    reconnected() {
+        if (this.target && this.frame) {
+            this.subscribe();
+        }
+    }
+    disconnected() {
+        this.unsubscribe?.();
+    }
+    subscribe() {
+        if (!this.target || !this.frame)
+            return;
+        this.unsubscribe = this.frame.run(() => this.target.subscribe((v) => this.setValue(v)));
+    }
+    render(target, frame) {
+        this.frame ??= frame;
+        if (this.target !== target) {
+            this.unsubscribe?.();
+            this.target = target;
+            if (this.isConnected) {
+                this.subscribe();
+            }
+            Promise.resolve().then(() => {
+                this.frame.run(() => this.setValue(target()));
+            });
+        }
+        return noChange;
+    }
+}
+const watchDirective = directive(AtomDirective);
+export const watch = (target) => watchDirective(target, top());

package/dist/reatom-lit/withReatomElement.d.ts

@@ -0,0 +1,4 @@
+import type { Constructor } from '@reatom/core';
+import type { LitElement } from 'lit';
+export declare const __reatom_user_render__: unique symbol;
+export declare const withReatomElement: <T extends Constructor<LitElement>>(superClass: T) => T;

package/dist/reatom-lit/withReatomElement.js

@@ -0,0 +1,57 @@
+import { reatomAbstractRender, top } from '@reatom/core';
+const __inner_update = Symbol('Inner update');
+export const __reatom_user_render__ = Symbol.for('reatom.user_render');
+export const withReatomElement = (superClass) => {
+    return class ReatomLitElement extends superClass {
+        __frame;
+        __changedProps;
+        __abstractRender;
+        __unmount;
+        constructor(...args) {
+            super(...args);
+            this.__frame = top();
+            this.__abstractRender = reatomAbstractRender({
+                frame: this.__frame,
+                render: () => {
+                    const symbolRender = this.constructor.prototype[__reatom_user_render__];
+                    if (symbolRender) {
+                        return symbolRender.call(this);
+                    }
+                    const prototype = Object.getPrototypeOf(Object.getPrototypeOf(this));
+                    const userRender = prototype?.render;
+                    return userRender?.call(this);
+                },
+                rerender: () => {
+                    return this.requestUpdate(__inner_update, 1);
+                },
+                name: 'ReatomElement',
+            });
+        }
+        render() {
+            return this.__abstractRender.render(this.__changedProps).result;
+        }
+        shouldUpdate(_changedProperties) {
+            if (_changedProperties.size === 1 && _changedProperties.has(__inner_update)) {
+                // updates from Reatom are internal
+            }
+            this.__changedProps = _changedProperties;
+            return true;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.__unmount = this.__abstractRender.mount();
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            if (this.__unmount) {
+                try {
+                    this.__unmount();
+                }
+                catch {
+                    // ignore unmount errors
+                }
+                this.__unmount = undefined;
+            }
+        }
+    };
+};

package/dist/register.d.ts

@@ -0,0 +1 @@
+export declare function registerUikit(): void;

package/dist/register.js

@@ -0,0 +1,84 @@
+import { CVAccordion, CVAccordionItem, CVAlertDialog, CVAlert, CVBadge, CVBreadcrumb, CVBreadcrumbItem, CVButton, CVCallout, CVCard, CVCarousel, CVCarouselSlide, CVCheckbox, CVCombobox, CVComboboxGroup, CVComboboxOption, CVCommandItem, CVCommandPalette, CVContextMenu, CVCopyButton, CVDatePicker, CVDialog, CVDisclosure, CVDrawer, CVFeed, CVFeedArticle, CVGrid, CVGridCell, CVGridColumn, CVGridRow, CVIcon, CVInput, CVLandmark, CVLink, CVListbox, CVListboxGroup, CVMenu, CVMenuButton, CVMenuGroup, CVMenuItem, CVMeter, CVNumber, CVOption, CVPopover, CVProgress, CVProgressRing, CVRadio, CVRadioGroup, CVSelect, CVSelectGroup, CVSelectOption, CVSidebar, CVSidebarItem, CVSlider, CVSliderMultiThumb, CVSpinbutton, CVSpinner, CVSwitch, CVTab, CVTabPanel, CVTable, CVTableCell, CVTableColumn, CVTableRow, CVTabs, CVTextarea, CVToast, CVToastRegion, CVToolbar, CVToolbarItem, CVToolbarSeparator, CVTooltip, CVTreegrid, CVTreegridCell, CVTreegridColumn, CVTreegridRow, CVTreeItem, CVTreeview, CVWindowSplitter, } from './components/index.js';
+import { CVThemeProvider } from './theme/index.js';
+export function registerUikit() {
+    CVThemeProvider.define();
+    CVAccordionItem.define();
+    CVAccordion.define();
+    CVAlertDialog.define();
+    CVAlert.define();
+    CVBreadcrumbItem.define();
+    CVBreadcrumb.define();
+    CVBadge.define();
+    CVButton.define();
+    CVCallout.define();
+    CVCard.define();
+    CVCopyButton.define();
+    CVCarouselSlide.define();
+    CVCarousel.define();
+    CVCheckbox.define();
+    CVCommandItem.define();
+    CVCommandPalette.define();
+    CVComboboxGroup.define();
+    CVComboboxOption.define();
+    CVCombobox.define();
+    CVContextMenu.define();
+    CVDatePicker.define();
+    CVDialog.define();
+    CVDisclosure.define();
+    CVDrawer.define();
+    CVFeedArticle.define();
+    CVFeed.define();
+    CVGridCell.define();
+    CVGridColumn.define();
+    CVGridRow.define();
+    CVGrid.define();
+    CVIcon.define();
+    CVInput.define();
+    CVLandmark.define();
+    CVOption.define();
+    CVListboxGroup.define();
+    CVListbox.define();
+    CVLink.define();
+    CVMenuItem.define();
+    CVMenuGroup.define();
+    CVMenu.define();
+    CVMenuButton.define();
+    CVMeter.define();
+    CVNumber.define();
+    CVPopover.define();
+    CVProgress.define();
+    CVProgressRing.define();
+    CVRadio.define();
+    CVRadioGroup.define();
+    CVSelectOption.define();
+    CVSelectGroup.define();
+    CVSelect.define();
+    CVSidebarItem.define();
+    CVSidebar.define();
+    CVSlider.define();
+    CVSliderMultiThumb.define();
+    CVSpinbutton.define();
+    CVSpinner.define();
+    CVSwitch.define();
+    CVTableCell.define();
+    CVTableColumn.define();
+    CVTableRow.define();
+    CVTable.define();
+    CVTab.define();
+    CVTabPanel.define();
+    CVTabs.define();
+    CVTextarea.define();
+    CVToast.define();
+    CVToastRegion.define();
+    CVToolbarSeparator.define();
+    CVToolbarItem.define();
+    CVToolbar.define();
+    CVTooltip.define();
+    CVTreegridColumn.define();
+    CVTreegridCell.define();
+    CVTreegridRow.define();
+    CVTreegrid.define();
+    CVTreeItem.define();
+    CVTreeview.define();
+    CVWindowSplitter.define();
+}

package/dist/styles/component-styles.d.ts

@@ -0,0 +1,4 @@
+import type { CSSResultOrNative } from 'lit';
+export type ComponentHostDisplay = 'block' | 'inline-block' | 'inline-flex' | 'contents';
+export declare const componentResetStyles: import("lit").CSSResult;
+export declare function getComponentHostDisplayStyles(display: ComponentHostDisplay): CSSResultOrNative;

package/dist/styles/component-styles.js

@@ -0,0 +1,78 @@
+import { css, unsafeCSS } from 'lit';
+export const componentResetStyles = css `
+  :host([hidden]),
+  [hidden] {
+    display: none !important;
+  }
+
+  :host,
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ul,
+  ol,
+  dl {
+    margin: 0;
+  }
+
+  ul,
+  ol {
+    padding: 0;
+  }
+
+  button,
+  input,
+  textarea,
+  select {
+    font: inherit;
+    color: inherit;
+  }
+
+  button {
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  :focus-visible {
+    outline-offset: 2px;
+  }
+
+  ::slotted(img),
+  ::slotted(svg),
+  ::slotted(video),
+  ::slotted(canvas) {
+    display: block;
+    max-inline-size: 100%;
+  }
+`;
+const hostDisplayStyles = new Map();
+export function getComponentHostDisplayStyles(display) {
+    let style = hostDisplayStyles.get(display);
+    if (!style) {
+        style = css `
+      :host {
+        display: ${unsafeCSS(display)};
+      }
+    `;
+        hostDisplayStyles.set(display, style);
+    }
+    return style;
+}

package/dist/theme/cv-theme-provider.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+export type CVThemeMode = 'light' | 'dark' | 'system';
+export declare class CVThemeProvider extends LitElement {
+    static elementName: string;
+    static get properties(): {
+        theme: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        mode: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+    };
+    theme: string;
+    mode: CVThemeMode;
+    private _mediaQuery;
+    private _mediaChangeHandler;
+    private _appliedTokens;
+    constructor();
+    static styles: import("lit").CSSResult[];
+    static define(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    private _applyMode;
+    private _setupMediaListener;
+    private _removeMediaListener;
+    private _applyCurrentTheme;
+    protected render(): import("lit").TemplateResult<1>;
+}

package/dist/theme/cv-theme-provider.js

@@ -0,0 +1,110 @@
+import { LitElement, css, html } from 'lit';
+import { applyTheme, getTheme } from './theme-engine.js';
+export class CVThemeProvider extends LitElement {
+    static elementName = 'cv-theme-provider';
+    static get properties() {
+        return {
+            theme: { type: String, reflect: true },
+            mode: { type: String, reflect: true },
+        };
+    }
+    _mediaQuery = null;
+    _mediaChangeHandler = null;
+    _appliedTokens = new Set();
+    constructor() {
+        super();
+        this.theme = '';
+        this.mode = 'system';
+    }
+    static styles = [
+        css `
+      :host {
+        display: contents;
+      }
+    `,
+    ];
+    static define() {
+        if (!customElements.get(this.elementName)) {
+            customElements.define(this.elementName, this);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.style.display = 'contents';
+        this._applyMode();
+        this._applyCurrentTheme();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._removeMediaListener();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('mode')) {
+            this._applyMode();
+        }
+        if (changedProperties.has('theme')) {
+            this._applyCurrentTheme();
+        }
+    }
+    _applyMode() {
+        if (this.mode === 'system') {
+            this._setupMediaListener();
+        }
+        else {
+            this._removeMediaListener();
+            this.style.colorScheme = this.mode;
+        }
+    }
+    _setupMediaListener() {
+        this._removeMediaListener();
+        if (typeof window.matchMedia !== 'function') {
+            this.style.colorScheme = 'light';
+            return;
+        }
+        const mq = window.matchMedia('(prefers-color-scheme: dark)');
+        if (!mq) {
+            this.style.colorScheme = 'light';
+            return;
+        }
+        this._mediaQuery = mq;
+        this.style.colorScheme = mq.matches ? 'dark' : 'light';
+        this._mediaChangeHandler = (e) => {
+            this.style.colorScheme = e.matches ? 'dark' : 'light';
+        };
+        mq.addEventListener('change', this._mediaChangeHandler);
+    }
+    _removeMediaListener() {
+        if (this._mediaQuery && this._mediaChangeHandler) {
+            this._mediaQuery.removeEventListener('change', this._mediaChangeHandler);
+            this._mediaQuery = null;
+            this._mediaChangeHandler = null;
+        }
+    }
+    _applyCurrentTheme() {
+        // Clear previously applied tokens
+        for (const key of this._appliedTokens) {
+            this.style.removeProperty(key);
+        }
+        this._appliedTokens.clear();
+        if (!this.theme) {
+            this.removeAttribute('data-cv-theme');
+            return;
+        }
+        const definition = getTheme(this.theme);
+        if (!definition) {
+            console.warn(`[cv-theme-provider] Theme "${this.theme}" is not registered.`);
+            return;
+        }
+        for (const [key, value] of Object.entries(definition.tokens)) {
+            this.style.setProperty(key, value);
+            this._appliedTokens.add(key);
+        }
+        this.setAttribute('data-cv-theme', this.theme);
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+}

package/dist/theme/index.d.ts

@@ -0,0 +1,4 @@
+export type { CVThemeDefinition, CVThemeTarget, CVThemeTokenName, CVThemeTokens } from './types.js';
+export { defineTheme, getTheme, applyTheme } from './theme-engine.js';
+export { CVThemeProvider } from './cv-theme-provider.js';
+export type { CVThemeMode } from './cv-theme-provider.js';

package/dist/theme/index.js

@@ -0,0 +1,2 @@
+export { defineTheme, getTheme, applyTheme } from './theme-engine.js';
+export { CVThemeProvider } from './cv-theme-provider.js';

package/dist/theme/theme-engine.d.ts

@@ -0,0 +1,4 @@
+import type { CVThemeDefinition, CVThemeTarget, CVThemeTokens } from './types.js';
+export declare function defineTheme(name: string, tokens: CVThemeTokens): CVThemeDefinition;
+export declare function getTheme(name: string): CVThemeDefinition | undefined;
+export declare function applyTheme(target: CVThemeTarget, name: string): HTMLElement;

package/dist/theme/theme-engine.js

@@ -0,0 +1,67 @@
+const themes = new Map();
+const appliedTokensByElement = new WeakMap();
+const CV_TOKEN_PREFIX = '--cv-';
+function validateThemeTokens(tokens) {
+    for (const key of Object.keys(tokens)) {
+        if (!key.startsWith(CV_TOKEN_PREFIX)) {
+            throw new Error(`Invalid theme token "${key}". Tokens must use the "--cv-*" prefix.`);
+        }
+    }
+}
+function cloneTokens(tokens) {
+    return { ...tokens };
+}
+function resolveTargetElement(target) {
+    if (target instanceof HTMLElement) {
+        return target;
+    }
+    if (target instanceof Document) {
+        return target.documentElement;
+    }
+    return target.host;
+}
+export function defineTheme(name, tokens) {
+    if (!name.trim()) {
+        throw new Error('Theme name must be a non-empty string.');
+    }
+    validateThemeTokens(tokens);
+    const definition = {
+        name,
+        tokens: cloneTokens(tokens),
+    };
+    themes.set(name, definition);
+    return {
+        name: definition.name,
+        tokens: cloneTokens(definition.tokens),
+    };
+}
+export function getTheme(name) {
+    const definition = themes.get(name);
+    if (!definition)
+        return undefined;
+    return {
+        name: definition.name,
+        tokens: cloneTokens(definition.tokens),
+    };
+}
+export function applyTheme(target, name) {
+    const definition = themes.get(name);
+    if (!definition) {
+        throw new Error(`Unknown theme: ${name}`);
+    }
+    const element = resolveTargetElement(target);
+    const previousTokens = appliedTokensByElement.get(element);
+    if (previousTokens) {
+        for (const key of previousTokens) {
+            element.style.removeProperty(key);
+        }
+    }
+    const nextTokenNames = new Set();
+    for (const [key, value] of Object.entries(definition.tokens)) {
+        element.style.setProperty(key, value);
+        nextTokenNames.add(key);
+    }
+    element.setAttribute('data-cv-theme', definition.name);
+    appliedTokensByElement.set(element, nextTokenNames);
+    return element;
+}