@easemate/web-kit 0.1.0

package/build/decorators/Query.d.ts

@@ -0,0 +1,27 @@
+type QueryRoot = 'shadow' | 'light' | 'document';
+type QueryHost = HTMLElement & {
+    renderRoot?: ShadowRoot | DocumentFragment | HTMLElement;
+};
+type QueryFallback<TResult, THost extends QueryHost> = TResult | ((host: THost) => TResult);
+interface BaseQueryOptions<TResult, THost extends QueryHost> {
+    from?: QueryRoot;
+    fallback?: QueryFallback<TResult, THost>;
+}
+interface QueryAllOptions<TElement extends Element, THost extends QueryHost> extends BaseQueryOptions<TElement[], THost> {
+    all: true;
+    closest?: false;
+}
+interface QueryClosestOptions<THost extends QueryHost> extends BaseQueryOptions<Element | null, THost> {
+    closest: true;
+    all?: false;
+}
+interface QuerySingleOptions<TElement extends Element, THost extends QueryHost> extends BaseQueryOptions<TElement | null, THost> {
+    all?: false;
+    closest?: false;
+}
+type QueryOptions<TElement extends Element, THost extends QueryHost> = QueryAllOptions<TElement, THost> | QueryClosestOptions<THost> | QuerySingleOptions<TElement, THost>;
+type QueryReturnType<TElement extends Element, THost extends QueryHost, TOptions extends QueryOptions<TElement, THost>> = TOptions extends QueryAllOptions<TElement, THost> ? TElement[] : TOptions extends QueryClosestOptions<THost> ? Element | null : TElement | null;
+type QueryDecorator<TElement extends Element, THost extends QueryHost, TOptions extends QueryOptions<TElement, THost>> = (target: ClassAccessorDecoratorTarget<THost, QueryReturnType<TElement, THost, TOptions>> | undefined, context: ClassFieldDecoratorContext<THost, QueryReturnType<TElement, THost, TOptions>> | ClassAccessorDecoratorContext<THost, QueryReturnType<TElement, THost, TOptions>>) => ClassAccessorDecoratorResult<THost, QueryReturnType<TElement, THost, TOptions>> | undefined;
+export declare function Query<TElement extends Element, THost extends QueryHost, TOptions extends QueryOptions<TElement, THost>>(selector: string, userOptions: TOptions): QueryDecorator<TElement, THost, TOptions>;
+export declare function Query<TElement extends Element = Element, THost extends QueryHost = QueryHost>(selector: string): QueryDecorator<TElement, THost, QuerySingleOptions<TElement, THost>>;
+export {};

package/build/decorators/Query.js

@@ -0,0 +1,76 @@
+const defaultOptions = {
+    all: false,
+    closest: false,
+    from: 'shadow',
+    fallback: null
+};
+const resolveFallback = (fallback, host) => {
+    if (typeof fallback === 'function') {
+        return fallback(host);
+    }
+    return fallback;
+};
+const resolveRoot = (host, option) => {
+    switch (option) {
+        case 'document':
+            return document;
+        case 'light':
+            return host;
+        default:
+            return host.renderRoot ?? host.shadowRoot ?? host;
+    }
+};
+const resolveQuery = (host, selector, options) => {
+    if (options.closest) {
+        const result = host.closest(selector);
+        return result ?? resolveFallback(options.fallback, host) ?? null;
+    }
+    const root = resolveRoot(host, options.from);
+    if (!root) {
+        return options.all
+            ? (resolveFallback(options.fallback, host) ?? [])
+            : (resolveFallback(options.fallback, host) ?? null);
+    }
+    if (options.all) {
+        const elements = Array.from(root.querySelectorAll(selector));
+        return elements.length > 0
+            ? elements
+            : (resolveFallback(options.fallback, host) ?? []);
+    }
+    const match = root.querySelector(selector);
+    return match ?? resolveFallback(options.fallback, host) ?? null;
+};
+const createQueryDecorator = (selector, options) => {
+    return (_target, context) => {
+        if (context.kind === 'accessor') {
+            const descriptor = {
+                get() {
+                    return resolveQuery(this, selector, options);
+                },
+                set(_value) {
+                    // Readonly accessor
+                }
+            };
+            return descriptor;
+        }
+        context.addInitializer(function () {
+            Object.defineProperty(this, context.name, {
+                configurable: true,
+                enumerable: true,
+                get: () => resolveQuery(this, selector, options)
+            });
+        });
+        return;
+    };
+};
+export function Query(selector, userOptions) {
+    if (!selector) {
+        throw new Error('@Query requires a selector.');
+    }
+    if (userOptions) {
+        const merged = { ...defaultOptions, ...userOptions };
+        return createQueryDecorator(selector, merged);
+    }
+    const merged = defaultOptions;
+    return createQueryDecorator(selector, merged);
+}

