atomicuilibrary 0.0.1

package/dist/collection/components/avatar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/avatar-group/avatar-group.css

@@ -0,0 +1,253 @@
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.avatar-group {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+}
+.avatar-group.layout-stack .group-avatar {
+  margin-right: var(--avatar-spacing, -16px);
+  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
+  transform-origin: center bottom;
+}
+.avatar-group.layout-stack .group-avatar:hover {
+  z-index: 100 !important;
+  transform: scale(1.25) translateY(-10px);
+  margin-right: 8px !important;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  border-color: var(--border-subtle, #fff) !important;
+}
+.avatar-group.layout-stack .group-avatar:hover ~ .group-avatar, .avatar-group.layout-stack .group-avatar:hover ~ .excess-avatar-container {
+  transform: translateX(24px);
+}
+.avatar-group.layout-stack.avatar-group-animated:hover {
+  padding-right: 40px;
+}
+.avatar-group.layout-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(calc(var(--avatar-size) + 8px), 1fr));
+  gap: 8px;
+  width: 100%;
+}
+
+.avatar-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.layout-stack .avatar-list {
+  flex-wrap: nowrap;
+}
+
+.avatar-extra {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-danger, #f56a00);
+  color: var(--text-standard, #ffffff);
+  font-weight: 600;
+  border: var(--avatar-border-width, 2px) solid var(--avatar-border-color, #fff);
+  cursor: pointer;
+  z-index: 1;
+  transition: transform 0.2s;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  font-size: 0.8em;
+}
+.avatar-extra:hover {
+  transform: scale(1.1) translateY(-4px);
+  z-index: 100;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+.avatar-extra.shape-circle {
+  border-radius: 50%;
+}
+.avatar-extra.shape-square {
+  border-radius: 8px;
+}
+
+.avatar-popover {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: var(--bg-primary, #ffffff);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  padding: 12px;
+  z-index: 1000;
+  min-width: 180px;
+  margin-top: 8px;
+  animation: popoverFadeIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.avatar-popover::after {
+  content: "";
+  position: absolute;
+  top: -12px;
+  right: 12px;
+  border: 6px solid transparent;
+  border-bottom-color: var(--bg-primary, #ffffff);
+}
+.avatar-popover .popover-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.avatar-popover .popover-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+  border-radius: 6px;
+  transition: background 0.2s;
+  cursor: pointer;
+}
+.avatar-popover .popover-item:hover {
+  background: var(--bg-secondary, #f3f4f6);
+}
+.avatar-popover .popover-item ui-avatar {
+  transition: none !important;
+  transform: none !important;
+  box-shadow: none !important;
+}
+.avatar-popover .popover-text {
+  font-size: 14px;
+  color: var(--text-secondary, #374151);
+  font-weight: 500;
+}
+
+@keyframes popoverFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.avatar-roster-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  backdrop-filter: blur(4px);
+}
+
+.avatar-roster-content {
+  background: var(--bg-primary, #ffffff);
+  width: 90%;
+  max-width: 500px;
+  max-height: 80vh;
+  border-radius: 16px;
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: modalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.roster-header {
+  padding: 20px;
+  border-bottom: 1px solid var(--border-subtle, #eee);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.roster-header h3 {
+  margin: 0;
+  color: var(--text-primary, #1f2937);
+}
+.roster-header .close-btn {
+  background: none;
+  border: none;
+  font-size: 28px;
+  cursor: pointer;
+  color: var(--text-muted, #9ca3af);
+}
+.roster-header .close-btn:hover {
+  color: var(--text-primary, #1f2937);
+}
+
+.roster-list {
+  padding: 12px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.roster-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px;
+  border-radius: 12px;
+  transition: background 0.2s;
+}
+.roster-item:hover {
+  background: var(--bg-primary, #f9fafb);
+}
+
+.roster-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.roster-name {
+  font-weight: 600;
+  color: var(--text-primary, #111827);
+}
+
+.roster-status {
+  font-size: 11px;
+  text-transform: capitalize;
+  border-radius: 4px;
+  padding: 1px 6px;
+  width: fit-content;
+}
+
+.status-online {
+  color: var(--color-success-hover, #059669);
+  background: var(--bg-primary, #ecfdf5);
+}
+
+@keyframes modalIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}

package/dist/collection/components/avatar-group/avatar-group.js

@@ -0,0 +1,405 @@
+import { h, Host } from "@stencil/core";
+export class AvatarGroup {
+    el;
+    /** Array of avatar props for dynamic generation */
+    avatars = [];
+    /** Maximum number of avatars to display before grouping */
+    maxVisible = 5;
+    /** Maximum config: number or object { count, style, popover } */
+    max = null;
+    /** Size of avatars in the group */
+    size = 'm';
+    /** Shape to apply to all avatars in the group */
+    shape = 'circle';
+    /** Layout mode: 'stack' or 'grid' */
+    layout = 'stack';
+    /** Spacing between avatars (in pixels) for grid mode */
+    spacing = 4;
+    /** Overlapping amount (negative value for overlap) */
+    overlap = null;
+    /** Border color for avatars in the group */
+    borderColor = 'white';
+    /** Border width for avatars in the group */
+    borderWidth = 2;
+    /** Enable popover to show all avatars when hovering over excess count */
+    enablePopover = true;
+    /** Enable animated shifting transitions on hover */
+    animated = true;
+    slottedAvatars = [];
+    showPopover = false;
+    isRosterOpen = false;
+    isHovered = false;
+    handleSlotChange() {
+        this.updateSlottedAvatars();
+    }
+    componentWillLoad() {
+        this.updateSlottedAvatars();
+    }
+    componentDidLoad() { }
+    updateSlottedAvatars() {
+        const slotElement = this.el.shadowRoot?.querySelector('slot');
+        const assignedElements = slotElement
+            ? slotElement.assignedElements()
+            : Array.from(this.el.children);
+        this.slottedAvatars = assignedElements.filter(el => el.tagName.toLowerCase() === 'ui-avatar');
+    }
+    getMaxCount() {
+        const maxVal = this.max || this.maxVisible;
+        if (typeof maxVal === 'number')
+            return maxVal;
+        if (maxVal && typeof maxVal === 'object' && 'count' in maxVal)
+            return maxVal.count || Infinity;
+        return Infinity;
+    }
+    getMaxStyle() {
+        if (this.max && typeof this.max === 'object' && 'style' in this.max)
+            return this.max.style;
+        return {};
+    }
+    calculateOverlap() {
+        if (this.layout === 'grid')
+            return this.spacing;
+        if (this.overlap !== null)
+            return -Math.abs(this.overlap);
+        const sizeMap = { xs: 24, s: 32, sm: 32, default: 20, m: 40, lg: 40, l: 48, xl: 64 };
+        let avatarSize = 40;
+        const numericSize = parseFloat(this.size);
+        if (!isNaN(numericSize))
+            avatarSize = numericSize;
+        else if (typeof this.size === 'string' && sizeMap[this.size])
+            avatarSize = sizeMap[this.size];
+        return -(avatarSize * 0.4);
+    }
+    handleMouseEnterGroup = () => { this.isHovered = true; };
+    handleMouseLeaveGroup = () => { this.isHovered = false; this.showPopover = false; };
+    toggleRoster = (ev) => { ev.stopPropagation(); this.isRosterOpen = !this.isRosterOpen; };
+    closeRoster = () => { this.isRosterOpen = false; };
+    renderExcessCount(total, max) {
+        const excess = total - max;
+        if (excess <= 0)
+            return null;
+        const maxStyle = this.getMaxStyle();
+        return (h("div", { class: "excess-avatar-container", onMouseEnter: () => this.showPopover = this.enablePopover, onMouseLeave: () => this.showPopover = false, onClick: this.toggleRoster }, h("div", { class: { 'avatar-extra': true, [`avatar-${this.getSizeAlias()}`]: true, [`shape-${this.shape}`]: true }, style: { ...maxStyle, backgroundColor: maxStyle.backgroundColor || '#f56a00' } }, "+", excess), this.showPopover && this.enablePopover && this.layout === 'stack' && this.renderPopover(max)));
+    }
+    renderPopover(max) {
+        const all = this.getAllAvatarData();
+        const hidden = all.slice(max);
+        return (h("div", { class: "avatar-popover" }, h("div", { class: "popover-content" }, hidden.map((avatar, idx) => (h("div", { class: "popover-item", key: idx }, h("ui-avatar", { size: "xs", shape: this.shape, src: avatar.src, icon: avatar.icon, name: avatar.name, content: avatar.content, bgColor: avatar.bgColor }), h("span", { class: "popover-text" }, avatar.name || avatar.content || 'User')))))));
+    }
+    getAllAvatarData() {
+        if (this.avatars && this.avatars.length > 0)
+            return this.avatars;
+        return this.slottedAvatars.map(el => ({
+            src: el.getAttribute('src'),
+            name: el.getAttribute('name'),
+            content: el.getAttribute('content') || el.textContent?.trim(),
+            tooltipText: el.getAttribute('tooltipText') || el.getAttribute('tooltip-text') || el.getAttribute('name') || el.textContent?.trim(),
+            icon: el.getAttribute('icon'),
+            bgColor: el.getAttribute('bgColor') || el.getAttribute('bg-color'),
+            badge: el.getAttribute('badge'),
+            status: el.getAttribute('status')
+        }));
+    }
+    getSizeAlias() {
+        const sizeMap = { sm: 's', md: 'm', lg: 'l' };
+        return sizeMap[this.size] || this.size;
+    }
+    render() {
+        const all = this.getAllAvatarData();
+        const maxCount = this.getMaxCount();
+        const visible = (this.layout === 'grid') ? all : all.slice(0, maxCount);
+        const overlap = this.calculateOverlap();
+        const groupClasses = {
+            'avatar-group': true,
+            [`layout-${this.layout}`]: true,
+            'avatar-group-animated': this.animated && this.layout === 'stack',
+            'expanded': this.isHovered && this.layout === 'stack'
+        };
+        const groupStyle = {
+            '--avatar-spacing': `${overlap}px`,
+            '--avatar-border-color': this.borderColor,
+            '--avatar-border-width': `${this.borderWidth}px`,
+            '--avatar-size': typeof this.size === 'number' ? `${this.size}px` : this.size.toString(),
+        };
+        return (h(Host, { key: 'd1c53574be9549de6cce9cf8aae33ac8019dd556' }, h("div", { key: '0f64bd06b7f8bd077e98286b9df7cd24e1924a50', class: groupClasses, style: groupStyle, onMouseEnter: this.handleMouseEnterGroup, onMouseLeave: this.handleMouseLeaveGroup }, h("div", { key: '937475ddb42adc924320a2f15f61a76f3ec3c916', class: "avatar-list" }, visible.map((avatar, index) => (h("ui-avatar", { ...avatar, key: index, size: this.size, shape: this.shape, border: `${this.borderWidth}px solid ${this.borderColor}`, class: "group-avatar", style: { zIndex: (this.layout === 'stack' ? (all.length - index) : 1).toString() } }))), this.layout === 'stack' && this.renderExcessCount(all.length, maxCount)), h("div", { key: '52779f80360501b288b88cd896f2dd117b18c0e1', style: { display: 'none' } }, h("slot", { key: 'bd6996c4789091de98a2f01349990412278e51ee' }))), this.isRosterOpen && (h("div", { key: 'fb404a5fd2e4723bb54465a8e6b94d220052721d', class: "avatar-roster-backdrop", onClick: this.closeRoster }, h("div", { key: '81df0d927175829c2fe80e3c39bf81350011620e', class: "avatar-roster-content", onClick: e => e.stopPropagation() }, h("div", { key: '89cea0f5aed19f87eaab53bdab36b0ccf429dc54', class: "roster-header" }, h("h3", { key: '3d113ccb91edb0b47e7bccc311af3f52f09ed5f2' }, "Participants (", all.length, ")"), h("ui-button", { key: 'ad42880fadf89334d69ff0fca445adf7fb1b4494', variant: "ghost", onClick: this.closeRoster, ariaLabel: "Close roster", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })), h("div", { key: 'd683e744b8a132d600d8681254c39b0569b1564c', class: "roster-list" }, all.map((avatar, idx) => (h("div", { key: idx, class: "roster-item" }, h("ui-avatar", { ...avatar, size: "s", shape: this.shape }), h("div", { class: "roster-info" }, h("span", { class: "roster-name" }, avatar.name || avatar.content || 'Anonymous'), avatar.status && h("span", { class: `roster-status status-${avatar.status}` }, avatar.status)))))))))));
+    }
+    static get is() { return "ui-avatar-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["avatar-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["avatar-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "avatars": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "AvatarGroupProps['avatars']",
+                    "resolved": "AvatarProps[]",
+                    "references": {
+                        "AvatarGroupProps": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/avatar-group/types.ts::AvatarGroupProps",
+                            "referenceLocation": "AvatarGroupProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of avatar props for dynamic generation"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "maxVisible": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum number of avatars to display before grouping"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-visible",
+                "defaultValue": "5"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | { count?: number; style?: any; popover?: any }",
+                    "resolved": "number | { count?: number; style?: any; popover?: any; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum config: number or object { count, style, popover }"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "null"
+            },
+            "size": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "'xs' | 'sm' | 's' | 'default' | 'm' | 'lg' | 'l' | 'xl' | string | number",
+                    "resolved": "number | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of avatars in the group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'m'"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'square' | 'hexagon' | 'squircle'",
+                    "resolved": "\"circle\" | \"hexagon\" | \"square\" | \"squircle\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shape to apply to all avatars in the group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "shape",
+                "defaultValue": "'circle'"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'stack' | 'grid'",
+                    "resolved": "\"grid\" | \"stack\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout mode: 'stack' or 'grid'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "layout",
+                "defaultValue": "'stack'"
+            },
+            "spacing": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Spacing between avatars (in pixels) for grid mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "spacing",
+                "defaultValue": "4"
+            },
+            "overlap": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overlapping amount (negative value for overlap)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overlap",
+                "defaultValue": "null"
+            },
+            "borderColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border color for avatars in the group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-color",
+                "defaultValue": "'white'"
+            },
+            "borderWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Border width for avatars in the group"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "border-width",
+                "defaultValue": "2"
+            },
+            "enablePopover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable popover to show all avatars when hovering over excess count"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-popover",
+                "defaultValue": "true"
+            },
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable animated shifting transitions on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "animated",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "slottedAvatars": {},
+            "showPopover": {},
+            "isRosterOpen": {},
+            "isHovered": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "slotchange",
+                "method": "handleSlotChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/avatar-group/types.js

@@ -0,0 +1 @@
+export {};