npm - @actabldesign/bellhop-core - Versions diffs - 0.0.4 → 0.0.7 - Mend

@actabldesign/bellhop-core 0.0.4 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (626) hide show

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

@@ -1 +0,0 @@

- {"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}