package/build/decorators/Watch.cjs

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Watch = Watch;
+const renderQueue = new WeakMap();
+const scheduleRender = (instance) => {
+    if (typeof instance.requestRender === 'function') {
+        instance.requestRender();
+        return;
+    }
+    if (typeof instance.render !== 'function') {
+        return;
+    }
+    if (renderQueue.get(instance)) {
+        return;
+    }
+    renderQueue.set(instance, true);
+    requestAnimationFrame(() => {
+        renderQueue.set(instance, false);
+        instance.render?.();
+    });
+};
+const defaultCompare = (previous, next) => previous === next;
+function Watch(options = {}) {
+    const { compare = defaultCompare, onChange, transform } = options;
+    return (accessor, context) => {
+        if (context.kind !== 'accessor') {
+            throw new Error('@Watch requires the "accessor" keyword on the property.');
+        }
+        return {
+            get() {
+                return accessor.get.call(this);
+            },
+            set(value) {
+                const previous = accessor.get.call(this);
+                if (compare(previous, value)) {
+                    return;
+                }
+                accessor.set.call(this, value);
+                if (onChange) {
+                    onChange.call(this, value, previous);
+                }
+                scheduleRender(this);
+            },
+            init(initialValue) {
+                if (transform) {
+                    return transform.call(this, initialValue);
+                }
+                return initialValue;
+            }
+        };
+    };
+}

package/build/decorators/Watch.d.cts

@@ -0,0 +1,11 @@
+type RenderHost = HTMLElement & {
+    requestRender?(): void;
+    render?(): void;
+};
+interface WatchOptions<TValue, THost extends RenderHost> {
+    compare?: (previous: TValue, next: TValue) => boolean;
+    onChange?: (this: THost, next: TValue, previous: TValue) => void;
+    transform?: (this: THost, initial: TValue) => TValue;
+}
+export declare function Watch<TValue, THost extends RenderHost = RenderHost>(options?: WatchOptions<TValue, THost>): (accessor: ClassAccessorDecoratorTarget<THost, TValue>, context: ClassAccessorDecoratorContext<THost, TValue>) => ClassAccessorDecoratorResult<THost, TValue>;
+export {};

package/build/decorators/Watch.d.ts

@@ -0,0 +1,11 @@
+type RenderHost = HTMLElement & {
+    requestRender?(): void;
+    render?(): void;
+};
+interface WatchOptions<TValue, THost extends RenderHost> {
+    compare?: (previous: TValue, next: TValue) => boolean;
+    onChange?: (this: THost, next: TValue, previous: TValue) => void;
+    transform?: (this: THost, initial: TValue) => TValue;
+}
+export declare function Watch<TValue, THost extends RenderHost = RenderHost>(options?: WatchOptions<TValue, THost>): (accessor: ClassAccessorDecoratorTarget<THost, TValue>, context: ClassAccessorDecoratorContext<THost, TValue>) => ClassAccessorDecoratorResult<THost, TValue>;
+export {};

package/build/decorators/Watch.js

@@ -0,0 +1,49 @@
+const renderQueue = new WeakMap();
+const scheduleRender = (instance) => {
+    if (typeof instance.requestRender === 'function') {
+        instance.requestRender();
+        return;
+    }
+    if (typeof instance.render !== 'function') {
+        return;
+    }
+    if (renderQueue.get(instance)) {
+        return;
+    }
+    renderQueue.set(instance, true);
+    requestAnimationFrame(() => {
+        renderQueue.set(instance, false);
+        instance.render?.();
+    });
+};
+const defaultCompare = (previous, next) => previous === next;
+export function Watch(options = {}) {
+    const { compare = defaultCompare, onChange, transform } = options;
+    return (accessor, context) => {
+        if (context.kind !== 'accessor') {
+            throw new Error('@Watch requires the "accessor" keyword on the property.');
+        }
+        return {
+            get() {
+                return accessor.get.call(this);
+            },
+            set(value) {
+                const previous = accessor.get.call(this);
+                if (compare(previous, value)) {
+                    return;
+                }
+                accessor.set.call(this, value);
+                if (onChange) {
+                    onChange.call(this, value, previous);
+                }
+                scheduleRender(this);
+            },
+            init(initialValue) {
+                if (transform) {
+                    return transform.call(this, initialValue);
+                }
+                return initialValue;
+            }
+        };
+    };
+}

