@waggylabs/yumekit 0.2.0

package/dist/components/y-avatar.d.ts

@@ -0,0 +1,5 @@
+export class YumeAvatar extends HTMLElement {
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    render(): void;
+}

package/dist/components/y-avatar.js

@@ -0,0 +1,108 @@
+import { getColorVarPair } from '../modules/helpers.js';
+
+class YumeAvatar extends HTMLElement {
+    static get observedAttributes() {
+        return ["src", "alt", "size", "shape", "color"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.render();
+        }
+    }
+
+    render() {
+        const src = this.getAttribute("src");
+        const altRaw = this.getAttribute("alt") || "AN";
+        const shape = this.getAttribute("shape") || "circle";
+        const color = this.getAttribute("color") || "primary";
+        const borderRadius = `var(--component-avatar-border-radius-${shape}, 9999px)`;
+        const [bgColor, textColor] = getColorVarPair(color);
+
+        let dimensions;
+        const size = this.getAttribute("size") || "medium";
+
+        switch (size) {
+            case "small":
+                dimensions = "var(--component-avatar-size-small, 27px)";
+                break;
+            case "large":
+                dimensions = "var(--component-avatar-size-large, 51px)";
+                break;
+            case "medium":
+            default:
+                dimensions = "var(--component-avatar-size-medium, 35px)";
+                break;
+        }
+
+        const componentSheet = new CSSStyleSheet();
+        let componentStyles = "";
+
+        if (src) {
+            componentStyles = `
+          :host {
+            display: inline-block;
+            height: ${dimensions};
+            min-width: ${dimensions};
+          }
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: ${borderRadius};
+          }
+        `;
+        } else {
+            componentStyles = `
+          :host {
+            display: inline-block;
+            width: ${dimensions};
+            height: ${dimensions};
+            min-width: ${dimensions};
+            font-family: var(--font-family-header, "Lexend"), sans-serif;
+            text-transform: uppercase;
+          }
+          .avatar {
+            width: 100%;
+            height: 100%;
+            border-radius: ${borderRadius};
+            background-color: ${bgColor};
+            color: ${textColor};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          }
+          .avatar h5 {
+            margin: 0;
+            font-size: calc(${dimensions} * 0.5);
+          }
+        `;
+        }
+
+        componentSheet.replaceSync(componentStyles);
+        this.shadowRoot.adoptedStyleSheets = [componentSheet];
+
+        if (src) {
+            this.shadowRoot.innerHTML = `<img src="${src}" alt="${altRaw}" part="avatar" />`;
+        } else {
+            const words = altRaw.trim().split(/\s+/);
+            const displayText =
+                words.length >= 2
+                    ? words[0].charAt(0) + words[1].charAt(0)
+                    : altRaw.substring(0, 2);
+            this.shadowRoot.innerHTML = `<div class="avatar" part="avatar"><h5>${displayText}</h5></div>`;
+        }
+    }
+}
+
+if (!customElements.get("y-avatar")) {
+    customElements.define("y-avatar", YumeAvatar);
+}
+
+export { YumeAvatar };

package/dist/components/y-badge.d.ts

@@ -0,0 +1,15 @@
+export class YumeBadge extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    get alignment(): string;
+    get color(): string;
+    get position(): string;
+    get size(): string;
+    get value(): string;
+    getBadgeColors(color: any): any;
+    getBadgePosition(position: any, alignment: any): string;
+    getSizeAttributes(size: any): any;
+    hasTargetContent(): boolean;
+    render(): void;
+}

package/dist/components/y-badge.js

