@actabldesign/bellhop-core 0.0.3 → 0.0.4

package/dist/components/p-Cu6Uuaq7.js

@@ -0,0 +1,92 @@
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-ChfLhYiJ.js';
+import { d as defineCustomElement$1 } from './p-CMomxDPL.js';
+
+const bhTagCss = ":host{display:inline-block}.tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);font-family:var(--font-inter);font-weight:var(--weight-medium);background-color:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-sm);white-space:nowrap;cursor:default;user-select:none}.tag-dismissible{cursor:pointer}.tag-sm{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.tag-sm.tag-dismissible{padding:var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md)}.tag-md{padding:var(--spacing-xxs) var(--spacing-md);font-size:var(--text-md-size);line-height:var(--text-md-line)}.tag-md.tag-dismissible{padding:var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md)}.tag-lg{padding:var(--spacing-xs) var(--spacing-lg);font-size:var(--text-md-size);line-height:var(--text-md-line)}.tag-lg.tag-dismissible{padding:var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg)}.tag-content{display:flex;align-items:center;gap:var(--spacing-xs)}.tag-avatar .tag-content{gap:var(--spacing-sm)}.tag-sm.tag-avatar{padding-left:var(--spacing-xs)}.tag-sm.tag-avatar.tag-dismissible{padding-left:var(--spacing-xs)}.tag-md.tag-avatar{padding-left:var(--spacing-sm)}.tag-md.tag-avatar.tag-dismissible{padding-left:var(--spacing-sm)}.tag-lg.tag-avatar{padding-left:var(--spacing-sm)}.tag-lg.tag-avatar.tag-dismissible{padding-left:var(--spacing-sm)}.tag-label-wrapper{position:relative;display:inline-flex;align-items:center;max-width:100%}.tag-label{color:var(--color-neutral-700);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag-dismiss{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:var(--spacing-xxs);border-radius:var(--radius-xs);transition:background-color 0.2s ease;width:var(--spacing-xl);height:var(--spacing-xl);flex-shrink:0}.tag-lg .tag-dismiss{padding:var(--spacing-xs);width:var(--spacing-2xl);height:var(--spacing-2xl)}.tag-dismiss:hover{background-color:var(--color-neutral-100)}.tag-dismiss:disabled{cursor:not-allowed;opacity:0.5}.tag-dismiss-icon{font-size:var(--text-sm-size);color:var(--color-neutral-500);line-height:1;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.tag-lg .tag-dismiss-icon{font-size:var(--text-md-size)}.tag-disabled{opacity:0.5;cursor:not-allowed}.tag:hover{border-color:var(--color-neutral-300)}.tag-disabled:hover{border-color:var(--color-neutral-200)}.animate-dismiss{animation:dismiss 0.2s ease-out forwards}@keyframes dismiss{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0.8)}}";
+
+const BhTag = /*@__PURE__*/ proxyCustomElement(class BhTag extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhDismiss = createEvent(this, "bhDismiss");
+    }
+    /** Tag variant */
+    variant = 'text-only';
+    /** Tag size */
+    size = 'md';
+    /** Tag label text */
+    label = 'Label';
+    /** Whether the tag is dismissible */
+    dismissible = false;
+    /** Whether the tag is disabled */
+    disabled = false;
+    /** Maximum width for the label (in pixels) */
+    maxWidth = 120;
+    /** Avatar image source (for avatar variant) */
+    avatarSrc = '';
+    /** Internal dismissing state */
+    isDismissing = false;
+    /** Emitted when dismiss button is clicked */
+    bhDismiss;
+    handleDismiss = (event) => {
+        event.stopPropagation();
+        if (this.dismissible && !this.disabled && !this.isDismissing) {
+            this.isDismissing = true;
+            // Simulate animation duration
+            setTimeout(() => {
+                this.bhDismiss.emit();
+                this.isDismissing = false;
+            }, 200);
+        }
+    };
+    render() {
+        const classes = {
+            'tag': true,
+            [`tag-${this.size}`]: true,
+            [`tag-${this.variant}`]: true,
+            'tag-dismissible': this.dismissible,
+            'tag-disabled': this.disabled,
+            'animate-dismiss': this.isDismissing,
+        };
+        const labelStyle = {
+            maxWidth: `${this.maxWidth}px`,
+        };
+        return (h("span", { key: 'ee636fd94895063d5e59160a7d54f9ceb7125d3a', class: classes }, h("div", { key: 'fcc9614abd483f5c0ecdf53b6fe7f2a3f72bdf39', class: "tag-content" }, this.variant === 'avatar' && (h("bh-avatar", { key: 'cdd5f20519b9a89753aa9f1a7cd3c3f776030997', size: "xxs", type: this.avatarSrc ? 'image' : 'placeholder', imageSrc: this.avatarSrc })), h("span", { key: '5b07fd4263d63bec8023257dacb1a417c4cfe973', class: "tag-label-wrapper" }, h("span", { key: 'dd2f1578fcaceb6a229fbf5b10253ae966baebab', class: "tag-label", style: labelStyle }, this.label))), this.dismissible && (h("button", { key: '593d8758e41957cfedc0c62bddb91d77c283996b', class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, type: "button", "aria-label": "Dismiss" }, h("span", { key: '74916c4bebdf31dbf2d7a1eff6d943b8a801496f', class: "material-symbols-outlined tag-dismiss-icon" }, "close")))));
+    }
+    static get style() { return bhTagCss; }
+}, [769, "bh-tag", {
+        "variant": [1],
+        "size": [1],
+        "label": [1],
+        "dismissible": [4],
+        "disabled": [4],
+        "maxWidth": [2, "max-width"],
+        "avatarSrc": [1, "avatar-src"],
+        "isDismissing": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-tag", "bh-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-tag":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhTag);
+            }
+            break;
+        case "bh-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhTag as B, defineCustomElement as d };
+//# sourceMappingURL=p-Cu6Uuaq7.js.map
+
+//# sourceMappingURL=p-Cu6Uuaq7.js.map

package/dist/components/p-Cu6Uuaq7.js.map

@@ -0,0 +1 @@
+{"file":"p-Cu6Uuaq7.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,ynFAAynF;;MCU7nF,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;;;;;;;;;;IAER,OAAO,GAAe,WAAW;;IAGjC,IAAI,GAAY,IAAI;;IAGpB,KAAK,GAAW,OAAO;;IAGvB,WAAW,GAAY,KAAK;;IAG5B,QAAQ,GAAY,KAAK;;IAGzB,QAAQ,GAAW,GAAG;;IAGtB,SAAS,GAAW,EAAE;;IAGrB,YAAY,GAAY,KAAK;;AAG7B,IAAA,SAAS;AAEV,IAAA,aAAa,GAAG,CAAC,KAAiB,KAAI;QAC5C,KAAK,CAAC,eAAe,EAAE;AAEvB,QAAA,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AAC5D,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;YAGxB,UAAU,CAAC,MAAK;AACd,gBAAA,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE;AACrB,gBAAA,IAAI,CAAC,YAAY,GAAG,KAAK;aAC1B,EAAE,GAAG,CAAC;;AAEX,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,CAAC,OAAO,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC1B,YAAA,CAAC,OAAO,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;YAC7B,iBAAiB,EAAE,IAAI,CAAC,WAAW;YACnC,cAAc,EAAE,IAAI,CAAC,QAAQ;YAC7B,iBAAiB,EAAE,IAAI,CAAC,YAAY;SACrC;AAED,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,QAAQ,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,CAAI,EAAA,CAAA;SAC/B;AAED,QAAA,QACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,OAAO,EAAA,EAClB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EAErB,IAAI,CAAC,OAAO,KAAK,QAAQ,KACxB,CAAW,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,aAAa,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAc,CAC7G,EAGD,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAC7B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,UAAU,EAAA,EACtC,IAAI,CAAC,KAAK,CACN,CACF,CACH,EAGL,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EAAA,YAAA,EACF,SAAS,EAAA,EAEpB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,4CAA4C,EAAA,EAAA,OAAA,CAEjD,CACA,CACV,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-tag/bh-tag.css?tag=bh-tag&encapsulation=shadow","src/components/bh-tag/bh-tag.tsx"],"sourcesContent":["/* Tag Base Styles */\n:host {\n  display: inline-block;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-sm);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  background-color: var(--color-white);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-sm);\n  white-space: nowrap;\n  cursor: default;\n  user-select: none;\n}\n\n/* Clickable Tags */\n.tag-dismissible {\n  cursor: pointer;\n}\n\n/* Size Variants */\n.tag-sm {\n  padding: var(--spacing-xxs) var(--spacing-md);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n}\n\n.tag-sm.tag-dismissible {\n  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);\n}\n\n.tag-md {\n  padding: var(--spacing-xxs) var(--spacing-md);\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n.tag-md.tag-dismissible {\n  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);\n}\n\n.tag-lg {\n  padding: var(--spacing-xs) var(--spacing-lg);\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n.tag-lg.tag-dismissible {\n  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg);\n}\n\n/* Content Layout */\n.tag-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-xs);\n}\n\n/* Avatar Variant - specific adjustments */\n.tag-avatar .tag-content {\n  gap: var(--spacing-sm);\n}\n\n.tag-sm.tag-avatar {\n  padding-left: var(--spacing-xs);\n}\n\n.tag-sm.tag-avatar.tag-dismissible {\n  padding-left: var(--spacing-xs);\n}\n\n.tag-md.tag-avatar {\n  padding-left: var(--spacing-sm);\n}\n\n.tag-md.tag-avatar.tag-dismissible {\n  padding-left: var(--spacing-sm);\n}\n\n.tag-lg.tag-avatar {\n  padding-left: var(--spacing-sm);\n}\n\n.tag-lg.tag-avatar.tag-dismissible {\n  padding-left: var(--spacing-sm);\n}\n\n/* Label wrapper for tooltip positioning */\n.tag-label-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  max-width: 100%;\n}\n\n/* Label */\n.tag-label {\n  color: var(--color-neutral-700);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Dismiss Button */\n.tag-dismiss {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: var(--spacing-xxs);\n  border-radius: var(--radius-xs);\n  transition: background-color 0.2s ease;\n  width: var(--spacing-xl);\n  height: var(--spacing-xl);\n  flex-shrink: 0;\n}\n\n.tag-lg .tag-dismiss {\n  padding: var(--spacing-xs);\n  width: var(--spacing-2xl);\n  height: var(--spacing-2xl);\n}\n\n.tag-dismiss:hover {\n  background-color: var(--color-neutral-100);\n}\n\n.tag-dismiss:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.tag-dismiss-icon {\n  font-size: var(--text-sm-size);\n  color: var(--color-neutral-500);\n  line-height: 1;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;\n}\n\n.tag-lg .tag-dismiss-icon {\n  font-size: var(--text-md-size);\n}\n\n/* Disabled State */\n.tag-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Hover State for Dismissible Tags */\n.tag:hover {\n  border-color: var(--color-neutral-300);\n}\n\n.tag-disabled:hover {\n  border-color: var(--color-neutral-200);\n}\n\n/* Dismiss animation */\n.animate-dismiss {\n  animation: dismiss 0.2s ease-out forwards;\n}\n\n@keyframes dismiss {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n}\n","import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';\n\nexport type TagVariant = 'text-only' | 'avatar';\nexport type TagSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'bh-tag',\n  styleUrl: 'bh-tag.css',\n  shadow: true,\n})\nexport class BhTag {\n  /** Tag variant */\n  @Prop() variant: TagVariant = 'text-only';\n\n  /** Tag size */\n  @Prop() size: TagSize = 'md';\n\n  /** Tag label text */\n  @Prop() label: string = 'Label';\n\n  /** Whether the tag is dismissible */\n  @Prop() dismissible: boolean = false;\n\n  /** Whether the tag is disabled */\n  @Prop() disabled: boolean = false;\n\n  /** Maximum width for the label (in pixels) */\n  @Prop() maxWidth: number = 120;\n\n  /** Avatar image source (for avatar variant) */\n  @Prop() avatarSrc: string = '';\n\n  /** Internal dismissing state */\n  @State() isDismissing: boolean = false;\n\n  /** Emitted when dismiss button is clicked */\n  @Event() bhDismiss!: EventEmitter<void>;\n\n  private handleDismiss = (event: MouseEvent) => {\n    event.stopPropagation();\n\n    if (this.dismissible && !this.disabled && !this.isDismissing) {\n      this.isDismissing = true;\n\n      // Simulate animation duration\n      setTimeout(() => {\n        this.bhDismiss.emit();\n        this.isDismissing = false;\n      }, 200);\n    }\n  };\n\n  render() {\n    const classes = {\n      'tag': true,\n      [`tag-${this.size}`]: true,\n      [`tag-${this.variant}`]: true,\n      'tag-dismissible': this.dismissible,\n      'tag-disabled': this.disabled,\n      'animate-dismiss': this.isDismissing,\n    };\n\n    const labelStyle = {\n      maxWidth: `${this.maxWidth}px`,\n    };\n\n    return (\n      <span class={classes}>\n        <div class=\"tag-content\">\n          {/* Avatar variant */}\n          {this.variant === 'avatar' && (\n            <bh-avatar size=\"xxs\" type={this.avatarSrc ? 'image' : 'placeholder'} imageSrc={this.avatarSrc}></bh-avatar>\n          )}\n\n          {/* Label */}\n          <span class=\"tag-label-wrapper\">\n            <span class=\"tag-label\" style={labelStyle}>\n              {this.label}\n            </span>\n          </span>\n        </div>\n\n        {/* Dismiss button (if dismissible) */}\n        {this.dismissible && (\n          <button\n            class=\"tag-dismiss\"\n            onClick={this.handleDismiss}\n            disabled={this.disabled}\n            type=\"button\"\n            aria-label=\"Dismiss\"\n          >\n            <span class=\"material-symbols-outlined tag-dismiss-icon\">\n              close\n            </span>\n          </button>\n        )}\n      </span>\n    );\n  }\n}\n"],"version":3}