package/build/decorators/index.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Watch = exports.Query = exports.Prop = exports.OutsideClick = exports.Listen = exports.Component = void 0;
+var Component_1 = require("./Component.cjs");
+Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return Component_1.Component; } });
+var Listen_1 = require("./Listen.cjs");
+Object.defineProperty(exports, "Listen", { enumerable: true, get: function () { return Listen_1.Listen; } });
+var OutsideClick_1 = require("./OutsideClick.cjs");
+Object.defineProperty(exports, "OutsideClick", { enumerable: true, get: function () { return OutsideClick_1.OutsideClick; } });
+var Prop_1 = require("./Prop.cjs");
+Object.defineProperty(exports, "Prop", { enumerable: true, get: function () { return Prop_1.Prop; } });
+var Query_1 = require("./Query.cjs");
+Object.defineProperty(exports, "Query", { enumerable: true, get: function () { return Query_1.Query; } });
+var Watch_1 = require("./Watch.cjs");
+Object.defineProperty(exports, "Watch", { enumerable: true, get: function () { return Watch_1.Watch; } });

package/build/decorators/index.d.cts

@@ -0,0 +1,6 @@
+export { Component, type RenderContext } from "./Component.cjs";
+export { Listen } from "./Listen.cjs";
+export { OutsideClick } from "./OutsideClick.cjs";
+export { Prop } from "./Prop.cjs";
+export { Query } from "./Query.cjs";
+export { Watch } from "./Watch.cjs";

package/build/decorators/index.d.ts

@@ -0,0 +1,6 @@
+export { Component, type RenderContext } from "./Component.js";
+export { Listen } from "./Listen.js";
+export { OutsideClick } from "./OutsideClick.js";
+export { Prop } from "./Prop.js";
+export { Query } from "./Query.js";
+export { Watch } from "./Watch.js";

package/build/decorators/index.js

@@ -0,0 +1,6 @@
+export { Component } from "./Component.js";
+export { Listen } from "./Listen.js";
+export { OutsideClick } from "./OutsideClick.js";
+export { Prop } from "./Prop.js";
+export { Query } from "./Query.js";
+export { Watch } from "./Watch.js";