@@ -0,0 +1,149 @@
+class YumeBadge extends HTMLElement {
+    static get observedAttributes() {
+        return ["value", "position", "alignment", "color", "size"];
+    }
+
+    constructor() {
+        super();
+        this.attachShadow({ mode: "open" });
+        this.render();
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            this.render();
+        }
+    }
+
+    get alignment() {
+        return this.getAttribute("alignment") || "right";
+    }
+
+    get color() {
+        return this.getAttribute("color") || "primary";
+    }
+
+    get position() {
+        return this.getAttribute("position") || "top";
+    }
+
+    get size() {
+        return this.getAttribute("size") || "small";
+    }
+
+    get value() {
+        return this.getAttribute("value") || "";
+    }
+
+    getBadgeColors(color) {
+        const colorMap = {
+            primary: ["var(--primary-content--)", "var(--primary-content-inverse)"],
+            secondary: ["var(--secondary-content--)", "var(--secondary-content-inverse)"],
+            base: ["var(--base-content--)", "var(--base-content-inverse)"],
+            success: ["var(--success-content--)", "var(--success-content-inverse)"],
+            warning: ["var(--warning-content--)", "var(--warning-content-inverse)"],
+            error: ["var(--error-content--)", "var(--error-content-inverse)"],
+            help: ["var(--help-content--)", "var(--help-content-inverse)"],
+        };
+        return colorMap[color] || [color, "var(--neutral-white, #fff)"];
+    }
+
+    getBadgePosition(position, alignment) {
+        const offset = "var(--spacing-small, 6px)";
+        const vertical =
+            position === "top"
+                ? `top: calc(${offset} * -1);`
+                : `bottom: calc(${offset} * -1);`;
+        const horizontal =
+            alignment === "right"
+                ? `right: calc(${offset} * -1);`
+                : `left: calc(${offset} * -1);`;
+        return `${vertical} ${horizontal}`;
+    }
+
+    getSizeAttributes(size) {
+        const sizeMap = {
+            small: {
+                fontSize: "var(--font-size-small, 0.8em)",
+                padding: "var(--component-badge-padding-small)",
+                minSize: "var(--component-badge-size-small)",
+            },
+            medium: {
+                fontSize: "var(--font-size-label, 0.83em)",
+                padding: "var(--component-badge-padding-medium)",
+                minSize: "var(--component-badge-size-medium)",
+            },
+            large: {
+                fontSize: "var(--font-size-paragraph, 1em)",
+                padding: "var(--component-badge-padding-large)",
+                minSize: "var(--component-badge-size-large)",
+            },
+        };
+        return sizeMap[size] || sizeMap.small;
+    }
+
+    hasTargetContent() {
+        return Array.from(this.childNodes).some((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) return true;
+            if (node.nodeType === Node.TEXT_NODE) {
+                return node.textContent.trim() !== "";
+            }
+            return false;
+        });
+    }
+
+    render() {
+        const [badgeColor, badgeTextColor] = this.getBadgeColors(this.color);
+        const { fontSize, padding, minSize } = this.getSizeAttributes(
+            this.size,
+        );
+        const positionStyles = this.getBadgePosition(
+            this.position,
+            this.alignment,
+        );
+        const hasTarget = this.hasTargetContent();
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    position: ${hasTarget ? "relative" : "static"};
+                    display: inline-flex;
+                    align-items: center;
+                }
+                .badge {
+                    position: ${hasTarget ? "absolute" : "static"};
+                    ${hasTarget ? positionStyles : ""}
+                    background: ${badgeColor};
+                    color: ${badgeTextColor};
+                    font-size: ${fontSize};
+                    font-weight: bold;
+                    padding: ${padding};
+                    border-radius: var(--component-badge-border-radius-circle, 9999px);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-family: var(--font-family-body, sans-serif);
+                    min-width: ${minSize};
+                    height: ${minSize};
+                    z-index: 20;
+                }
+                ::slotted(*) {
+                    position: relative;
+                    display: inline-block;
+                }
+            </style>
+            ${hasTarget ? "<slot></slot>" : ""}
+            <div class="badge" part="badge">${this.value}</div>
+        `;
+    }
+}
+
+if (!customElements.get("y-badge")) {
+    customElements.define("y-badge", YumeBadge);
+}
+
+export { YumeBadge };

package/dist/components/y-button.d.ts

@@ -0,0 +1,19 @@
+export class YumeButton extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set value(newVal: any);
+    get value(): any;
+    selectedValues: any;
+    setOptions(options: any): void;
+    handleClick(): void;
+    init(): void;
+    proxyNativeOnClick(): void;
+    updateButtonAttributes(): void;
+    manageSlotVisibility(slotName: any, selector: any): void;
+    render(): void;
+    button: HTMLButtonElement;
+    applyStyles(): void;
+    addEventListeners(): void;
+    updateStyles(): void;
+}