@brightspot/ui 1.0.1-wc.4 → 1.1.0

package/dist/components/badge/Badge.js

@@ -0,0 +1,118 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { EventEmitterMixin } from '../../utils/EventEmitterMixin.js';
+import { ReadyMixin } from '../../utils/ReadyMixin.js';
+/**
+ * A badge component for highlighting important information.
+ *
+ * Badges help highlight notifications, status, or new messages.
+ * Primarily used for communicating secondary or additional information.
+ *
+ * @element btu-badge
+ *
+ * @fires {CustomEvent} btu-badge-ready - Fired after first render and initialization
+ *
+ * @cssprop --badge-color-foreground - Text color (overrides theme color)
+ * @cssprop --badge-color-background - Background color (overrides theme color)
+ * @cssprop --badge-radius-size - Border radius size (overrides shape default, default: 999px)
+ * @cssprop --badge-px - Horizontal padding (overrides size default)
+ * @cssprop --badge-py - Vertical padding (overrides size default)
+ * @cssprop --badge-dot-size - Size of the dot affordance (default: 6px)
+ *
+ * @example
+ * ```html
+ * <!-- Badge with dot -->
+ * <btu-badge variant="info" size="sm" dot>New</btu-badge>
+ *
+ * <!-- Badge with icon -->
+ * <btu-badge variant="success" size="md">
+ *   <btu-icon symbol="check"></btu-icon>
+ *   Success
+ * </btu-badge>
+ * ```
+ */
+export default class Badge extends EventEmitterMixin(ReadyMixin(LitElement)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Style of the badge.
+         * - 'info': Informational (default)
+         * - 'primary': Primary action or emphasis
+         * - 'error': Error or danger state
+         * - 'success': Success or completion state
+         * - 'warning': Warning or caution state
+         * @attr
+         */
+        this.variant = 'info';
+        /**
+         * Should a dot be displayed before the label?
+         * @attr
+         */
+        this.dot = false;
+        /**
+         * Size variant.
+         * - 'sm': Small (default)
+         * - 'md': Medium
+         * - 'lg': Large
+         * @attr
+         */
+        this.size = 'sm';
+        /** @internal */
+        this.initialClasses = [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Capture initial classes from backend HTML
+        if (this.className) {
+            this.initialClasses = this.className.split(' ').filter(c => c.trim());
+        }
+    }
+    createRenderRoot() {
+        return this;
+    }
+    willUpdate() {
+        // Map variant to theme color (info → gray)
+        const colorMap = {
+            info: 'gray',
+            primary: 'primary',
+            error: 'error',
+            success: 'success',
+            warning: 'warning',
+        };
+        const classes = [
+            ...this.initialClasses,
+            'btu-badge',
+            `btu-badge-${this.size}`,
+            `btu-badge-${colorMap[this.variant]}`,
+            this.dot ? 'btu-badge-dot' : '',
+        ];
+        this.className = classes.filter(Boolean).join(' ');
+    }
+    firstUpdated() {
+        this.emit('btu-badge-ready');
+    }
+    render() {
+        return html ``;
+    }
+}
+__decorate([
+    property({ type: String })
+], Badge.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean })
+], Badge.prototype, "dot", void 0);
+__decorate([
+    property({ type: String })
+], Badge.prototype, "size", void 0);
+// Register custom element with guard to prevent double registration
+// (common with yarn link, HMR, or webpack bundle duplication)
+if (!customElements.get('btu-badge')) {
+    customElements.define('btu-badge', Badge);
+}
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/badge/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AACpE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAQtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,iBAAiB,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IAA5E;;QACE;;;;;;;;WAQG;QAEH,YAAO,GAAyD,MAAM,CAAA;QAEtE;;;WAGG;QAEH,QAAG,GAAG,KAAK,CAAA;QAEX;;;;;;WAMG;QAEH,SAAI,GAAG,IAAI,CAAA;QAEX,gBAAgB;QACR,mBAAc,GAAa,EAAE,CAAA;IA0CvC,CAAC;IAxCC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,4CAA4C;QAC5C,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAA;QACvE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,UAAU;QACR,2CAA2C;QAC3C,MAAM,QAAQ,GAAmD;YAC/D,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,SAAS;SACnB,CAAA;QAED,MAAM,OAAO,GAAG;YACd,GAAG,IAAI,CAAC,cAAc;YACtB,WAAW;YACX,aAAa,IAAI,CAAC,IAAI,EAAE;YACxB,aAAa,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;YACrC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;SAChC,CAAA;QAED,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACpD,CAAC;IAED,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,EAAE,CAAA;IACf,CAAC;CACF;AA9DC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAC2C;AAOtE;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kCACjB;AAUX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAChB;AA+Cb,oEAAoE;AACpE,8DAA8D;AAC9D,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;IACrC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,KAAK,CAAC,CAAA;AAC3C,CAAC"}

