@plusui/library 0.1.0

package/dist/components/avatar/avatar.js

@@ -0,0 +1,184 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import Tailwind from '../base/tailwind-base.js';
+import { Sizes, isValidSize } from '../../model/plus.js';
+import { avatarStyle } from './avatar.style.js';
+import { o } from '../../style-map-DC_vNus2.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import '../../index-B9iart53.js';
+import '../../directive-DZCF8pFJ.js';
+
+/**
+ * @tag plus-avatar
+ * @since 0.0.0
+ * @status experimental
+ *
+ * PlusAvatar component provides a visual representation for users or entities.
+ * Supports images, text initials, icons and various visual styles.
+ *
+ * @slot - The default slot for avatar content
+ * @slot fallback - Optional slot for custom fallback content
+ *
+ * @csspart base - The component's base wrapper
+ *
+ * @cssproperty --text-color - Controls the text color of the avatar
+ * @cssproperty --bg-default - Controls the default background color
+ */
+class PlusAvatar extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Shape of the avatar
+         * - circle: Circular shape
+         * - square: Square shape with slight rounding
+         * @default 'circle'
+         */
+        this.shape = 'circle';
+        /**
+         * Size of the avatar
+         * Can be a predefined size (xs, sm, md, lg, xl) or custom value
+         * @default 'md'
+         */
+        this.size = Sizes.md;
+        /**
+         * Icon class to use when no image is available
+         * @default 'fa-solid fa-user'
+         */
+        this.icon = 'fa-solid fa-user';
+        /**
+         * Toggles inverted color scheme
+         * @default false
+         */
+        this.invert = false;
+        /**
+         * Strategy to use when image fails to load
+         * - icon: Shows an icon
+         * - text: Shows text initials
+         * - custom: Uses fallback slot content
+         * @default 'icon'
+         */
+        this.fallbackStrategy = 'icon';
+        // @property({ type: Boolean }) loading = false;
+        // @property() loadingText = 'Loading...';
+        this.isFallback = false;
+        // Event handlers
+        this.handleError = () => {
+            this.isFallback = true;
+            this.dispatchEvent(new CustomEvent('error', { bubbles: true }));
+        };
+        this.handleLoad = () => {
+            // this.loading = false;
+            this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+        };
+    }
+    // Private methods
+    get hasValidImage() {
+        return Boolean(this.image) && !this.isFallback;
+    }
+    get hasValidText() {
+        return Boolean(this.text);
+    }
+    getInitials() {
+        if (!this.text)
+            return '';
+        const words = this.text.split(' ').filter((word) => word.length > 0);
+        if (this.size !== Sizes.xs && words.length > 1) {
+            return (words[0][0] + words[words.length - 1][0]).toUpperCase();
+        }
+        return words[0][0].toUpperCase();
+    }
+    // Render methods
+    renderImage() {
+        if (!this.image)
+            return null;
+        return x `<img
+      class="object-cover w-full h-full"
+      loading="lazy"
+      @error=${this.handleError}
+      @load=${this.handleLoad}
+      src=${this.image}
+      alt=${this.alt || this.text || 'Avatar'}
+    />`;
+    }
+    renderFallback() {
+        if (this.fallbackStrategy === 'text' && this.hasValidText) {
+            return this.getInitials();
+        }
+        if (this.fallbackStrategy === 'icon') {
+            return x `<i class=${this.icon}></i>`;
+        }
+        return x `<slot name="fallback"><i class=${this.icon}></i></slot>`;
+    }
+    renderContent() {
+        // if (this.loading) {
+        //   return html`<span aria-busy="true">${this.loadingText}</span>`;
+        // }
+        if (this.hasValidImage) {
+            return this.renderImage();
+        }
+        if (this.hasValidText) {
+            return this.getInitials();
+        }
+        return this.renderFallback();
+    }
+    render() {
+        const defaultStyles = {
+            '--i-bg-default': `var(--plus-color-background-default-default)`,
+            '--i-text-color': `var(--plus-color-text-default)`,
+        };
+        const InvertStyles = {
+            '--i-bg-default': `var(--plus-color-background-default-invert-default)`,
+            '--i-text-color': `var(--plus-color-text-default-invert)`,
+        };
+        const styles = this.invert ? InvertStyles : defaultStyles;
+        const style = o({
+            ...(!isValidSize(this.size) ? { ['--size']: this.size } : {}),
+            ...styles,
+        });
+        return x `
+      <div
+        role="img"
+        aria-label=${this.alt || this.text || 'Avatar'}
+        aria-invalid=${this.isFallback}
+        class=${avatarStyle({
+            size: isValidSize(this.size) ? this.size : 'custom',
+            shape: this.shape,
+        })}
+        style="${style}"
+      >
+        <slot>${this.renderContent()}</slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    n()
+], PlusAvatar.prototype, "image", void 0);
+__decorate([
+    n()
+], PlusAvatar.prototype, "alt", void 0);
+__decorate([
+    n()
+], PlusAvatar.prototype, "shape", void 0);
+__decorate([
+    n()
+], PlusAvatar.prototype, "size", void 0);
+__decorate([
+    n()
+], PlusAvatar.prototype, "icon", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusAvatar.prototype, "invert", void 0);
+__decorate([
+    n()
+], PlusAvatar.prototype, "text", void 0);
+__decorate([
+    n()
+], PlusAvatar.prototype, "fallbackStrategy", void 0);
+__decorate([
+    r()
+], PlusAvatar.prototype, "isFallback", void 0);
+
+export { PlusAvatar, PlusAvatar as default };

package/dist/components/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":"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"}

package/dist/components/avatar/avatar.style.d.ts

@@ -0,0 +1,93 @@
+export declare const avatarStyle: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        custom: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}, undefined, string[], import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        custom: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        custom: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        custom: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        custom: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}, undefined, string[], import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        custom: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        custom: string;
+    };
+    shape: {
+        circle: string;
+        square: string;
+    };
+}>, unknown, unknown, undefined>>;
+//# sourceMappingURL=avatar.style.d.ts.map

package/dist/components/avatar/avatar.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.style.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCAwBtB,CAAC"}

package/dist/components/avatar/avatar.style.js

@@ -0,0 +1,29 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const avatarStyle = ce({
+    base: [
+        'avatar align-middle inline-flex items-center justify-center font-sans uppercase overflow-hidden',
+        'text-color-dynamic',
+        'bg-color-dynamic-default',
+    ],
+    variants: {
+        size: {
+            xs: 'size-4 text-xs',
+            sm: 'size-6 text-xs',
+            md: 'size-9 text-sm',
+            lg: 'size-10 text-base',
+            xl: 'size-11 text-lg',
+            custom: `size-[var(--size)] text-[calc(var(--size)/2.50)]`,
+        },
+        shape: {
+            circle: 'rounded-full',
+            square: 'rounded',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        shape: 'circle',
+    },
+});
+
+export { avatarStyle };

package/dist/components/avatar/avatar.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.style.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,WAAW,GAAG,EAAE,CAAC;IAC5B,IAAI,EAAE;QACJ,iGAAiG;QACjG,oBAAoB;QACpB,0BAA0B;KAC3B;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,gBAAgB;YACpB,EAAE,EAAE,gBAAgB;YACpB,EAAE,EAAE,gBAAgB;YACpB,EAAE,EAAE,mBAAmB;YACvB,EAAE,EAAE,iBAAiB;YACrB,MAAM,EAAE,kDAAkD;SAC3D;QACD,KAAK,EAAE;YACL,MAAM,EAAE,cAAc;YACtB,MAAM,EAAE,SAAS;SAClB;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC,CAAC"}

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,2 @@
+export type * from './avatar.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAEA,mBAAmB,aAAa,CAAC"}

package/dist/components/avatar/index.js

@@ -0,0 +1,14 @@
+import PlusAvatar from './avatar.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import '../base/tailwind-base.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import '../../model/plus.js';
+import './avatar.style.js';
+import '../../index-B9iart53.js';
+import '../../style-map-DC_vNus2.js';
+import '../../directive-DZCF8pFJ.js';
+
+customElements.define('plus-avatar', PlusAvatar);

package/dist/components/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIzC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC"}

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

@@ -0,0 +1,49 @@
+import Tailwind from '../base/tailwind-base';
+export default class PlusBadge extends Tailwind {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Sets the status/color variant of the badge
+     * - default: Neutral color scheme
+     * - primary: Brand color scheme
+     * - success: Green color scheme
+     * - warning: Yellow color scheme
+     * - danger: Red color scheme
+     * - info: Blue color scheme
+     * @default 'default'
+     */
+    status: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    /**
+     * Sets the size of the badge
+     * - sm: Small size
+     * - md: Medium size
+     * - lg: Large size
+     * @default 'md'
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Sets the position of the badge relative to its content
+     * - top-right: Top right corner
+     * - top-left: Top left corner
+     * - bottom-right: Bottom right corner
+     * - bottom-left: Bottom left corner
+     * - '': No specific position
+     * @default 'top-right'
+     */
+    orientation: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | '';
+    /**
+     * Sets the offset of the badge from its default position
+     * Format: "x,y" where x and y can be any valid CSS length value
+     * Example: "10px,5px" or "-5px,-10px"
+     */
+    offset: [string, string];
+    /**
+     * Sets the content of the badge
+     * If not provided, the badge will be displayed as a dot
+     */
+    content?: string;
+    hasSlot: boolean;
+    private handleSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { PlusBadge };
+//# sourceMappingURL=badge.d.ts.map

package/dist/components/badge/badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAoC7C,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,QAAQ;IAC7C,OAAgB,MAAM,4BAAwC;IAE9D;;;;;;;;;OASG;IAEH,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAC7D;IAEZ;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;;;;;;;OAQG;IAEH,WAAW,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,GAAG,EAAE,CAC7D;IAEd;;;;OAIG;IAYH,MAAM,EAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAE1B;;;OAGG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAGjB,OAAO,UAAS;IAEhB,OAAO,CAAC,gBAAgB;IAMf,MAAM;CA0ChB;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/badge/badge.host.style.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=badge.host.style.d.ts.map

package/dist/components/badge/badge.host.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.host.style.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.host.style.ts"],"names":[],"mappings":";AAEA,wBAOE"}

package/dist/components/badge/badge.host.style.js

@@ -0,0 +1,12 @@
+import { i } from '../../lit-element-ByzbtpGk.js';
+
+var badgeHostStyle = i `
+  :host {
+    display: inline-block;
+    position: relative;
+    width: fit-content;
+    height: fit-content;
+  }
+`;
+
+export { badgeHostStyle as default };

package/dist/components/badge/badge.host.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.host.style.js","sourceRoot":"","sources":["../../../src/components/badge/badge.host.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;CAOjB,CAAC"}

package/dist/components/badge/badge.js

@@ -0,0 +1,152 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import Tailwind from '../base/tailwind-base.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import badgeHostStyle from './badge.host.style.js';
+import { badgeStyle } from './badge.style.js';
+import { o } from '../../style-map-DC_vNus2.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import '../../index-B9iart53.js';
+import '../../directive-DZCF8pFJ.js';
+
+/**
+ * @tag plus-badge
+ * @summary Badge component that displays a small status indicator.
+ *
+ * @slot - The content that the badge will be attached to
+ * @slot badge-content - The badge content (text, number, etc.)
+ *
+ * @csspart badge - The component's base wrapper
+ *
+ * @cssproperty --text-color - Controls the text color of the badge
+ * @cssproperty --border-color - Controls the border color of the badge
+ * @cssproperty --bg-default - Controls the default background color
+ *
+ * @example
+ * ```html
+ * <plus-badge status="success">
+ *   <span>Notifications</span>
+ *   <span slot="badge-content">3</span>
+ * </plus-badge>
+ * ```
+ */
+const textColorMap = {
+    default: 'default',
+    primary: 'base',
+    success: 'base',
+    warning: 'base',
+    danger: 'base',
+    info: 'base',
+};
+class PlusBadge extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the status/color variant of the badge
+         * - default: Neutral color scheme
+         * - primary: Brand color scheme
+         * - success: Green color scheme
+         * - warning: Yellow color scheme
+         * - danger: Red color scheme
+         * - info: Blue color scheme
+         * @default 'default'
+         */
+        this.status = 'default';
+        /**
+         * Sets the size of the badge
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Sets the position of the badge relative to its content
+         * - top-right: Top right corner
+         * - top-left: Top left corner
+         * - bottom-right: Bottom right corner
+         * - bottom-left: Bottom left corner
+         * - '': No specific position
+         * @default 'top-right'
+         */
+        this.orientation = 'top-right';
+        this.hasSlot = false;
+    }
+    handleSlotChange(e) {
+        const slot = e.target;
+        const nodes = slot.assignedNodes({ flatten: true });
+        this.hasSlot = nodes.length > 0;
+    }
+    render() {
+        const getColorVariables = () => {
+            return {
+                '--i-bg-default': `var(--plus-color-background-${this.status}-default)`,
+                '--i-text-color': `var(--plus-color-text-${textColorMap[this.status]})`,
+                '--i-border-color': `var(--plus-color-border-${this.status})`,
+            };
+        };
+        const dynamicStyles = {
+            '--d-text': 'var(--text-color,var(--i-text-color))',
+            '--d-border': 'var(--border-color,var(--i-border-color))',
+            '--d-bg-default': 'var(--bg-default,var(--i-bg-default))',
+        };
+        const { offset } = this;
+        const hasContent = !!(this.content || this.hasSlot);
+        return x `
+      <slot></slot>
+      <div
+        part="badge"
+        role="status"
+        aria-live="polite"
+        style=${o({
+            ...dynamicStyles,
+            ...getColorVariables(),
+            ...(offset && { transform: `translate(${offset[0]}, ${offset[1]})` }),
+        })}
+        class=${badgeStyle({
+            size: this.size,
+            hasContent,
+            orientation: this.orientation,
+            status: this.status,
+        })}
+      >
+        <slot name="badge-content" @slotchange=${this.handleSlotChange}
+          >${this.content}</slot
+        >
+      </div>
+    `;
+    }
+}
+PlusBadge.styles = [...Tailwind.styles, badgeHostStyle];
+__decorate([
+    n({ type: String })
+], PlusBadge.prototype, "status", void 0);
+__decorate([
+    n({ type: String })
+], PlusBadge.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], PlusBadge.prototype, "orientation", void 0);
+__decorate([
+    n({
+        type: Array,
+        converter: (value) => {
+            const split = value ? value.split(',') : [];
+            if (split?.length > 1) {
+                return [split[0], split[1]];
+            }
+            else {
+                return [value, value];
+            }
+        },
+    })
+], PlusBadge.prototype, "offset", void 0);
+__decorate([
+    n({ type: String })
+], PlusBadge.prototype, "content", void 0);
+__decorate([
+    r()
+], PlusBadge.prototype, "hasSlot", void 0);
+
+export { PlusBadge, PlusBadge as default };

package/dist/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"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"}