@uibit/hotspot 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 UIBit Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+# Hotspot
+
+[Interactive Demonstration](https://rawlings.github.io/uibit/components/hotspot)
+
+Hotspot enables interactive image exploration by overlaying contextual annotations on top of specific regions of an image. It transforms static diagrams, product mockups, and photographs into interactive guides that reveal rich details on demand, reducing clutter.
+
+## Value Delivery
+
+- **Contextual Annotation** – Deliver additional information or media exactly where it applies on the image.
+- **Improved Information Hierarchy** – Keeps interface layouts clean by hiding supplementary text until requested.
+- **Responsive Alignment** – Ensures annotations remain accurately positioned on key regions regardless of screen size or scaling.
+- **Intuitive Discovery** – Uses subtle visual indicators to invite user interaction and exploration.
+
+## Ideal Applications
+
+- **Product Feature Showcases** – Highlighting materials, technologies, or specifications directly on product images.
+- **Interactive Diagrams** – Explaining technical parts, flowcharts, or system architectures.
+- **Virtual Tours** – Adding details to architectural layouts or real estate listings.
+
+## Further Information
+
+Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.
+
+
+## Changelog
+
+Please see the [Changelog](CHANGELOG.md) for version history.

package/custom-elements.json

@@ -0,0 +1,390 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/hotspot.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Interactive hotspot annotations for images. Display contextual tooltip\ncards on click or hover with custom content overlays and animations.",
+          "name": "Hotspot",
+          "cssProperties": [
+            {
+              "description": "Width and height of the trigger button",
+              "name": "--uibit-hotspot-trigger-size",
+              "default": "2rem"
+            },
+            {
+              "description": "Background color of the trigger button",
+              "name": "--uibit-hotspot-trigger-bg",
+              "default": "rgba(0,0,0,0.65)"
+            },
+            {
+              "description": "Background color of the trigger on hover/active",
+              "name": "--uibit-hotspot-trigger-bg-hover",
+              "default": "rgba(0,0,0,0.9)"
+            },
+            {
+              "description": "Border of the trigger button",
+              "name": "--uibit-hotspot-trigger-border",
+              "default": "0.125rem solid #ffffff"
+            },
+            {
+              "description": "Icon color inside the trigger button",
+              "name": "--uibit-hotspot-trigger-color",
+              "default": "#ffffff"
+            },
+            {
+              "description": "Background of the popover card",
+              "name": "--uibit-hotspot-popover-bg",
+              "default": "rgba(255,255,255,0.96)"
+            },
+            {
+              "description": "Primary text color inside the popover",
+              "name": "--uibit-hotspot-popover-color",
+              "default": "#111827"
+            },
+            {
+              "description": "Secondary content text color inside the popover",
+              "name": "--uibit-hotspot-popover-content-color",
+              "default": "#4b5563"
+            },
+            {
+              "description": "Border radius of the popover card",
+              "name": "--uibit-hotspot-popover-border-radius",
+              "default": "0.75rem"
+            },
+            {
+              "description": "Box shadow of the popover card",
+              "name": "--uibit-hotspot-popover-shadow",
+              "default": "0 0.625rem 1.5rem rgba(0,0,0,0.1)"
+            },
+            {
+              "description": "Border of the popover card",
+              "name": "--uibit-hotspot-popover-border",
+              "default": "0.0625rem solid rgba(0,0,0,0.08)"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The root container wrapping image and all hotspots",
+              "name": "container"
+            },
+            {
+              "description": "The positioning wrapper for each hotspot",
+              "name": "wrapper"
+            },
+            {
+              "description": "The circular trigger button",
+              "name": "trigger"
+            },
+            {
+              "description": "Added to the trigger when the popover is open",
+              "name": "trigger-active"
+            },
+            {
+              "description": "The popover card",
+              "name": "popover"
+            },
+            {
+              "description": "The content area inside the popover",
+              "name": "popover-content"
+            },
+            {
+              "description": "The close button inside the popover",
+              "name": "popover-close"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for the background image or content",
+              "name": ""
+            },
+            {
+              "description": "Custom content for the popover of a specific hotspot (by id)",
+              "name": "popover-{id}"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "hotspots",
+              "type": {
+                "text": "HotspotItem[]"
+              },
+              "default": "[]",
+              "description": "Array of hotspot items. Each item requires `id`, `x` (%), `y` (%), `label`, and optionally `title` and `content`.",
+              "attribute": "hotspots"
+            },
+            {
+              "kind": "field",
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "When `false`, hotspots are rendered but not clickable or hoverable.",
+              "attribute": "interactive"
+            },
+            {
+              "kind": "field",
+              "name": "trigger",
+              "type": {
+                "text": "'click' | 'hover'"
+              },
+              "default": "'click'",
+              "description": "Interaction mode for showing the popover.",
+              "attribute": "trigger"
+            },
+            {
+              "kind": "field",
+              "name": "activeHotspotId",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "hoverTimeout",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleDocumentKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleDocumentClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleTriggerClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "spot",
+                  "type": {
+                    "text": "HotspotItem"
+                  }
+                },
+                {
+                  "name": "spotId",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleTriggerMouseEnter",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "spotId",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleTriggerMouseLeave",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handlePopoverMouseEnter",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handlePopoverMouseLeave",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "scheduleClose",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "clearHoverTimeout",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "closePopover",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onHotspotClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "spot",
+                  "type": {
+                    "text": "HotspotItem"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "HotspotItem"
+              },
+              "description": "Fired when a hotspot trigger is activated",
+              "name": "hotspot-click"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "hotspots",
+              "type": {
+                "text": "HotspotItem[]"
+              },
+              "default": "[]",
+              "description": "Array of hotspot items. Each item requires `id`, `x` (%), `y` (%), `label`, and optionally `title` and `content`.",
+              "fieldName": "hotspots"
+            },
+            {
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "When `false`, hotspots are rendered but not clickable or hoverable.",
+              "fieldName": "interactive"
+            },
+            {
+              "name": "trigger",
+              "type": {
+                "text": "'click' | 'hover'"
+              },
+              "default": "'click'",
+              "description": "Interaction mode for showing the popover.",
+              "fieldName": "trigger"
+            }
+          ],
+          "superclass": {
+            "name": "UIBitElement",
+            "package": "@uibit/core"
+          },
+          "tagName": "uibit-hotspot",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Hotspot",
+          "declaration": {
+            "name": "Hotspot",
+            "module": "src/hotspot.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "uibit-hotspot",
+          "declaration": {
+            "name": "Hotspot",
+            "module": "src/hotspot.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Hotspot",
+            "module": "src/hotspot.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "default",
+            "module": "./hotspot"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Hotspot",
+          "declaration": {
+            "name": "Hotspot",
+            "module": "./hotspot"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HotspotItem",
+          "declaration": {
+            "name": "HotspotItem",
+            "module": "./types"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "HotspotConfig",
+          "declaration": {
+            "name": "HotspotConfig",
+            "module": "./types"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css` :host { display: block; position: relative; width: 100%; --uibit-hotspot-trigger-size: 1.75rem; --uibit-hotspot-trigger-bg: #ffffff; --uibit-hotspot-trigger-bg-hover: #f3f4f6; --uibit-hotspot-trigger-border: 0.0625rem solid #e5e7eb; --uibit-hotspot-trigger-color: #111827; --uibit-hotspot-popover-bg: rgba(255, 255, 255, 0.96); --uibit-hotspot-popover-color: #111827; --uibit-hotspot-popover-content-color: #4b5563; --uibit-hotspot-popover-border-radius: 0.5rem; --uibit-hotspot-popover-border: 0.0625rem solid #e5e7eb; --uibit-hotspot-popover-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04); } .hotspot-container { position: relative; width: 100%; } .hotspot-wrapper { position: absolute; transform: translate(-50%, -50%); z-index: 10; } .hotspot-trigger { width: var(--uibit-hotspot-trigger-size, 1.75rem); height: var(--uibit-hotspot-trigger-size, 1.75rem); background: var(--uibit-hotspot-trigger-bg, #ffffff); border: var(--uibit-hotspot-trigger-border, 0.0625rem solid #e5e7eb); border-radius: 9999rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: none; position: relative; transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease; outline: none; padding: 0; } .hotspot-trigger::before { content: ''; position: absolute; inset: -0.0625rem; border-radius: 9999rem; border: 0.0625rem solid var(--uibit-hotspot-trigger-border-color-actual, #e5e7eb); background: transparent; animation: pulse 2.5s ease-out infinite; z-index: -1; opacity: 0; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.8; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } } .hotspot-trigger:hover, .hotspot-trigger.active { background: var(--uibit-hotspot-trigger-bg-hover, #f3f4f6); border-color: #d1d5db; transform: scale(1.06); } .hotspot-trigger:active { transform: scale(0.95); } .hotspot-trigger:focus-visible { outline: 0.125rem solid #000000; outline-offset: 0.125rem; } .hotspot-trigger svg { width: 0.875rem; height: 0.875rem; color: var(--uibit-hotspot-trigger-color, #111827); pointer-events: none; } .hotspot-popover { position: absolute; width: 15rem; background: var(--uibit-hotspot-popover-bg, rgba(255, 255, 255, 0.96)); backdrop-filter: blur(0.75rem); -webkit-backdrop-filter: blur(0.75rem); color: var(--uibit-hotspot-popover-color, #111827); padding: 0.875rem 1rem; border-radius: var(--uibit-hotspot-popover-border-radius, 0.75rem); box-shadow: var( --uibit-hotspot-popover-shadow, 0 0.625rem 1.5rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.06) ); border: var(--uibit-hotspot-popover-border, 0.0625rem solid rgba(0, 0, 0, 0.08)); z-index: 20; display: flex; flex-direction: column; animation: fadeIn 200ms ease; } @keyframes fadeIn { from { opacity: 0; transform: translate(-50%, 0.5rem); } to { opacity: 1; transform: translate(-50%, 0); } } .hotspot-popover.position-above { bottom: 1.5rem; left: 50%; transform: translateX(-50%); } .hotspot-popover.position-below { top: 1.5rem; left: 50%; transform: translateX(-50%); } .hotspot-popover::after { content: ''; position: absolute; border-style: solid; left: 50%; transform: translateX(-50%); } .hotspot-popover.position-above::after { top: 100%; border-width: 0.375rem 0.375rem 0 0.375rem; border-color: var(--uibit-hotspot-popover-bg, rgba(255, 255, 255, 0.96)) transparent transparent transparent; } .hotspot-popover.position-below::after { bottom: 100%; border-width: 0 0.375rem 0.375rem 0.375rem; border-color: transparent transparent var(--uibit-hotspot-popover-bg, rgba(255, 255, 255, 0.96)) transparent; } .popover-content h3 { margin: 0 0 0.375rem 0; font-size: var(--uibit-font-size-base, 0.9375rem); font-weight: var(--uibit-font-weight-semibold, 600); letter-spacing: var(--uibit-letter-spacing-tight, -0.01em); color: var(--uibit-hotspot-popover-color, #111827); } .popover-content p { margin: 0; font-size: var(--uibit-font-size-sm, 0.8125rem); line-height: var(--uibit-line-height-relaxed, 1.625); color: var(--uibit-hotspot-popover-content-color, #4b5563); } .popover-close { position: absolute; top: 0.5rem; right: 0.5rem; background: transparent; border: none; color: #9ca3af; cursor: pointer; width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; border-radius: 9999rem; transition: background-color 150ms ease, color 150ms ease, transform 150ms ease; } .popover-close:hover { background-color: #f3f4f6; color: #111827; } .popover-close:active { transform: scale(0.92); } .popover-close:focus-visible { outline: 0.125rem solid #000000; outline-offset: 0.125rem; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

package/dist/frameworks/angular/index.ts

@@ -0,0 +1,39 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output, booleanAttribute } from '@angular/core';
+import '@uibit/hotspot';
+import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
+import type { HotspotItem } from '@uibit/hotspot';
+
+@Component({
+  selector: 'uibit-hotspot',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  host: {
+    '(hotspot-click)': 'hotspotClick.emit($event)'
+  }
+})
+export class NgxHotspot {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.hotspots = this.hotspots();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.interactive = this.interactive();
+      }
+    });
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.trigger = this.trigger();
+      }
+    });
+  }
+
+  readonly hotspots = input<HotspotItem[], any>([]);
+  readonly interactive = input<boolean, any>(true, { transform: booleanAttribute });
+  readonly trigger = input<'click' | 'hover', any>('click');
+
+  readonly hotspotClick = output<CustomEvent<HotspotItem>>();
+}

package/dist/frameworks/astro/index.d.ts

@@ -0,0 +1,10 @@
+import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
+import '@uibit/hotspot';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-hotspot': Partial<HTMLElementClass> & astroHTML.JSX.HTMLAttributes;
+    }
+  }
+}

package/dist/frameworks/nuxt/index.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin } from '#app';
+
+export default defineNuxtPlugin(() => {
+  if (process.client) {
+    import('@uibit/hotspot');
+  }
+});

package/dist/frameworks/preact/index.d.ts

@@ -0,0 +1,16 @@
+import type { JSX } from 'preact';
+import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
+import '@uibit/hotspot';
+import type { HotspotItem } from '@uibit/hotspot';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-hotspot': JSX.HTMLAttributes<HTMLElementClass> & {
+      hotspots?: HotspotItem[];
+      interactive?: boolean;
+      trigger?: 'click' | 'hover';
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

@@ -0,0 +1,10 @@
+import { component$, Slot } from '@builder.io/qwik';
+import '@uibit/hotspot';
+
+export const Hotspot = component$<any>((props) => {
+  return (
+    <uibit-hotspot {...props}>
+      <Slot />
+    </uibit-hotspot>
+  );
+});

package/dist/frameworks/react/index.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
+import '@uibit/hotspot';
+import type { HotspotItem } from '@uibit/hotspot';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-hotspot': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      hotspots?: HotspotItem[];
+      interactive?: boolean;
+      trigger?: 'click' | 'hover';
+      onHotspotClick?: (event: any) => void;
+        };
+      }
+    }
+  }
+}

package/dist/frameworks/solid/index.d.ts

@@ -0,0 +1,17 @@
+import type { JSX } from 'solid-js';
+import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
+import '@uibit/hotspot';
+import type { HotspotItem } from '@uibit/hotspot';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-hotspot': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              hotspots?: HotspotItem[];
+      interactive?: boolean;
+      trigger?: 'click' | 'hover';
+      "on:hotspot-click"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

package/dist/frameworks/stencil/index.d.ts

@@ -0,0 +1,15 @@
+import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
+import '@uibit/hotspot';
+import type { HotspotItem } from '@uibit/hotspot';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-hotspot': HTMLElementClass & {
+    hotspots?: HotspotItem[];
+    interactive?: boolean;
+    trigger?: 'click' | 'hover';
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import '@uibit/hotspot';
+  import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
+  import type { HotspotItem } from '@uibit/hotspot';
+  
+  let {
+    hotspots = undefined,
+      interactive = undefined,
+      trigger = undefined,
+      popover-{id} = undefined,
+      children
+  } = $props<{
+    children?: any;
+    hotspots?: HotspotItem[];
+    interactive?: boolean;
+    trigger?: 'click' | 'hover';
+    popover-{id}?: import('svelte').Snippet;
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && hotspots !== undefined) {
+      elementRef.hotspots = hotspots;
+    }
+    if (elementRef && interactive !== undefined) {
+      elementRef.interactive = interactive;
+    }
+    if (elementRef && trigger !== undefined) {
+      elementRef.trigger = trigger;
+    }
+  });
+  
+</script>
+
+<uibit-hotspot bind:this={elementRef} {...$$restProps}>
+  {#if popover-{id}}
+    <div slot="popover-{id}">
+      {@render popover-{id}()}
+    </div>
+  {/if}
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-hotspot>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,27 @@
+import { defineComponent, h } from 'vue';
+import type { Hotspot as HTMLElementClass } from '@uibit/hotspot';
+import '@uibit/hotspot';
+import type { HotspotItem } from '@uibit/hotspot';
+
+export const Hotspot = defineComponent({
+  name: 'Hotspot',
+  props: {
+    hotspots: { type: [String, Number, Boolean, Array, Object] as any },
+    interactive: { type: [String, Number, Boolean, Array, Object] as any },
+    trigger: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: ['hotspot-click'],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+      eventListeners['onHotspot-click'] = (event: Event) => {
+        emit('hotspot-click', event);
+      };
+
+      return h('uibit-hotspot', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/hotspot.d.ts

@@ -0,0 +1,58 @@
+import { UIBitElement } from '@uibit/core';
+import type { HotspotItem } from './types';
+/**
+ * Interactive hotspot annotations for images. Display contextual tooltip
+ * cards on click or hover with custom content overlays and animations.
+ *
+ * @fires {HotspotItem} hotspot-click - Fired when a hotspot trigger is activated
+ *
+ * @slot - Default slot for the background image or content
+ * @slot popover-{id} - Custom content for the popover of a specific hotspot (by id)
+ *
+ * @cssprop [--uibit-hotspot-trigger-size=2rem] - Width and height of the trigger button
+ * @cssprop [--uibit-hotspot-trigger-bg=rgba(0,0,0,0.65)] - Background color of the trigger button
+ * @cssprop [--uibit-hotspot-trigger-bg-hover=rgba(0,0,0,0.9)] - Background color of the trigger on hover/active
+ * @cssprop [--uibit-hotspot-trigger-border=0.125rem solid #ffffff] - Border of the trigger button
+ * @cssprop [--uibit-hotspot-trigger-color=#ffffff] - Icon color inside the trigger button
+ * @cssprop [--uibit-hotspot-popover-bg=rgba(255,255,255,0.96)] - Background of the popover card
+ * @cssprop [--uibit-hotspot-popover-color=#111827] - Primary text color inside the popover
+ * @cssprop [--uibit-hotspot-popover-content-color=#4b5563] - Secondary content text color inside the popover
+ * @cssprop [--uibit-hotspot-popover-border-radius=0.75rem] - Border radius of the popover card
+ * @cssprop [--uibit-hotspot-popover-shadow=0 0.625rem 1.5rem rgba(0,0,0,0.1)] - Box shadow of the popover card
+ * @cssprop [--uibit-hotspot-popover-border=0.0625rem solid rgba(0,0,0,0.08)] - Border of the popover card
+ *
+ * @csspart container - The root container wrapping image and all hotspots
+ * @csspart wrapper - The positioning wrapper for each hotspot
+ * @csspart trigger - The circular trigger button
+ * @csspart trigger-active - Added to the trigger when the popover is open
+ * @csspart popover - The popover card
+ * @csspart popover-content - The content area inside the popover
+ * @csspart popover-close - The close button inside the popover
+ */
+export declare class Hotspot extends UIBitElement {
+    static styles: import("lit").CSSResult;
+    /** Array of hotspot items. Each item requires `id`, `x` (%), `y` (%), `label`, and optionally `title` and `content`. */
+    hotspots: HotspotItem[];
+    /** When `false`, hotspots are rendered but not clickable or hoverable. */
+    interactive: boolean;
+    /** Interaction mode for showing the popover. */
+    trigger: 'click' | 'hover';
+    private activeHotspotId;
+    private hoverTimeout?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleDocumentKeyDown;
+    private handleDocumentClick;
+    private handleTriggerClick;
+    private handleTriggerMouseEnter;
+    private handleTriggerMouseLeave;
+    private handlePopoverMouseEnter;
+    private handlePopoverMouseLeave;
+    private scheduleClose;
+    private clearHoverTimeout;
+    private closePopover;
+    private onHotspotClick;
+    render(): import("lit").TemplateResult<1>;
+}
+export default Hotspot;
+//# sourceMappingURL=hotspot.d.ts.map

package/dist/hotspot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotspot.d.ts","sourceRoot":"","sources":["../src/hotspot.ts"],"names":[],"mappings":"AACA,OAAO,EAA2C,YAAY,EAAE,MAAM,aAAa,CAAC;AAGpF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,OAAQ,SAAQ,YAAY;IACvC,MAAM,CAAC,MAAM,0BAAU;IAEvB,wHAAwH;IAC7F,QAAQ,EAAE,WAAW,EAAE,CAAM;IACxD,0EAA0E;IAC7C,WAAW,UAAQ;IAChD,gDAAgD;IACpB,OAAO,EAAE,OAAO,GAAG,OAAO,CAAW;IAExD,OAAO,CAAC,eAAe,CAAuB;IAEvD,OAAO,CAAC,YAAY,CAAC,CAAS;IAE9B,iBAAiB,SAIhB;IAED,oBAAoB,SAKnB;IAED,OAAO,CAAC,qBAAqB,CAI3B;IAEF,OAAO,CAAC,mBAAmB,CAMzB;IAEF,OAAO,CAAC,kBAAkB;IAe1B,OAAO,CAAC,uBAAuB;IAM/B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,cAAc;IAItB,MAAM,oCA+DL;CACF;eAEc,OAAO"}

package/dist/hotspot.js

@@ -0,0 +1,209 @@
+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 { html } from 'lit';
+import { customElement, fromLucide, getIcon, msg, UIBitElement } from '@uibit/core';
+import { Plus, X } from 'lucide';
+import { property, state } from 'lit/decorators.js';
+import { styles } from './styles';
+/**
+ * Interactive hotspot annotations for images. Display contextual tooltip
+ * cards on click or hover with custom content overlays and animations.
+ *
+ * @fires {HotspotItem} hotspot-click - Fired when a hotspot trigger is activated
+ *
+ * @slot - Default slot for the background image or content
+ * @slot popover-{id} - Custom content for the popover of a specific hotspot (by id)
+ *
+ * @cssprop [--uibit-hotspot-trigger-size=2rem] - Width and height of the trigger button
+ * @cssprop [--uibit-hotspot-trigger-bg=rgba(0,0,0,0.65)] - Background color of the trigger button
+ * @cssprop [--uibit-hotspot-trigger-bg-hover=rgba(0,0,0,0.9)] - Background color of the trigger on hover/active
+ * @cssprop [--uibit-hotspot-trigger-border=0.125rem solid #ffffff] - Border of the trigger button
+ * @cssprop [--uibit-hotspot-trigger-color=#ffffff] - Icon color inside the trigger button
+ * @cssprop [--uibit-hotspot-popover-bg=rgba(255,255,255,0.96)] - Background of the popover card
+ * @cssprop [--uibit-hotspot-popover-color=#111827] - Primary text color inside the popover
+ * @cssprop [--uibit-hotspot-popover-content-color=#4b5563] - Secondary content text color inside the popover
+ * @cssprop [--uibit-hotspot-popover-border-radius=0.75rem] - Border radius of the popover card
+ * @cssprop [--uibit-hotspot-popover-shadow=0 0.625rem 1.5rem rgba(0,0,0,0.1)] - Box shadow of the popover card
+ * @cssprop [--uibit-hotspot-popover-border=0.0625rem solid rgba(0,0,0,0.08)] - Border of the popover card
+ *
+ * @csspart container - The root container wrapping image and all hotspots
+ * @csspart wrapper - The positioning wrapper for each hotspot
+ * @csspart trigger - The circular trigger button
+ * @csspart trigger-active - Added to the trigger when the popover is open
+ * @csspart popover - The popover card
+ * @csspart popover-content - The content area inside the popover
+ * @csspart popover-close - The close button inside the popover
+ */
+let Hotspot = class Hotspot extends UIBitElement {
+    constructor() {
+        super(...arguments);
+        /** Array of hotspot items. Each item requires `id`, `x` (%), `y` (%), `label`, and optionally `title` and `content`. */
+        this.hotspots = [];
+        /** When `false`, hotspots are rendered but not clickable or hoverable. */
+        this.interactive = true;
+        /** Interaction mode for showing the popover. */
+        this.trigger = 'click';
+        this.activeHotspotId = null;
+        this.handleDocumentKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                this.closePopover();
+            }
+        };
+        this.handleDocumentClick = (e) => {
+            if (this.trigger !== 'click')
+                return;
+            const path = e.composedPath();
+            if (!path.includes(this)) {
+                this.closePopover();
+            }
+        };
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.listen(document, 'keydown', this.handleDocumentKeyDown);
+        this.listen(document, 'click', this.handleDocumentClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.hoverTimeout) {
+            clearTimeout(this.hoverTimeout);
+        }
+    }
+    handleTriggerClick(spot, spotId, e) {
+        e.stopPropagation();
+        if (!this.interactive)
+            return;
+        if (this.trigger === 'click') {
+            if (this.activeHotspotId === spotId) {
+                this.closePopover();
+            }
+            else {
+                this.activeHotspotId = spotId;
+            }
+        }
+        this.onHotspotClick(spot);
+    }
+    handleTriggerMouseEnter(spotId) {
+        if (!this.interactive || this.trigger !== 'hover')
+            return;
+        this.clearHoverTimeout();
+        this.activeHotspotId = spotId;
+    }
+    handleTriggerMouseLeave() {
+        if (!this.interactive || this.trigger !== 'hover')
+            return;
+        this.scheduleClose();
+    }
+    handlePopoverMouseEnter() {
+        if (!this.interactive || this.trigger !== 'hover')
+            return;
+        this.clearHoverTimeout();
+    }
+    handlePopoverMouseLeave() {
+        if (!this.interactive || this.trigger !== 'hover')
+            return;
+        this.scheduleClose();
+    }
+    scheduleClose() {
+        this.clearHoverTimeout();
+        this.hoverTimeout = window.setTimeout(() => {
+            this.closePopover();
+        }, 200);
+    }
+    clearHoverTimeout() {
+        if (this.hoverTimeout) {
+            clearTimeout(this.hoverTimeout);
+            this.hoverTimeout = undefined;
+        }
+    }
+    closePopover() {
+        this.activeHotspotId = null;
+    }
+    onHotspotClick(spot) {
+        this.dispatchCustomEvent('hotspot-click', spot);
+    }
+    render() {
+        return html `
+      <div part="container" class="hotspot-container">
+        <slot></slot>
+        ${this.hotspots.map((spot, index) => {
+            const spotId = spot.id || String(index);
+            const isOpened = this.activeHotspotId === spotId;
+            const yVal = typeof spot.y === 'number' ? spot.y : parseFloat(String(spot.y || '0'));
+            const positionClass = yVal < 30 ? 'position-below' : 'position-above';
+            const leftStyle = typeof spot.x === 'number' ? `${spot.x}%` : (String(spot.x).endsWith('%') ? spot.x : `${spot.x}%`);
+            const topStyle = typeof spot.y === 'number' ? `${spot.y}%` : (String(spot.y).endsWith('%') ? spot.y : `${spot.y}%`);
+            return html `
+            <div part="wrapper" class="hotspot-wrapper" style="left: ${leftStyle}; top: ${topStyle}">
+              <button
+                part="trigger ${isOpened ? 'trigger-active' : ''}"
+                class="hotspot-trigger ${isOpened ? 'active' : ''}"
+                aria-label="${spot.label || spot.title || msg('Hotspot')}"
+                aria-expanded="${isOpened}"
+                aria-controls="popover-${spotId}"
+                ?disabled=${!this.interactive}
+                @click=${(e) => this.handleTriggerClick(spot, spotId, e)}
+                @mouseenter=${() => this.handleTriggerMouseEnter(spotId)}
+                @mouseleave=${() => this.handleTriggerMouseLeave()}
+              >${isOpened ? getIcon('x', 14, fromLucide(X)) : getIcon('plus', 14, fromLucide(Plus))}</button>
+
+              ${isOpened
+                ? html `
+                    <div
+                      id="popover-${spotId}"
+                      part="popover"
+                      class="hotspot-popover ${positionClass}"
+                      role="dialog"
+                      aria-modal="false"
+                      aria-label="${spot.title || msg('Hotspot details')}"
+                      @mouseenter=${() => this.handlePopoverMouseEnter()}
+                      @mouseleave=${() => this.handlePopoverMouseLeave()}
+                    >
+                      <div part="popover-content" class="popover-content">
+                        <slot name="popover-${spotId}">
+                          ${spot.title ? html `<h3>${spot.title}</h3>` : ''}
+                          ${spot.content ? html `<p>${spot.content}</p>` : ''}
+                        </slot>
+                      </div>
+                      <button
+                        part="popover-close"
+                        class="popover-close"
+                        aria-label=${msg('Close details')}
+                        @click=${(e) => {
+                    e.stopPropagation();
+                    this.closePopover();
+                }}
+                      >${getIcon('x', 14, fromLucide(X))}</button>
+                    </div>
+                  `
+                : ''}
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Array })
+], Hotspot.prototype, "hotspots", void 0);
+__decorate([
+    property({ type: Boolean })
+], Hotspot.prototype, "interactive", void 0);
+__decorate([
+    property({ type: String })
+], Hotspot.prototype, "trigger", void 0);
+__decorate([
+    state()
+], Hotspot.prototype, "activeHotspotId", void 0);
+Hotspot = __decorate([
+    customElement('uibit-hotspot')
+], Hotspot);
+export { Hotspot };
+export default Hotspot;
+//# sourceMappingURL=hotspot.js.map

package/dist/hotspot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotspot.js","sourceRoot":"","sources":["../src/hotspot.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default, Hotspot } from './hotspot';
+export type { HotspotItem, HotspotConfig } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { default, Hotspot } from './hotspot';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA6MlB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,208 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    position: relative;
+    width: 100%;
+    --uibit-hotspot-trigger-size: 1.75rem;
+    --uibit-hotspot-trigger-bg: #ffffff;
+    --uibit-hotspot-trigger-bg-hover: #f3f4f6;
+    --uibit-hotspot-trigger-border: 0.0625rem solid #e5e7eb;
+    --uibit-hotspot-trigger-color: #111827;
+    --uibit-hotspot-popover-bg: rgba(255, 255, 255, 0.96);
+    --uibit-hotspot-popover-color: #111827;
+    --uibit-hotspot-popover-content-color: #4b5563;
+    --uibit-hotspot-popover-border-radius: 0.5rem;
+    --uibit-hotspot-popover-border: 0.0625rem solid #e5e7eb;
+    --uibit-hotspot-popover-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.04);
+  }
+
+  .hotspot-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .hotspot-wrapper {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+  }
+
+  .hotspot-trigger {
+    width: var(--uibit-hotspot-trigger-size, 1.75rem);
+    height: var(--uibit-hotspot-trigger-size, 1.75rem);
+    background: var(--uibit-hotspot-trigger-bg, #ffffff);
+    border: var(--uibit-hotspot-trigger-border, 0.0625rem solid #e5e7eb);
+    border-radius: 9999rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: none;
+    position: relative;
+    transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
+    outline: none;
+    padding: 0;
+  }
+
+  .hotspot-trigger::before {
+    content: '';
+    position: absolute;
+    inset: -0.0625rem;
+    border-radius: 9999rem;
+    border: 0.0625rem solid var(--uibit-hotspot-trigger-border-color-actual, #e5e7eb);
+    background: transparent;
+    animation: pulse 2.5s ease-out infinite;
+    z-index: -1;
+    opacity: 0;
+  }
+
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+      opacity: 0.8;
+    }
+    70% {
+      transform: scale(1.6);
+      opacity: 0;
+    }
+    100% {
+      transform: scale(1.6);
+      opacity: 0;
+    }
+  }
+
+  .hotspot-trigger:hover,
+  .hotspot-trigger.active {
+    background: var(--uibit-hotspot-trigger-bg-hover, #f3f4f6);
+    border-color: #d1d5db;
+    transform: scale(1.06);
+  }
+
+  .hotspot-trigger:active {
+    transform: scale(0.95);
+  }
+
+  .hotspot-trigger:focus-visible {
+    outline: 0.125rem solid #000000;
+    outline-offset: 0.125rem;
+  }
+
+  .hotspot-trigger svg {
+    width: 0.875rem;
+    height: 0.875rem;
+    color: var(--uibit-hotspot-trigger-color, #111827);
+    pointer-events: none;
+  }
+
+  .hotspot-popover {
+    position: absolute;
+    width: 15rem;
+    background: var(--uibit-hotspot-popover-bg, rgba(255, 255, 255, 0.96));
+    backdrop-filter: blur(0.75rem);
+    -webkit-backdrop-filter: blur(0.75rem);
+    color: var(--uibit-hotspot-popover-color, #111827);
+    padding: 0.875rem 1rem;
+    border-radius: var(--uibit-hotspot-popover-border-radius, 0.75rem);
+    box-shadow: var(
+      --uibit-hotspot-popover-shadow,
+      0 0.625rem 1.5rem rgba(0, 0, 0, 0.1),
+      0 0.25rem 0.5rem rgba(0, 0, 0, 0.06)
+    );
+    border: var(--uibit-hotspot-popover-border, 0.0625rem solid rgba(0, 0, 0, 0.08));
+    z-index: 20;
+    display: flex;
+    flex-direction: column;
+    animation: fadeIn 200ms ease;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translate(-50%, 0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, 0);
+    }
+  }
+
+  .hotspot-popover.position-above {
+    bottom: 1.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .hotspot-popover.position-below {
+    top: 1.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .hotspot-popover::after {
+    content: '';
+    position: absolute;
+    border-style: solid;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .hotspot-popover.position-above::after {
+    top: 100%;
+    border-width: 0.375rem 0.375rem 0 0.375rem;
+    border-color: var(--uibit-hotspot-popover-bg, rgba(255, 255, 255, 0.96)) transparent transparent transparent;
+  }
+
+  .hotspot-popover.position-below::after {
+    bottom: 100%;
+    border-width: 0 0.375rem 0.375rem 0.375rem;
+    border-color: transparent transparent var(--uibit-hotspot-popover-bg, rgba(255, 255, 255, 0.96)) transparent;
+  }
+
+  .popover-content h3 {
+    margin: 0 0 0.375rem 0;
+    font-size: var(--uibit-font-size-base, 0.9375rem);
+    font-weight: var(--uibit-font-weight-semibold, 600);
+    letter-spacing: var(--uibit-letter-spacing-tight, -0.01em);
+    color: var(--uibit-hotspot-popover-color, #111827);
+  }
+
+  .popover-content p {
+    margin: 0;
+    font-size: var(--uibit-font-size-sm, 0.8125rem);
+    line-height: var(--uibit-line-height-relaxed, 1.625);
+    color: var(--uibit-hotspot-popover-content-color, #4b5563);
+  }
+
+  .popover-close {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    background: transparent;
+    border: none;
+    color: #9ca3af;
+    cursor: pointer;
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999rem;
+    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
+  }
+
+  .popover-close:hover {
+    background-color: #f3f4f6;
+    color: #111827;
+  }
+
+  .popover-close:active {
+    transform: scale(0.92);
+  }
+
+  .popover-close:focus-visible {
+    outline: 0.125rem solid #000000;
+    outline-offset: 0.125rem;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6MxB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,21 @@
+import type Hotspot from './hotspot';
+export interface HotspotItem {
+    id: string;
+    x: string | number;
+    y: string | number;
+    label: string;
+    title?: string;
+    content?: string;
+    link?: string;
+}
+export interface HotspotConfig {
+    hotspots?: HotspotItem[];
+    interactive?: boolean;
+    showLabels?: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-hotspot': Hotspot;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AAErC,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,eAAe,EAAE,OAAO,CAAC;KAC5B;CACA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@uibit/hotspot",
+  "version": "0.1.0",
+  "description": "Interactive hotspot annotations for images. Display contextual tooltip cards on click or hover with custom content overlays and animations.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./custom-elements.json": "./custom-elements.json",
+    "./react": "./dist/frameworks/react/index.d.ts",
+    "./vue": "./dist/frameworks/vue/index.ts",
+    "./svelte": "./dist/frameworks/svelte/index.svelte",
+    "./angular": "./dist/frameworks/angular/index.ts",
+    "./solid": "./dist/frameworks/solid/index.d.ts",
+    "./astro": "./dist/frameworks/astro/index.astro",
+    "./qwik": "./dist/frameworks/qwik/index.tsx",
+    "./nuxt": "./dist/frameworks/nuxt/index.ts",
+    "./preact": "./dist/frameworks/preact/index.d.ts",
+    "./stencil": "./dist/frameworks/stencil/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "custom-elements.json"
+  ],
+  "keywords": [
+    "hotspot",
+    "interactive",
+    "image-annotation",
+    "web-component",
+    "lit"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/hotspot"
+  },
+  "dependencies": {
+    "lucide": "^1.24.0",
+    "@uibit/core": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.43",
+    "lit": "^3.3.3",
+    "typescript": "7.0.2",
+    "@uibit/codegen": "0.1.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0",
+    "react": ">=18",
+    "vue": ">=3",
+    "svelte": ">=4 || ^5",
+    "@angular/core": ">=14"
+  },
+  "customElements": "custom-elements.json",
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    }
+  },
+  "uibit": {
+    "id": "hotspot",
+    "title": "Hotspot",
+    "category": "Media",
+    "tagName": "uibit-hotspot"
+  },
+  "scripts": {
+    "build": "cem analyze --globs 'src/**/*.ts' --litelement && uibit-codegen --package . && tsc",
+    "dev": "concurrently \"cem analyze --globs 'src/**/*.ts' --litelement --watch\" \"tsc --watch\"",
+    "analyze": "cem analyze --globs 'src/**/*.ts' --litelement",
+    "typecheck": "tsc --noEmit"
+  }
+}