@studious-creative/yumekit 0.1.0

package/dist/components/y-avatar.js

@@ -0,0 +1,104 @@
+class YumeAvatar extends HTMLElement {
+    static get observedAttributes() {
+        return ["src", "alt", "size", "shape"];
+    }
+
+    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 borderRadius = `var(--component-avatar-border-radius-${shape}, 9999px)`;
+
+        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: var(--primary-content--, rgba(4, 134, 209, 1));
+            color: var(--primary-background-component, rgba(245, 250, 250, 1));
+            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.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") || "";
+    }
+
+    getBadgeColor(color) {
+        const colorMap = {
+            primary: "var(--primary-content--)",
+            secondary: "var(--secondary-content--)",
+            base: "var(--base-content--)",
+            success: "var(--success-content--)",
+            warning: "var(--warning-content--)",
+            error: "var(--error-content--)",
+            help: "var(--help-content--)",
+        };
+        return colorMap[color] || color;
+    }
+
+    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 = this.getBadgeColor(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: var(--base-background-component, #fff);
+                    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 };