@uibit/image-reveal 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,22 @@
+# Image X-Ray
+
+[Interactive Demonstration](https://rawlings.github.io/uibit/image-xray)
+
+Image X-Ray is an interactive comparative display component that reveals layers of information beneath a primary image. By rendering a cursor-following circular lens that acts as a window to a secondary, synchronized image, it offers a polished, engaging way to highlight internal craftsmanship, design layers, or material compositions.
+
+## Value Delivery
+
+- **Interactive Comparison** – Prompts user exploration by allowing them to visually peek underneath a primary surface in real-time.
+- **Pixel-Perfect Alignment** – Ensures absolute structural alignment between the base and secondary layers at all viewport sizes.
+- **Responsive Interactions** – Operates smoothly on mouse movement for desktops and supports tactile touch-based drag triggers for mobile screens.
+- **High-Impact Visual Narrative** – Ideal for telling stories of build quality, material composition, or engineering structure without static split diagrams.
+
+## Ideal Applications
+
+- **Product Cutaways** – Showing internal components of consumer electronics, automotive design, or luxury accessories.
+- **Architectural Presentations** – Revealing structural framing, insulation layers, or historical alterations beneath finished walls.
+- **Educational Materials** – Displaying layered anatomical, geological, or historical illustrations.
+
+## Further Information
+
+Detailed design guidelines, customizable attributes, and integration examples are available on our documentation site.

package/custom-elements.json

@@ -0,0 +1,254 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/image-reveal.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Reveals a synchronized secondary \"xray\" image through a circular lens that\nfollows the user's cursor or touch point over the primary image.\n\nPlace the primary image in the default slot and the reveal image in the\n`xray` named slot. Both images are pixel-aligned so the lens shows exactly\nwhat lies beneath the cursor on the xray layer.",
+          "name": "ImageReveal",
+          "cssProperties": [
+            {
+              "description": "Diameter of the circular lens",
+              "name": "--uibit-image-reveal-lens-size",
+              "default": "12rem"
+            },
+            {
+              "description": "Box shadow of the lens ring",
+              "name": "--uibit-image-reveal-lens-shadow",
+              "default": "0 0 0 0.1875rem #ffffff, 0 0.5rem 2rem rgba(0,0,0,0.35)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Primary (outer) image",
+              "name": ""
+            },
+            {
+              "description": "Secondary image revealed through the lens",
+              "name": "xray"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Diameter of the lens in any CSS unit. Overrides the CSS custom property.",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "_x",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_y",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_base",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_lensImg",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_lensSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_updateLens",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "clientX",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "clientY",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_onMouseEnter",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onMouseMove",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onMouseLeave",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onTouchStart",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onTouchMove",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onTouchEnd",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "{ x: number, y: number }"
+              },
+              "description": "Fired as the lens moves; `detail.x` and `detail.y` are percentages",
+              "name": "reveal-move"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Diameter of the lens in any CSS unit. Overrides the CSS custom property.",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "UIBitElement",
+            "package": "@uibit/core"
+          },
+          "tagName": "uibit-image-reveal",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ImageReveal",
+          "declaration": {
+            "name": "ImageReveal",
+            "module": "src/image-reveal.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "uibit-image-reveal",
+          "declaration": {
+            "name": "ImageReveal",
+            "module": "src/image-reveal.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ImageReveal",
+            "module": "src/image-reveal.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "default",
+            "module": "./image-reveal"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ImageReveal",
+          "declaration": {
+            "name": "ImageReveal",
+            "module": "./image-reveal"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/types"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "css` :host { display: block; position: relative; overflow: hidden; cursor: none; -webkit-user-select: none; user-select: none; line-height: 0; } :host([touch]) { cursor: default; } .base { display: block; width: 100%; height: 100%; position: relative; } ::slotted(img), ::slotted(picture) { display: block; width: 100%; height: auto; pointer-events: none; } .xray-slot { position: absolute; inset: 0; pointer-events: none; } .xray-slot ::slotted(img), .xray-slot ::slotted(picture) { display: block; width: 100%; height: 100%; object-fit: cover; } .lens { position: absolute; top: 0; left: 0; border-radius: 50%; overflow: hidden; pointer-events: none; box-shadow: var( --uibit-image-reveal-lens-shadow, 0 0 0 0.0625rem rgba(0, 0, 0, 0.18), 0 0 0 0.1875rem rgba(255, 255, 255, 0.92), 0 0 0 0.25rem rgba(0, 0, 0, 0.1), 0 0.75rem 2.5rem rgba(0, 0, 0, 0.45) ); transform: translate(-50%, -50%); will-change: transform; transition: opacity 0.15s ease; opacity: 0; } :host([active]) .lens { opacity: 1; } .lens-inner { width: 100%; height: 100%; position: relative; overflow: hidden; } .lens-img { position: absolute; pointer-events: none; } `"
+        }
+      ],
+      "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,26 @@
+import { Component, ChangeDetectionStrategy, ElementRef, input, effect, output } from '@angular/core';
+import '@uibit/image-reveal';
+import type { ImageReveal as HTMLElementClass } from '@uibit/image-reveal';
+
+@Component({
+  selector: 'uibit-image-reveal',
+  template: '<ng-content></ng-content>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  host: {
+    '(reveal-move)': 'revealMove.emit($event)'
+  }
+})
+export class NgxImageReveal {
+  constructor(private el: ElementRef<HTMLElementClass>) {
+    effect(() => {
+      if (this.el.nativeElement) {
+        this.el.nativeElement.size = this.size();
+      }
+    });
+  }
+
+  readonly size = input<string, any>('');
+
+  readonly revealMove = output<CustomEvent<{ x: number, y: number }>>();
+}

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

@@ -0,0 +1,10 @@
+import type { ImageReveal as HTMLElementClass } from '@uibit/image-reveal';
+import '@uibit/image-reveal';
+
+declare global {
+  namespace astroHTML.JSX {
+    interface IntrinsicElements {
+      'uibit-image-reveal': 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/image-reveal');
+  }
+});

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

@@ -0,0 +1,13 @@
+import type { JSX } from 'preact';
+import type { ImageReveal as HTMLElementClass } from '@uibit/image-reveal';
+import '@uibit/image-reveal';
+
+declare module 'preact' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-image-reveal': JSX.HTMLAttributes<HTMLElementClass> & {
+      size?: string;
+      };
+    }
+  }
+}