package/build/elements/button/index.cjs

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const lit_html_1 = require("lit-html");
+const Component_1 = require("~/decorators/Component");
+const Prop_1 = require("~/decorators/Prop");
+@(0, Component_1.Component)({
+    tag: 'ease-button',
+    autoSlot: true,
+    shadowMode: 'open',
+    styles: `
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    :host([data-variant="headless"]) {
+      display: inline-flex;
+      width: auto;
+    }
+
+    button {
+      appearance: none;
+      font-family: var(--ease-font-family, inherit);
+      font-optical-sizing: auto;
+      font-size: var(--ease-button-font-size, var(--ease-font-size-sm, 12px));
+      font-weight: 550;
+      color: var(--ease-button-color, var(--color-blue-100));
+      min-width: 0;
+      padding: var(--ease-button-padding, 7px 8px);
+      display: block;
+      border-radius: var(--ease-button-radius, 5px);
+      background-color: var(--ease-button-background, var(--color-gray-850));
+      border: none;
+      outline: none;
+      margin: 0;
+      line-height: var(--ease-button-line-height, 14px);
+      box-shadow: inset 0 1px .25px 0 var(--color-white-4), 0 1px 2.5px 0 var(--color-black-8);
+      transition: color 0.2s, background-color 0.2s, scale 0.2s, box-shadow 0.2s;
+      cursor: pointer;
+      min-width: var(--ease-button-min-width, 88px);
+      white-space: nowrap;
+      overflow: hidden;
+      position: relative;
+      text-overflow: ellipsis;
+      text-align: center;
+
+      &[data-pill="true"] {
+        border-radius: 999px;
+      }
+
+      &[data-full-width="true"] {
+        width: 100%;
+      }
+
+      &[data-block="icon"] {
+        --ease-icon-size: 16px;
+        width: 28px;
+        height: 28px;
+        min-width: 28px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-gray-700);
+
+        &:hover,
+        &:focus-visible {
+          color: var(--ease-button-hover-color, var(--color-blue-100));
+        }
+
+        &[data-variant="headless"] {
+          --ease-icon-size: 16px;
+          width: auto;
+          height: auto;
+          padding: 0;
+          min-width: 0;
+          margin: -1px;
+        }
+      }
+      
+      &[data-block="small"] {
+        padding: 5px 8px;
+        font-size: 12px;
+        line-height: 14px;
+        border-radius: 5px;
+      }
+      
+      &[data-block="large"] {
+        padding: 9px 12px;
+        font-size: 13px;
+        line-height: 14px;
+        border-radius: 8px;
+      }
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--ease-button-hover-background-color, var(--color-gray-825));
+        color: var(--ease-button-hover-color, var(--color-blue-100));
+      }
+
+      &[data-variant="headless"],
+      &[data-variant="headless-muted"] {
+        background-color: transparent;
+        box-shadow: none;
+        min-width: 0;
+        width: auto;
+        padding: 0;
+        transition: scale 0.2s, color 0.2s;
+
+        &:hover,
+        &:focus-visible {
+          scale: 1.05;
+        }
+
+        &:active {
+          scale: 0.95;
+        }
+      }
+
+      &[data-variant="headless-muted"] {
+        color: var(--ease-button-color, var(--color-gray-600));
+
+        &:hover,
+        &:focus-visible {
+          color: var(--ease-button-hover-color, var(--color-blue-100));
+        }
+      }
+
+      &[data-variant="link"] {
+        background-color: transparent;
+        box-shadow: none;
+
+        &:hover,
+        &:focus-visible {
+          background-color: var(--ease-button-hover-background-color, var(--color-gray-875));
+        }
+      }
+
+      &[data-variant="primary"] {
+        color: var(--color-blue-100);
+        font-weight: 450;
+        border-radius: 36px;
+        
+        background: radial-gradient(217.29% 45.98% at 99.13% 4.17%, rgba(21, 24, 220, 0.40) 0%, rgba(21, 24, 220, 0.00) 100%), radial-gradient(104.75% 41.7% at 3.06% 100%, rgba(233, 208, 254, 0.30) 0%, rgba(21, 24, 220, 0.00) 100%), radial-gradient(30.53% 47.92% at 46.51% -14.58%, rgba(233, 208, 254, 0.60) 0%, rgba(21, 24, 220, 0.00) 100%), radial-gradient(22.57% 35.42% at 46.29% 112.5%, rgba(233, 208, 254, 0.20) 0%, rgba(21, 24, 220, 0.00) 100%), rgba(255, 255, 255, 0.12);
+        background-repeat: no-repeat;
+
+        box-shadow: 
+          0px 1px 0px 0px rgba(255, 255, 255, 0.2), 
+          inset 0px 0px 50px 0px rgba(255, 255, 255, 0.02), 
+          inset 0px 0px 0px 1px rgba(255, 255, 255, 0.02), 
+          inset 0px 0px 4px 0px rgba(69, 40, 255, 0.4);
+
+
+        &::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          background-color: var(--color-white-2);
+          box-shadow: inset 0px 0.5px 0.75px 0px var(--color-white-30);
+          mix-blend-mode: overlay;
+          pointer-events: none;
+          z-index: 1;
+          border-radius: inherit;
+        }
+
+        &:hover,
+        &:focus-visible {
+           filter: brightness(1.1);
+        }
+      }
+    }
+  `
+})
+class Button extends HTMLElement {
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
+    accessor disabled = false;
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
+    accessor pill = false;
+    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
+    accessor fullWidth = false;
+    @(0, Prop_1.Prop)({ type: String, reflect: true, defaultValue: 'button' })
+    accessor type;
+    @(0, Prop_1.Prop)({
+        type: String,
+        reflect: true,
+        defaultValue: 'medium',
+        onAttributeChange() {
+            this.requestRender?.();
+        }
+    })
+    accessor block = 'medium';
+    @(0, Prop_1.Prop)({
+        type: String,
+        reflect: true,
+        defaultValue: 'default'
+    })
+    accessor variant;
+    render() {
+        return (0, lit_html_1.html) `
+      <button
+        type=${this.type}
+        ?disabled=${this.disabled}
+        data-variant=${this.variant}
+        data-full-width=${this.fullWidth}
+        data-pill=${this.pill}
+        data-block="${this.block}"
+      >
+        <slot></slot>
+      </button>
+    `;
+    }
+}
+exports.Button = Button;

package/build/elements/button/index.d.cts

@@ -0,0 +1,11 @@
+import { type TemplateResult } from 'lit-html';
+export declare class Button extends HTMLElement {
+    requestRender: () => void;
+    accessor disabled: boolean;
+    accessor pill: boolean;
+    accessor fullWidth: boolean;
+    accessor type: 'submit' | 'reset' | 'button';
+    accessor block: 'icon' | 'small' | 'medium' | 'large';
+    accessor variant: 'default' | 'primary' | 'headless' | 'headless-muted' | 'link';
+    render(): TemplateResult;
+}

package/build/elements/button/index.d.ts

@@ -0,0 +1,11 @@
+import { type TemplateResult } from 'lit-html';
+export declare class Button extends HTMLElement {
+    requestRender: () => void;
+    accessor disabled: boolean;
+    accessor pill: boolean;
+    accessor fullWidth: boolean;
+    accessor type: 'submit' | 'reset' | 'button';
+    accessor block: 'icon' | 'small' | 'medium' | 'large';
+    accessor variant: 'default' | 'primary' | 'headless' | 'headless-muted' | 'link';
+    render(): TemplateResult;
+}