package/dist/custom-elements.json

@@ -0,0 +1,437 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/components/avatar/Avatar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An avatar component for displaying user profile images with fallback support.\n\nAvatars display user profile images with automatic fallback to initials when\nthe image fails to load or is not provided.",
+          "name": "Avatar",
+          "cssProperties": [
+            {
+              "description": "Custom size (overrides size prop)",
+              "name": "--avatar-size"
+            },
+            {
+              "description": "Fallback background color (default: purple-600)",
+              "name": "--avatar-bg-color"
+            },
+            {
+              "description": "How rounded is the avatar (default: circle)",
+              "name": "--avatar-corner-rounding"
+            },
+            {
+              "description": "Optional ring border color",
+              "name": "--avatar-ring-color"
+            },
+            {
+              "description": "Ring border width (default: 2px)",
+              "name": "--avatar-ring-width"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Image source URL",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "alt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Alt text for the image",
+              "attribute": "alt"
+            },
+            {
+              "kind": "field",
+              "name": "fallback",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Fallback text (typically user initials)",
+              "attribute": "fallback"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
+              },
+              "default": "'md'",
+              "description": "Size variant.\n- 'xs': Extra small (1.5rem)\n- 'sm': Small (2.25rem)\n- 'md': Medium (2.5rem) - default\n- 'lg': Large (3rem)\n- 'xl': Extra large (3.5rem)\n- 'xxl': Extra extra large (4rem)",
+              "attribute": "size"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after first render and initialization",
+              "name": "btu-avatar-ready"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{src: string}>"
+              },
+              "description": "Fired when image successfully loads",
+              "name": "btu-avatar-image-loaded"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{src: string, error: Event}>"
+              },
+              "description": "Fired when image fails to load",
+              "name": "btu-avatar-image-error"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Image source URL",
+              "fieldName": "src",
+              "attribute": "src"
+            },
+            {
+              "name": "alt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Alt text for the image",
+              "fieldName": "alt",
+              "attribute": "alt"
+            },
+            {
+              "name": "fallback",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Fallback text (typically user initials)",
+              "fieldName": "fallback",
+              "attribute": "fallback"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'"
+              },
+              "default": "'md'",
+              "description": "Size variant.\n- 'xs': Extra small (1.5rem)\n- 'sm': Small (2.25rem)\n- 'md': Medium (2.5rem) - default\n- 'lg': Large (3rem)\n- 'xl': Extra large (3.5rem)\n- 'xxl': Extra extra large (4rem)",
+              "fieldName": "size",
+              "attribute": "size"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "EventEmitterMixin",
+              "module": "/src/utils/EventEmitterMixin.js"
+            },
+            {
+              "name": "ReadyMixin",
+              "module": "/src/utils/ReadyMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "btu-avatar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Avatar",
+            "module": "src/components/avatar/Avatar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "btu-avatar",
+          "declaration": {
+            "name": "Avatar",
+            "module": "src/components/avatar/Avatar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/avatar/AvatarGroup.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A container component for grouping multiple avatars with consistent styling.\n\nAvatarGroup wraps multiple avatar elements and provides:\n- Overflow handling (shows \"+N\" for excess avatars)\n- Consistent spacing and ring borders\n- Size inheritance for all child avatars",
+          "name": "AvatarGroup",
+          "members": [
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Maximum number of visible avatars. Remaining avatars shown as \"+N\"",
+              "attribute": "max"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'xs' | 'sm' | 'md'"
+              },
+              "default": "'md'",
+              "description": "Size variant for all child avatars (unless individually overridden)",
+              "attribute": "size"
+            },
+            {
+              "kind": "method",
+              "name": "processAvatars",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Process all avatar children: apply size, handle overflow\nCall this method when avatars are dynamically added or removed"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after first render and initialization",
+              "name": "btu-avatar-group-ready"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{hidden: number}>"
+              },
+              "description": "Fired when avatars are hidden due to max limit",
+              "name": "btu-avatar-group-overflow"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "max",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Maximum number of visible avatars. Remaining avatars shown as \"+N\"",
+              "fieldName": "max",
+              "attribute": "max"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'xs' | 'sm' | 'md'"
+              },
+              "default": "'md'",
+              "description": "Size variant for all child avatars (unless individually overridden)",
+              "fieldName": "size",
+              "attribute": "size"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "EventEmitterMixin",
+              "module": "/src/utils/EventEmitterMixin.js"
+            },
+            {
+              "name": "ReadyMixin",
+              "module": "/src/utils/ReadyMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "btu-avatar-group",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AvatarGroup",
+            "module": "src/components/avatar/AvatarGroup.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "btu-avatar-group",
+          "declaration": {
+            "name": "AvatarGroup",
+            "module": "src/components/avatar/AvatarGroup.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/badge/Badge.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A badge component for highlighting important information.\n\nBadges help highlight notifications, status, or new messages.\nPrimarily used for communicating secondary or additional information.",
+          "name": "Badge",
+          "cssProperties": [
+            {
+              "description": "Text color (overrides theme color)",
+              "name": "--badge-color-foreground"
+            },
+            {
+              "description": "Background color (overrides theme color)",
+              "name": "--badge-color-background"
+            },
+            {
+              "description": "Border radius size (overrides shape default, default: 999px)",
+              "name": "--badge-radius-size"
+            },
+            {
+              "description": "Horizontal padding (overrides size default)",
+              "name": "--badge-px"
+            },
+            {
+              "description": "Vertical padding (overrides size default)",
+              "name": "--badge-py"
+            },
+            {
+              "description": "Size of the dot affordance (default: 6px)",
+              "name": "--badge-dot-size"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'info' | 'primary' | 'error' | 'success' | 'warning'"
+              },
+              "default": "'info'",
+              "description": "Style of the badge.\n- 'info': Informational (default)\n- 'primary': Primary action or emphasis\n- 'error': Error or danger state\n- 'success': Success or completion state\n- 'warning': Warning or caution state",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Should a dot be displayed before the label?",
+              "attribute": "dot"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'sm'",
+              "description": "Size variant.\n- 'sm': Small (default)\n- 'md': Medium\n- 'lg': Large",
+              "attribute": "size"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after first render and initialization",
+              "name": "btu-badge-ready"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'info' | 'primary' | 'error' | 'success' | 'warning'"
+              },
+              "default": "'info'",
+              "description": "Style of the badge.\n- 'info': Informational (default)\n- 'primary': Primary action or emphasis\n- 'error': Error or danger state\n- 'success': Success or completion state\n- 'warning': Warning or caution state",
+              "fieldName": "variant",
+              "attribute": "variant"
+            },
+            {
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Should a dot be displayed before the label?",
+              "fieldName": "dot",
+              "attribute": "dot"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'sm'",
+              "description": "Size variant.\n- 'sm': Small (default)\n- 'md': Medium\n- 'lg': Large",
+              "fieldName": "size",
+              "attribute": "size"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "EventEmitterMixin",
+              "module": "/src/utils/EventEmitterMixin.js"
+            },
+            {
+              "name": "ReadyMixin",
+              "module": "/src/utils/ReadyMixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "btu-badge",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/components/badge/Badge.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "btu-badge",
+          "declaration": {
+            "name": "Badge",
+            "module": "src/components/badge/Badge.ts"
+          }
+        }
+      ]
+    }
+  ]
+}