package/dist/frameworks/qwik/index.tsx

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

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

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ClassAttributes } from 'react';
+import type { ImageReveal as HTMLElementClass } from '@uibit/image-reveal';
+import '@uibit/image-reveal';
+
+declare global {
+  namespace React {
+    namespace JSX {
+      interface IntrinsicElements {
+        'uibit-image-reveal': ClassAttributes<HTMLElementClass> & HTMLAttributes<HTMLElementClass> & {
+          children?: React.ReactNode;
+          class?: string;
+      size?: string;
+      onRevealMove?: (event: any) => void;
+        };
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import type { JSX } from 'solid-js';
+import type { ImageReveal as HTMLElementClass } from '@uibit/image-reveal';
+import '@uibit/image-reveal';
+
+declare module 'solid-js' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'uibit-image-reveal': Partial<HTMLElementClass> & JSX.HTMLAttributes<HTMLElementClass> & {
+              size?: string;
+      "on:reveal-move"?: (event: CustomEvent) => void;
+      };
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import type { ImageReveal as HTMLElementClass } from '@uibit/image-reveal';
+import '@uibit/image-reveal';
+
+declare module '@stencil/core' {
+  export namespace JSX {
+    interface IntrinsicElements {
+      'uibit-image-reveal': HTMLElementClass & {
+    size?: string;
+      };
+    }
+  }
+}

package/dist/frameworks/svelte/index.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import '@uibit/image-reveal';
+  import type { ImageReveal as HTMLElementClass } from '@uibit/image-reveal';
+  
+  let {
+    size = undefined,
+      xray = undefined,
+      children
+  } = $props<{
+    children?: any;
+    size?: string;
+    xray?: import('svelte').Snippet;
+  }>();
+  
+  let elementRef: HTMLElementClass | null = $state(null);
+  
+  $effect(() => {
+    if (elementRef && size !== undefined) {
+      elementRef.size = size;
+    }
+  });
+  
+</script>
+
+<uibit-image-reveal bind:this={elementRef} {...$$restProps}>
+  {#if xray}
+    <div slot="xray">
+      {@render xray()}
+    </div>
+  {/if}
+  {#if children}
+    {@render children()}
+  {:else}
+    <slot />
+  {/if}
+</uibit-image-reveal>

package/dist/frameworks/vue/index.ts

@@ -0,0 +1,24 @@
+import { defineComponent, h } from 'vue';
+import type { ImageReveal as HTMLElementClass } from '@uibit/image-reveal';
+import '@uibit/image-reveal';
+
+export const ImageReveal = defineComponent({
+  name: 'ImageReveal',
+  props: {
+    size: { type: [String, Number, Boolean, Array, Object] as any }
+  },
+  emits: ['reveal-move'],
+  setup(props, { slots, emit }) {
+    return () => {
+      const eventListeners: Record<string, any> = {};
+      eventListeners['onReveal-move'] = (event: Event) => {
+        emit('reveal-move', event);
+      };
+
+      return h('uibit-image-reveal', {
+        ...props,
+        ...eventListeners
+      }, slots.default?.());
+    };
+  }
+});

package/dist/image-reveal.d.ts

@@ -0,0 +1,39 @@
+import { UIBitElement } from '@uibit/core';
+/**
+ * Reveals a synchronized secondary "xray" image through a circular lens that
+ * follows the user's cursor or touch point over the primary image.
+ *
+ * Place the primary image in the default slot and the reveal image in the
+ * `xray` named slot. Both images are pixel-aligned so the lens shows exactly
+ * what lies beneath the cursor on the xray layer.
+ *
+ * @slot - Primary (outer) image
+ * @slot xray - Secondary image revealed through the lens
+ *
+ * @fires {{ x: number, y: number }} reveal-move - Fired as the lens moves; `detail.x` and `detail.y` are percentages
+ *
+ * @cssprop [--uibit-image-reveal-lens-size=12rem] - Diameter of the circular lens
+ * @cssprop [--uibit-image-reveal-lens-shadow=0 0 0 0.1875rem #ffffff, 0 0.5rem 2rem rgba(0,0,0,0.35)] - Box shadow of the lens ring
+ */
+export declare class ImageReveal extends UIBitElement {
+    static styles: import("lit").CSSResult;
+    /** Diameter of the lens in any CSS unit. Overrides the CSS custom property. */
+    size: string;
+    private _x;
+    private _y;
+    private _base;
+    private _lensImg;
+    connectedCallback(): void;
+    private _lensSize;
+    private _updateLens;
+    private _onMouseEnter;
+    private _onMouseMove;
+    private _onMouseLeave;
+    private _onTouchStart;
+    private _onTouchMove;
+    private _onTouchEnd;
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export default ImageReveal;
+//# sourceMappingURL=image-reveal.d.ts.map

package/dist/image-reveal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-reveal.d.ts","sourceRoot":"","sources":["../src/image-reveal.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,YAAY,EAAE,MAAM,aAAa,CAAC;AAK1D;;;;;;;;;;;;;;;GAeG;AACH,qBACa,WAAY,SAAQ,YAAY;IAC3C,MAAM,CAAC,MAAM,0BAAU;IAEvB,+EAA+E;IACnD,IAAI,SAAM;IAE7B,OAAO,CAAC,EAAE,CAAK;IACf,OAAO,CAAC,EAAE,CAAK;IAER,OAAO,CAAC,KAAK,CAAe;IACxB,OAAO,CAAC,QAAQ,CAAe;IAEnD,iBAAiB,SAEhB;IAED,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,WAAW;IAqBnB,OAAO,CAAC,aAAa,CAGnB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,aAAa,CAEnB;IAEF,OAAO,CAAC,aAAa,CAKnB;IAEF,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,WAAW,CAEjB;IAEF,YAAY,SAQX;IAED,MAAM,oCAoBL;CACF;eAEc,WAAW"}

package/dist/image-reveal.js

@@ -0,0 +1,142 @@
+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, UIBitElement } from '@uibit/core';
+import { property, state, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { styles } from './styles';
+/**
+ * Reveals a synchronized secondary "xray" image through a circular lens that
+ * follows the user's cursor or touch point over the primary image.
+ *
+ * Place the primary image in the default slot and the reveal image in the
+ * `xray` named slot. Both images are pixel-aligned so the lens shows exactly
+ * what lies beneath the cursor on the xray layer.
+ *
+ * @slot - Primary (outer) image
+ * @slot xray - Secondary image revealed through the lens
+ *
+ * @fires {{ x: number, y: number }} reveal-move - Fired as the lens moves; `detail.x` and `detail.y` are percentages
+ *
+ * @cssprop [--uibit-image-reveal-lens-size=12rem] - Diameter of the circular lens
+ * @cssprop [--uibit-image-reveal-lens-shadow=0 0 0 0.1875rem #ffffff, 0 0.5rem 2rem rgba(0,0,0,0.35)] - Box shadow of the lens ring
+ */
+let ImageReveal = class ImageReveal extends UIBitElement {
+    constructor() {
+        super(...arguments);
+        /** Diameter of the lens in any CSS unit. Overrides the CSS custom property. */
+        this.size = '';
+        this._x = 0;
+        this._y = 0;
+        this._onMouseEnter = (e) => {
+            this.setAttribute('active', '');
+            this._updateLens(e.clientX, e.clientY);
+        };
+        this._onMouseMove = (e) => {
+            this._updateLens(e.clientX, e.clientY);
+        };
+        this._onMouseLeave = () => {
+            this.removeAttribute('active');
+        };
+        this._onTouchStart = (e) => {
+            this.setAttribute('touch', '');
+            this.setAttribute('active', '');
+            const t = e.touches[0];
+            if (t)
+                this._updateLens(t.clientX, t.clientY);
+        };
+        this._onTouchMove = (e) => {
+            if (e.cancelable)
+                e.preventDefault();
+            const t = e.touches[0];
+            if (t)
+                this._updateLens(t.clientX, t.clientY);
+        };
+        this._onTouchEnd = () => {
+            this.removeAttribute('active');
+        };
+    }
+    static { this.styles = styles; }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    _lensSize() {
+        const prop = this.size || this.getCssPropertyValue('--uibit-image-reveal-lens-size').trim() || '12rem';
+        if (prop.endsWith('rem')) {
+            return parseFloat(prop) * parseFloat(getComputedStyle(document.documentElement).fontSize);
+        }
+        if (prop.endsWith('px'))
+            return parseFloat(prop);
+        return 192;
+    }
+    _updateLens(clientX, clientY) {
+        const rect = this._base.getBoundingClientRect();
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
+        this._x = x;
+        this._y = y;
+        const size = this._lensSize();
+        // Sync the xray img position so the pixel under the cursor aligns
+        if (this._lensImg) {
+            this._lensImg.style.width = `${rect.width}px`;
+            this._lensImg.style.height = `${rect.height}px`;
+            this._lensImg.style.left = `${-(x - size / 2)}px`;
+            this._lensImg.style.top = `${-(y - size / 2)}px`;
+        }
+        this.dispatchCustomEvent('reveal-move', { x: (x / rect.width) * 100, y: (y / rect.height) * 100 });
+    }
+    firstUpdated() {
+        this.listen(this._base, 'mouseenter', this._onMouseEnter);
+        this.listen(this._base, 'mousemove', this._onMouseMove);
+        this.listen(this._base, 'mouseleave', this._onMouseLeave);
+        this.listen(this._base, 'touchstart', this._onTouchStart, { passive: false });
+        this.listen(this._base, 'touchmove', this._onTouchMove, { passive: false });
+        this.listen(this._base, 'touchend', this._onTouchEnd);
+        this.listen(this._base, 'touchcancel', this._onTouchEnd);
+    }
+    render() {
+        const size = this.size || 'var(--uibit-image-reveal-lens-size, 12rem)';
+        const lensStyle = styleMap({
+            width: size,
+            height: size,
+            transform: `translate(calc(${this._x}px - 50%), calc(${this._y}px - 50%))`,
+        });
+        return html `
+      <div class="base" part="base">
+        <slot></slot>
+        <div class="lens" part="lens" style=${lensStyle}>
+          <div class="lens-inner" part="lens-inner">
+            <div class="lens-img" part="lens-img">
+              <slot name="reveal"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], ImageReveal.prototype, "size", void 0);
+__decorate([
+    state()
+], ImageReveal.prototype, "_x", void 0);
+__decorate([
+    state()
+], ImageReveal.prototype, "_y", void 0);
+__decorate([
+    query('.base')
+], ImageReveal.prototype, "_base", void 0);
+__decorate([
+    query('.lens-img')
+], ImageReveal.prototype, "_lensImg", void 0);
+ImageReveal = __decorate([
+    customElement('uibit-image-reveal')
+], ImageReveal);
+export { ImageReveal };
+export default ImageReveal;
+//# sourceMappingURL=image-reveal.js.map

package/dist/image-reveal.js.map

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

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default, ImageReveal } from './image-reveal';
+export * 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,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACtD,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default, ImageReveal } from './image-reveal';
+export * from './types';
+//# 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,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACtD,cAAc,SAAS,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,yBA+ElB,CAAC"}

package/dist/styles.js

@@ -0,0 +1,82 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    cursor: none;
+    -webkit-user-select: none;
+    user-select: none;
+    line-height: 0;
+  }
+
+  :host([touch]) {
+    cursor: default;
+  }
+
+  .base {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  ::slotted(img),
+  ::slotted(picture) {
+    display: block;
+    width: 100%;
+    height: auto;
+    pointer-events: none;
+  }
+
+  .xray-slot {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .xray-slot ::slotted(img),
+  .xray-slot ::slotted(picture) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .lens {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 50%;
+    overflow: hidden;
+    pointer-events: none;
+    box-shadow: var(
+      --uibit-image-reveal-lens-shadow,
+      0 0 0 0.0625rem rgba(0, 0, 0, 0.18),
+      0 0 0 0.1875rem rgba(255, 255, 255, 0.92),
+      0 0 0 0.25rem rgba(0, 0, 0, 0.1),
+      0 0.75rem 2.5rem rgba(0, 0, 0, 0.45)
+    );
+    transform: translate(-50%, -50%);
+    will-change: transform;
+    transition: opacity 0.15s ease;
+    opacity: 0;
+  }
+
+  :host([active]) .lens {
+    opacity: 1;
+  }
+
+  .lens-inner {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .lens-img {
+    position: absolute;
+    pointer-events: none;
+  }
+`;
+//# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+ExB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type ImageReveal from './image-reveal';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uibit-image-reveal': ImageReveal;
+    }
+}
+//# 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,WAAW,MAAM,gBAAgB,CAAC;AAE9C,OAAO,CAAC,MAAM,CAAC;IACf,UAAU,qBAAqB;QAC3B,oBAAoB,EAAE,WAAW,CAAC;KACrC;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,91 @@
+{
+  "name": "@uibit/image-reveal",
+  "version": "0.1.0",
+  "description": "A floating circular lens that follows the cursor or touch point, revealing a synchronized secondary image exactly where the user looks. Built for luxury and high-tech product storytelling.",
+  "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": [
+    "xray",
+    "lens",
+    "loupe",
+    "image",
+    "reveal",
+    "web-component",
+    "lit"
+  ],
+  "author": "Jonathan Rawlings",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Rawlings/uibit",
+    "directory": "packages/components/image-reveal"
+  },
+  "dependencies": {
+    "@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": "image-reveal",
+    "title": "Image Reveal",
+    "category": "Media",
+    "tagName": "uibit-image-reveal"
+  },
+  "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"
+  }
+}