@krollins/blueprint 0.1.12 → 0.1.13

package/dist/components/tooltip.js

@@ -0,0 +1,239 @@
+import { css as d, LitElement as h, html as c } from "lit";
+import { property as r, state as b, customElement as m } from "lit/decorators.js";
+const u = d`
+  /* Base styles */
+  :host {
+    display: inline-block;
+    position: relative;
+  }
+
+  .tooltip-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .tooltip-trigger {
+    display: inline-block;
+  }
+
+  .tooltip-content {
+    position: absolute;
+    z-index: var(--bp-z-tooltip);
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    background-color: var(--bp-color-text);
+    color: var(--bp-color-text-inverse);
+    border-radius: var(--bp-border-radius-sm);
+    font-size: var(--bp-font-size-sm);
+    font-family: var(--bp-font-family);
+    line-height: var(--bp-line-height-tight);
+    max-width: calc(var(--bp-spacing-24) * 3);
+    white-space: normal;
+    box-shadow: var(--bp-shadow-md);
+    pointer-events: none;
+    animation: tooltip-fade-in var(--bp-transition-fast);
+  }
+
+  @keyframes tooltip-fade-in {
+    from {
+      opacity: 0;
+      scale: 0.95;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  /* Placement variants */
+  .tooltip-content--top {
+    bottom: calc(100% + var(--bp-spacing-xs));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .tooltip-content--top::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: var(--bp-spacing-sm);
+    border-style: solid;
+    border-color: var(--bp-color-text) transparent transparent transparent;
+  }
+
+  .tooltip-content--bottom {
+    top: calc(100% + var(--bp-spacing-xs));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .tooltip-content--bottom::after {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: var(--bp-spacing-sm);
+    border-style: solid;
+    border-color: transparent transparent var(--bp-color-text) transparent;
+  }
+
+  .tooltip-content--left {
+    right: calc(100% + var(--bp-spacing-xs));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .tooltip-content--left::after {
+    content: '';
+    position: absolute;
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: var(--bp-spacing-sm);
+    border-style: solid;
+    border-color: transparent transparent transparent var(--bp-color-text);
+  }
+
+  .tooltip-content--right {
+    left: calc(100% + var(--bp-spacing-xs));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .tooltip-content--right::after {
+    content: '';
+    position: absolute;
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: var(--bp-spacing-sm);
+    border-style: solid;
+    border-color: transparent var(--bp-color-text) transparent transparent;
+  }
+
+  /* States */
+  :host([disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (p, i, n, s) => {
+  for (var e = s > 1 ? void 0 : s ? f(i, n) : i, a = p.length - 1, l; a >= 0; a--)
+    (l = p[a]) && (e = (s ? l(i, n, e) : l(e)) || e);
+  return s && e && v(i, n, e), e;
+};
+let t = class extends h {
+  constructor() {
+    super(), this.isVisible = !1, this.showTimeout = null, this.hideTimeout = null, this.tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`, this.content = "", this.placement = "top", this.disabled = !1, this.delay = 200;
+  }
+  handleMouseEnter() {
+    this.disabled || (this.clearTimeouts(), this.showTimeout = window.setTimeout(() => {
+      this.isVisible = !0, this.dispatchEvent(
+        new CustomEvent("bp-show", {
+          detail: {
+            placement: this.placement,
+            content: this.content
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, this.delay));
+  }
+  handleMouseLeave() {
+    this.clearTimeouts(), this.hideTimeout = window.setTimeout(() => {
+      this.isVisible = !1, this.dispatchEvent(
+        new CustomEvent("bp-hide", {
+          detail: {
+            placement: this.placement,
+            content: this.content
+          },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, 100);
+  }
+  handleFocus() {
+    this.disabled || (this.isVisible = !0, this.dispatchEvent(
+      new CustomEvent("bp-show", {
+        detail: {
+          placement: this.placement,
+          content: this.content
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  handleBlur() {
+    this.isVisible = !1, this.dispatchEvent(
+      new CustomEvent("bp-hide", {
+        detail: {
+          placement: this.placement,
+          content: this.content
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  clearTimeouts() {
+    this.showTimeout !== null && (window.clearTimeout(this.showTimeout), this.showTimeout = null), this.hideTimeout !== null && (window.clearTimeout(this.hideTimeout), this.hideTimeout = null);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.clearTimeouts();
+  }
+  render() {
+    return c`
+      <div
+        class="tooltip-wrapper"
+        aria-describedby=${this.isVisible ? this.tooltipId : ""}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        <div class="tooltip-trigger" part="trigger">
+          <slot></slot>
+        </div>
+        ${this.isVisible && !this.disabled ? c`
+              <div
+                id=${this.tooltipId}
+                class="tooltip-content tooltip-content--${this.placement}"
+                part="content"
+                role="tooltip"
+                aria-hidden="false"
+              >
+                ${this.content}
+              </div>
+            ` : null}
+      </div>
+    `;
+  }
+};
+t.styles = [u];
+o([
+  r({ type: String })
+], t.prototype, "content", 2);
+o([
+  r({ type: String })
+], t.prototype, "placement", 2);
+o([
+  r({ type: Boolean })
+], t.prototype, "disabled", 2);
+o([
+  r({ type: Number })
+], t.prototype, "delay", 2);
+o([
+  b()
+], t.prototype, "isVisible", 2);
+t = o([
+  m("bp-tooltip")
+], t);
+export {
+  t as BpTooltip
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/components/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../source/components/tooltip/tooltip.style.ts","../../source/components/tooltip/tooltip.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const tooltipStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n    position: relative;\n  }\n\n  .tooltip-wrapper {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tooltip-trigger {\n    display: inline-block;\n  }\n\n  .tooltip-content {\n    position: absolute;\n    z-index: var(--bp-z-tooltip);\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    background-color: var(--bp-color-text);\n    color: var(--bp-color-text-inverse);\n    border-radius: var(--bp-border-radius-sm);\n    font-size: var(--bp-font-size-sm);\n    font-family: var(--bp-font-family);\n    line-height: var(--bp-line-height-tight);\n    max-width: calc(var(--bp-spacing-24) * 3);\n    white-space: normal;\n    box-shadow: var(--bp-shadow-md);\n    pointer-events: none;\n    animation: tooltip-fade-in var(--bp-transition-fast);\n  }\n\n  @keyframes tooltip-fade-in {\n    from {\n      opacity: 0;\n      scale: 0.95;\n    }\n    to {\n      opacity: 1;\n      scale: 1;\n    }\n  }\n\n  /* Placement variants */\n  .tooltip-content--top {\n    bottom: calc(100% + var(--bp-spacing-xs));\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .tooltip-content--top::after {\n    content: '';\n    position: absolute;\n    top: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border-width: var(--bp-spacing-sm);\n    border-style: solid;\n    border-color: var(--bp-color-text) transparent transparent transparent;\n  }\n\n  .tooltip-content--bottom {\n    top: calc(100% + var(--bp-spacing-xs));\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .tooltip-content--bottom::after {\n    content: '';\n    position: absolute;\n    bottom: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n    border-width: var(--bp-spacing-sm);\n    border-style: solid;\n    border-color: transparent transparent var(--bp-color-text) transparent;\n  }\n\n  .tooltip-content--left {\n    right: calc(100% + var(--bp-spacing-xs));\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .tooltip-content--left::after {\n    content: '';\n    position: absolute;\n    left: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    border-width: var(--bp-spacing-sm);\n    border-style: solid;\n    border-color: transparent transparent transparent var(--bp-color-text);\n  }\n\n  .tooltip-content--right {\n    left: calc(100% + var(--bp-spacing-xs));\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .tooltip-content--right::after {\n    content: '';\n    position: absolute;\n    right: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    border-width: var(--bp-spacing-sm);\n    border-style: solid;\n    border-color: transparent var(--bp-color-text) transparent transparent;\n  }\n\n  /* States */\n  :host([disabled]) {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { tooltipStyles } from './tooltip.style.js';\n\nexport type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\n/**\n * A tooltip component that displays contextual information on hover or focus.\n *\n * @slot - The trigger element that shows the tooltip on hover/focus\n *\n * @cssprop --bp-tooltip-max-width - Maximum width of the tooltip content\n *\n * @fires bp-show - Fired when tooltip becomes visible\n * @fires bp-hide - Fired when tooltip becomes hidden\n */\n@customElement('bp-tooltip')\nexport class BpTooltip extends LitElement {\n  /**\n   * The text content to display in the tooltip\n   */\n  @property({ type: String }) declare content: string;\n\n  /**\n   * Placement of the tooltip relative to the trigger\n   */\n  @property({ type: String }) declare placement: TooltipPlacement;\n\n  /**\n   * Whether the tooltip is disabled\n   */\n  @property({ type: Boolean }) declare disabled: boolean;\n\n  /**\n   * Delay in milliseconds before showing the tooltip\n   */\n  @property({ type: Number }) declare delay: number;\n\n  /**\n   * Internal state tracking whether tooltip is visible\n   */\n  @state() private isVisible = false;\n\n  private showTimeout: number | null = null;\n  private hideTimeout: number | null = null;\n  private tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;\n\n  static styles = [tooltipStyles];\n\n  constructor() {\n    super();\n    this.content = '';\n    this.placement = 'top';\n    this.disabled = false;\n    this.delay = 200;\n  }\n\n  private handleMouseEnter() {\n    if (this.disabled) return;\n\n    this.clearTimeouts();\n    this.showTimeout = window.setTimeout(() => {\n      this.isVisible = true;\n      this.dispatchEvent(\n        new CustomEvent('bp-show', {\n          detail: {\n            placement: this.placement,\n            content: this.content,\n          },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }, this.delay);\n  }\n\n  private handleMouseLeave() {\n    this.clearTimeouts();\n    this.hideTimeout = window.setTimeout(() => {\n      this.isVisible = false;\n      this.dispatchEvent(\n        new CustomEvent('bp-hide', {\n          detail: {\n            placement: this.placement,\n            content: this.content,\n          },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    }, 100);\n  }\n\n  private handleFocus() {\n    if (this.disabled) return;\n    this.isVisible = true;\n    this.dispatchEvent(\n      new CustomEvent('bp-show', {\n        detail: {\n          placement: this.placement,\n          content: this.content,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleBlur() {\n    this.isVisible = false;\n    this.dispatchEvent(\n      new CustomEvent('bp-hide', {\n        detail: {\n          placement: this.placement,\n          content: this.content,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private clearTimeouts() {\n    if (this.showTimeout !== null) {\n      window.clearTimeout(this.showTimeout);\n      this.showTimeout = null;\n    }\n    if (this.hideTimeout !== null) {\n      window.clearTimeout(this.hideTimeout);\n      this.hideTimeout = null;\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.clearTimeouts();\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"tooltip-wrapper\"\n        aria-describedby=${this.isVisible ? this.tooltipId : ''}\n        @mouseenter=${this.handleMouseEnter}\n        @mouseleave=${this.handleMouseLeave}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n      >\n        <div class=\"tooltip-trigger\" part=\"trigger\">\n          <slot></slot>\n        </div>\n        ${this.isVisible && !this.disabled\n          ? html`\n              <div\n                id=${this.tooltipId}\n                class=\"tooltip-content tooltip-content--${this.placement}\"\n                part=\"content\"\n                role=\"tooltip\"\n                aria-hidden=\"false\"\n              >\n                ${this.content}\n              </div>\n            `\n          : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-tooltip': BpTooltip;\n  }\n}\n"],"names":["tooltipStyles","css","BpTooltip","LitElement","html","__decorateClass","property","state","customElement"],"mappings":"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"}