levita-js 0.1.1

package/dist/index.cjs

@@ -0,0 +1,558 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+//#region src/constants.ts
+/** All keys of `LevitaOptions`, derived from `DEFAULT_OPTIONS`. */
+const OPTION_KEYS = [
+	"max",
+	"perspective",
+	"scale",
+	"speed",
+	"easing",
+	"reverse",
+	"axis",
+	"reset",
+	"glare",
+	"maxGlare",
+	"shadow",
+	"gyroscope",
+	"disabled",
+	"eventsEl"
+];
+/**
+* Build a partial `LevitaOptions` object from a source,
+* including only keys that are explicitly defined.
+*/
+const buildOptions = (source) => {
+	const options = {};
+	for (const key of OPTION_KEYS) if (source[key] !== void 0) options[key] = source[key];
+	return options;
+};
+const DEFAULT_OPTIONS = {
+	max: 15,
+	perspective: 1e3,
+	scale: 1.05,
+	speed: 200,
+	easing: "ease-out",
+	reverse: false,
+	axis: null,
+	reset: true,
+	glare: false,
+	maxGlare: .5,
+	shadow: false,
+	gyroscope: "auto",
+	disabled: false,
+	eventsEl: null
+};
+
+//#endregion
+//#region src/effects/glare.ts
+/**
+* Creates a radial gradient overlay that follows the tilt position,
+* simulating light reflection on the surface.
+*
+* Injects two DOM elements (.levita-glare > .levita-glare-inner) into
+* the target element. Position and opacity are driven by CSS custom
+* properties — no JS runs per animation frame.
+*/
+var GlareEffect = class {
+	container;
+	inner;
+	maxOpacity;
+	/**
+	* @param el - The element to attach the glare overlay to
+	* @param maxOpacity - Maximum glare opacity (0-1)
+	*/
+	constructor(el, maxOpacity) {
+		this.maxOpacity = maxOpacity;
+		this.container = document.createElement("div");
+		this.container.classList.add("levita-glare");
+		this.inner = document.createElement("div");
+		this.inner.classList.add("levita-glare-inner");
+		this.container.appendChild(this.inner);
+		el.appendChild(this.container);
+		if (!el.style.position || el.style.position === "static") el.style.position = "relative";
+	}
+	/**
+	* Update glare position and intensity based on normalized tilt values.
+	* Sets CSS custom properties that the stylesheet uses for rendering.
+	*
+	* @param normalizedX - Horizontal position [-1, 1]
+	* @param normalizedY - Vertical position [-1, 1]
+	*/
+	update = (normalizedX, normalizedY) => {
+		const glareX = (normalizedX + 1) / 2 * 100;
+		const glareY = (normalizedY + 1) / 2 * 100;
+		const intensity = Math.sqrt(normalizedX ** 2 + normalizedY ** 2) / Math.SQRT2;
+		this.inner.style.setProperty("--levita-glare-x", `${glareX}%`);
+		this.inner.style.setProperty("--levita-glare-y", `${glareY}%`);
+		this.inner.style.setProperty("--levita-glare-opacity", `${intensity * this.maxOpacity}`);
+	};
+	/** Remove the glare DOM elements from the parent. */
+	destroy = () => {
+		this.container.remove();
+	};
+};
+
+//#endregion
+//#region src/effects/shadow.ts
+/**
+* Adds a dynamic drop shadow that shifts based on the tilt angle,
+* reinforcing the 3D depth illusion.
+*
+* Uses CSS custom properties (--levita-shadow-x, --levita-shadow-y)
+* combined with `filter: drop-shadow()` — no JS runs per animation frame.
+*/
+var ShadowEffect = class {
+	el;
+	maxOffset;
+	/**
+	* @param el - The element to apply the shadow to
+	* @param maxOffset - Maximum shadow offset in pixels (default: 20)
+	*/
+	constructor(el, maxOffset = 20) {
+		this.el = el;
+		this.maxOffset = maxOffset;
+		this.el.classList.add("levita-shadow");
+	}
+	/**
+	* Update shadow offset based on normalized tilt values.
+	*
+	* @param normalizedX - Horizontal position [-1, 1]
+	* @param normalizedY - Vertical position [-1, 1]
+	*/
+	update = (normalizedX, normalizedY) => {
+		const shadowX = normalizedX * this.maxOffset;
+		const shadowY = normalizedY * this.maxOffset;
+		this.el.style.setProperty("--levita-shadow-x", `${shadowX}px`);
+		this.el.style.setProperty("--levita-shadow-y", `${shadowY}px`);
+	};
+	/** Remove the shadow class and clean up CSS custom properties. */
+	destroy = () => {
+		this.el.classList.remove("levita-shadow");
+		this.el.style.removeProperty("--levita-shadow-x");
+		this.el.style.removeProperty("--levita-shadow-y");
+	};
+};
+
+//#endregion
+//#region src/layers.ts
+/**
+* Scan a container for children with `data-levita-offset` attributes
+* and set the `--levita-offset` CSS custom property on each one.
+*
+* The CSS stylesheet uses this variable with `translateZ()` to position
+* layers at different depths — no JS runs per animation frame.
+*
+* @param container - The parent element to scan for layer children
+* @returns Array of discovered layers with their elements and offsets
+*/
+const scanLayers = (container) => {
+	const elements = container.querySelectorAll("[data-levita-offset]");
+	const layers = [];
+	for (const el of elements) {
+		const raw = el.dataset.levitaOffset;
+		const offset = Number.parseFloat(raw ?? "0");
+		if (!Number.isNaN(offset)) {
+			el.style.setProperty("--levita-offset", String(offset));
+			layers.push({
+				el,
+				offset
+			});
+		}
+	}
+	return layers;
+};
+/**
+* Remove the `--levita-offset` CSS custom property from all layer elements.
+*
+* @param layers - The layers to clean up
+*/
+const cleanupLayers = (layers) => {
+	for (const layer of layers) layer.el.style.removeProperty("--levita-offset");
+};
+
+//#endregion
+//#region src/sensors/motion.ts
+/**
+* Reads device orientation (accelerometer/gyroscope) and normalizes
+* the tilt angles to a [-1, 1] range.
+*
+* Handles iOS 13+ permission flow via async `requestPermission()`.
+* On Android, permission is granted automatically.
+*
+* Uses exponential moving average for smoothing raw sensor data.
+*/
+var MotionSensor = class MotionSensor {
+	onMove;
+	axis;
+	active = false;
+	permitted = false;
+	minAngle;
+	maxAngle;
+	smoothing;
+	lastX = 0;
+	lastY = 0;
+	/**
+	* @param onMove - Callback receiving normalized { x, y } values
+	* @param axis - Restrict input to a single axis, or null for both
+	* @param minAngle - Minimum device angle mapped to -1 (default: -45)
+	* @param maxAngle - Maximum device angle mapped to 1 (default: 45)
+	* @param smoothing - Exponential moving average factor 0-1 (default: 0.15, lower = smoother)
+	*/
+	constructor(onMove, axis, minAngle = -45, maxAngle = 45, smoothing = .15) {
+		this.onMove = onMove;
+		this.axis = axis;
+		this.minAngle = minAngle;
+		this.maxAngle = maxAngle;
+		this.smoothing = smoothing;
+	}
+	/** Check if the DeviceOrientationEvent API is available in this environment. */
+	static isSupported = () => {
+		return typeof window !== "undefined" && "DeviceOrientationEvent" in window;
+	};
+	/**
+	* Check if explicit permission is required (iOS 13+).
+	* On Android and desktop, this returns false.
+	*/
+	static needsPermission = () => {
+		return typeof DeviceOrientationEvent !== "undefined" && "requestPermission" in DeviceOrientationEvent;
+	};
+	/**
+	* Request permission to access device orientation.
+	* On Android, resolves immediately to true.
+	* On iOS 13+, triggers the native permission dialog.
+	* Must be called from a user gesture on iOS.
+	*
+	* @returns Whether permission was granted
+	*/
+	requestPermission = async () => {
+		if (!MotionSensor.isSupported()) return false;
+		if (!MotionSensor.needsPermission()) {
+			this.permitted = true;
+			return true;
+		}
+		try {
+			this.permitted = await DeviceOrientationEvent.requestPermission() === "granted";
+			return this.permitted;
+		} catch {
+			this.permitted = false;
+			return false;
+		}
+	};
+	/** Start listening to deviceorientation events. Requires prior permission. */
+	start = () => {
+		if (this.active || !this.permitted) return;
+		this.active = true;
+		window.addEventListener("deviceorientation", this.handleOrientation);
+	};
+	/** Stop listening and remove the deviceorientation event listener. */
+	stop = () => {
+		if (!this.active) return;
+		this.active = false;
+		window.removeEventListener("deviceorientation", this.handleOrientation);
+	};
+	/** Update the axis lock at runtime. */
+	setAxis = (axis) => {
+		this.axis = axis;
+	};
+	/**
+	* Normalize device orientation angles to [-1, 1] and apply
+	* exponential moving average smoothing.
+	*
+	* beta = X-axis rotation [-180, 180] (front-back tilt)
+	* gamma = Y-axis rotation [-90, 90] (left-right tilt)
+	*/
+	handleOrientation = (e) => {
+		const evt = e;
+		const beta = evt.beta ?? 0;
+		const gamma = evt.gamma ?? 0;
+		const range = this.maxAngle - this.minAngle;
+		const rawX = this.axis === "y" ? 0 : this.clamp((gamma - this.minAngle) / range * 2 - 1);
+		const rawY = this.axis === "x" ? 0 : this.clamp((beta - this.minAngle) / range * 2 - 1);
+		this.lastX = this.lastX + (rawX - this.lastX) * this.smoothing;
+		this.lastY = this.lastY + (rawY - this.lastY) * this.smoothing;
+		this.onMove({
+			x: this.lastX,
+			y: this.lastY
+		});
+	};
+	/** Clamp a value to the [-1, 1] range. */
+	clamp = (value) => {
+		return Math.max(-1, Math.min(1, value));
+	};
+};
+
+//#endregion
+//#region src/sensors/pointer.ts
+/**
+* Tracks pointer (mouse/touch) position over an element and normalizes
+* it to a [-1, 1] range relative to the element's bounds.
+*
+* Uses PointerEvent for unified mouse + touch input.
+*/
+var PointerSensor = class {
+	eventsEl;
+	onMove;
+	onEnter;
+	onLeave;
+	axis;
+	active = false;
+	rect = null;
+	constructor(el, onMove, onEnter, onLeave, axis, eventsEl = null) {
+		this.eventsEl = eventsEl ?? el;
+		this.onMove = onMove;
+		this.onEnter = onEnter;
+		this.onLeave = onLeave;
+		this.axis = axis;
+	}
+	/** Start listening to pointer events. */
+	start = () => {
+		if (this.active) return;
+		this.active = true;
+		this.eventsEl.addEventListener("pointermove", this.handlePointerMove);
+		this.eventsEl.addEventListener("pointerenter", this.handlePointerEnter);
+		this.eventsEl.addEventListener("pointerleave", this.handlePointerLeave);
+	};
+	/** Stop listening and remove all pointer event listeners. */
+	stop = () => {
+		if (!this.active) return;
+		this.active = false;
+		this.eventsEl.removeEventListener("pointermove", this.handlePointerMove);
+		this.eventsEl.removeEventListener("pointerenter", this.handlePointerEnter);
+		this.eventsEl.removeEventListener("pointerleave", this.handlePointerLeave);
+	};
+	/** Update the axis lock at runtime. */
+	setAxis = (axis) => {
+		this.axis = axis;
+	};
+	/**
+	* Compute normalized [-1, 1] position from pointer coordinates
+	* relative to the element's bounding rect. Respects axis locking.
+	*/
+	handlePointerMove = (e) => {
+		if (!this.rect) return;
+		const rawX = (e.clientX - this.rect.left) / this.rect.width;
+		const rawY = (e.clientY - this.rect.top) / this.rect.height;
+		const x = this.axis === "y" ? 0 : rawX * 2 - 1;
+		const y = this.axis === "x" ? 0 : rawY * 2 - 1;
+		this.onMove({
+			x,
+			y
+		});
+	};
+	handlePointerEnter = () => {
+		this.rect = this.eventsEl.getBoundingClientRect();
+		this.onEnter?.();
+	};
+	handlePointerLeave = () => {
+		this.rect = null;
+		this.onLeave?.();
+	};
+};
+
+//#endregion
+//#region src/levita.ts
+/**
+* Main entry point for the Levita 3D tilt effect.
+*
+* Orchestrates sensors (pointer, accelerometer), visual effects (glare, shadow),
+* and multi-layer parallax. All rendering is driven by CSS custom properties —
+* no requestAnimationFrame loop runs during interaction.
+*
+* @example
+* ```ts
+* import { Levita } from 'levita-js';
+* import 'levita-js/style.css';
+*
+* const tilt = new Levita(element, { glare: true, shadow: true });
+* tilt.on('move', ({ x, y }) => console.log(x, y));
+* ```
+*/
+var Levita = class {
+	el;
+	options;
+	pointerSensor;
+	motionSensor = null;
+	glareEffect = null;
+	shadowEffect = null;
+	layers = [];
+	listeners = /* @__PURE__ */ new Map();
+	destroyed = false;
+	gyroscopeRequested = false;
+	/**
+	* @param el - The DOM element to apply the tilt effect to
+	* @param options - Configuration options (all optional, sensible defaults)
+	*/
+	constructor(el, options = {}) {
+		this.el = el;
+		this.options = {
+			...DEFAULT_OPTIONS,
+			...options
+		};
+		this.el.classList.add("levita");
+		this.applyBaseProperties();
+		this.layers = scanLayers(this.el);
+		if (this.options.glare) this.glareEffect = new GlareEffect(this.el, this.options.maxGlare);
+		if (this.options.shadow) this.shadowEffect = new ShadowEffect(this.el);
+		this.pointerSensor = new PointerSensor(this.el, (values) => this.handleSensorInput(values), () => this.handleEnter(), () => this.handleLeave(), this.options.axis, this.options.eventsEl);
+		if (this.options.gyroscope !== false && MotionSensor.isSupported()) {
+			this.motionSensor = new MotionSensor((values) => this.handleSensorInput(values), this.options.axis);
+			if (this.options.gyroscope === "auto") this.el.addEventListener("click", this.handleFirstTouch, { once: true });
+		}
+		if (!this.options.disabled) this.enable();
+	}
+	/**
+	* On first touch (iOS auto mode), request accelerometer permission
+	* and switch from pointer to motion sensor if granted.
+	*/
+	handleFirstTouch = async () => {
+		if (this.gyroscopeRequested || !this.motionSensor) return;
+		this.gyroscopeRequested = true;
+		if (await this.motionSensor.requestPermission()) {
+			this.pointerSensor.stop();
+			this.setTransition(false);
+			this.motionSensor.start();
+		}
+	};
+	/** Re-enable the tilt effect after a `disable()` call. */
+	enable = () => {
+		if (this.destroyed) return;
+		this.options.disabled = false;
+		this.pointerSensor.start();
+	};
+	/** Pause the tilt effect and reset the element to its neutral position. */
+	disable = () => {
+		this.options.disabled = true;
+		this.pointerSensor.stop();
+		this.motionSensor?.stop();
+		this.resetTransform();
+	};
+	/**
+	* Manually request accelerometer permission (for `gyroscope: true` mode).
+	* Must be called from a user gesture on iOS 13+.
+	*
+	* @returns Whether permission was granted
+	*/
+	requestPermission = async () => {
+		if (!this.motionSensor) return false;
+		const granted = await this.motionSensor.requestPermission();
+		if (granted) {
+			this.pointerSensor.stop();
+			this.setTransition(false);
+			this.motionSensor.start();
+		}
+		return granted;
+	};
+	/**
+	* Fully clean up: stop sensors, remove effects, restore the element
+	* to its original state. The instance cannot be reused after this.
+	*/
+	destroy = () => {
+		if (this.destroyed) return;
+		this.destroyed = true;
+		this.pointerSensor.stop();
+		this.motionSensor?.stop();
+		this.glareEffect?.destroy();
+		this.shadowEffect?.destroy();
+		cleanupLayers(this.layers);
+		this.el.classList.remove("levita");
+		this.removeBaseProperties();
+		this.listeners.clear();
+		this.el.removeEventListener("click", this.handleFirstTouch);
+	};
+	/**
+	* Register an event listener.
+	*
+	* @param event - Event name: 'move', 'enter', or 'leave'
+	* @param callback - Handler function
+	*/
+	on = (event, callback) => {
+		if (!this.listeners.has(event)) this.listeners.set(event, /* @__PURE__ */ new Set());
+		this.listeners.get(event)?.add(callback);
+	};
+	/**
+	* Remove a previously registered event listener.
+	*
+	* @param event - Event name
+	* @param callback - The exact handler reference passed to `on()`
+	*/
+	off = (event, callback) => {
+		this.listeners.get(event)?.delete(callback);
+	};
+	/** Emit an event to all registered listeners. */
+	emit = (event, data) => {
+		const callbacks = this.listeners.get(event);
+		if (callbacks) for (const cb of callbacks) cb(data);
+	};
+	/**
+	* Process normalized sensor input and update CSS custom properties.
+	* Maps sensor X/Y to rotateY/rotateX (swapped, rotateX = vertical tilt).
+	*/
+	handleSensorInput = (input) => {
+		if (this.options.disabled) return;
+		const multiplier = this.options.reverse ? -1 : 1;
+		const x = input.y * this.options.max * multiplier;
+		const y = input.x * this.options.max * multiplier * -1;
+		this.el.style.setProperty("--levita-x", `${x}deg`);
+		this.el.style.setProperty("--levita-y", `${y}deg`);
+		this.el.style.setProperty("--levita-scale", String(this.options.scale));
+		this.el.style.setProperty("--levita-percent-x", String(input.x));
+		this.el.style.setProperty("--levita-percent-y", String(input.y));
+		this.glareEffect?.update(input.x, input.y);
+		this.shadowEffect?.update(input.x, input.y);
+		const values = {
+			x,
+			y,
+			percentX: input.x,
+			percentY: input.y
+		};
+		this.emit("move", values);
+	};
+	handleEnter = () => {
+		this.setTransition(false);
+		this.el.style.setProperty("--levita-scale", String(this.options.scale));
+		this.emit("enter", void 0);
+	};
+	handleLeave = () => {
+		this.setTransition(true);
+		if (this.options.reset) this.resetTransform();
+		this.emit("leave", void 0);
+	};
+	/** Toggle the CSS transition on or off. */
+	setTransition = (on) => {
+		this.el.style.setProperty("--levita-speed", on ? `${this.options.speed}ms` : "0ms");
+	};
+	/** Reset the element to its neutral (non-tilted) position. */
+	resetTransform = () => {
+		this.el.style.setProperty("--levita-x", "0deg");
+		this.el.style.setProperty("--levita-y", "0deg");
+		this.el.style.setProperty("--levita-scale", "1");
+		this.el.style.setProperty("--levita-percent-x", "0");
+		this.el.style.setProperty("--levita-percent-y", "0");
+		this.glareEffect?.update(0, 0);
+		this.shadowEffect?.update(0, 0);
+	};
+	/** Apply initial CSS custom properties from options. */
+	applyBaseProperties = () => {
+		this.el.style.setProperty("--levita-perspective", `${this.options.perspective}px`);
+		this.el.style.setProperty("--levita-speed", `${this.options.speed}ms`);
+		this.el.style.setProperty("--levita-easing", this.options.easing);
+	};
+	/** Remove all Levita CSS custom properties from the element. */
+	removeBaseProperties = () => {
+		this.el.style.removeProperty("--levita-perspective");
+		this.el.style.removeProperty("--levita-speed");
+		this.el.style.removeProperty("--levita-easing");
+		this.el.style.removeProperty("--levita-x");
+		this.el.style.removeProperty("--levita-y");
+		this.el.style.removeProperty("--levita-scale");
+		this.el.style.removeProperty("--levita-percent-x");
+		this.el.style.removeProperty("--levita-percent-y");
+	};
+};
+
+//#endregion
+exports.DEFAULT_OPTIONS = DEFAULT_OPTIONS;
+exports.Levita = Levita;
+exports.OPTION_KEYS = OPTION_KEYS;
+exports.buildOptions = buildOptions;

package/dist/index.d.cts

@@ -0,0 +1,149 @@
+//#region src/types.d.ts
+type Axis = "x" | "y" | null;
+type GyroscopeMode = "auto" | boolean;
+interface LevitaOptions {
+  /** Max tilt angle in degrees. Default: 15 */
+  max: number;
+  /** CSS perspective in px. Default: 1000 */
+  perspective: number;
+  /** Scale factor on hover. Default: 1.05 */
+  scale: number;
+  /** Transition duration in ms. Default: 200 */
+  speed: number;
+  /** CSS transition easing. Default: 'ease-out' */
+  easing: string;
+  /** Invert tilt direction. Default: false */
+  reverse: boolean;
+  /** Restrict tilt to a single axis. Default: null (both) */
+  axis: Axis;
+  /** Reset tilt on pointer leave. Default: true */
+  reset: boolean;
+  /** Enable glare effect. Default: false */
+  glare: boolean;
+  /** Max glare opacity (0-1). Default: 0.5 */
+  maxGlare: number;
+  /** Enable dynamic shadow. Default: false */
+  shadow: boolean;
+  /** Gyroscope mode. Default: 'auto' */
+  gyroscope: GyroscopeMode;
+  /** Disable the effect. Default: false */
+  disabled: boolean;
+  /** Element to listen for pointer events on. Default: the element itself */
+  eventsEl: HTMLElement | null;
+}
+interface TiltValues {
+  /** Tilt angle on X axis in degrees */
+  x: number;
+  /** Tilt angle on Y axis in degrees */
+  y: number;
+  /** Normalized X position [-1, 1] */
+  percentX: number;
+  /** Normalized Y position [-1, 1] */
+  percentY: number;
+}
+interface LevitaEventMap {
+  move: TiltValues;
+  enter: undefined;
+  leave: undefined;
+}
+type EventCallback<T> = (data: T) => void;
+//#endregion
+//#region src/constants.d.ts
+/** All keys of `LevitaOptions`, derived from `DEFAULT_OPTIONS`. */
+declare const OPTION_KEYS: readonly (keyof LevitaOptions)[];
+/**
+ * Build a partial `LevitaOptions` object from a source,
+ * including only keys that are explicitly defined.
+ */
+declare const buildOptions: (source: Partial<LevitaOptions>) => Partial<LevitaOptions>;
+declare const DEFAULT_OPTIONS: LevitaOptions;
+//#endregion
+//#region src/levita.d.ts
+/**
+ * Main entry point for the Levita 3D tilt effect.
+ *
+ * Orchestrates sensors (pointer, accelerometer), visual effects (glare, shadow),
+ * and multi-layer parallax. All rendering is driven by CSS custom properties —
+ * no requestAnimationFrame loop runs during interaction.
+ *
+ * @example
+ * ```ts
+ * import { Levita } from 'levita-js';
+ * import 'levita-js/style.css';
+ *
+ * const tilt = new Levita(element, { glare: true, shadow: true });
+ * tilt.on('move', ({ x, y }) => console.log(x, y));
+ * ```
+ */
+declare class Levita {
+  private el;
+  private options;
+  private pointerSensor;
+  private motionSensor;
+  private glareEffect;
+  private shadowEffect;
+  private layers;
+  private listeners;
+  private destroyed;
+  private gyroscopeRequested;
+  /**
+   * @param el - The DOM element to apply the tilt effect to
+   * @param options - Configuration options (all optional, sensible defaults)
+   */
+  constructor(el: HTMLElement, options?: Partial<LevitaOptions>);
+  /**
+   * On first touch (iOS auto mode), request accelerometer permission
+   * and switch from pointer to motion sensor if granted.
+   */
+  private handleFirstTouch;
+  /** Re-enable the tilt effect after a `disable()` call. */
+  enable: () => void;
+  /** Pause the tilt effect and reset the element to its neutral position. */
+  disable: () => void;
+  /**
+   * Manually request accelerometer permission (for `gyroscope: true` mode).
+   * Must be called from a user gesture on iOS 13+.
+   *
+   * @returns Whether permission was granted
+   */
+  requestPermission: () => Promise<boolean>;
+  /**
+   * Fully clean up: stop sensors, remove effects, restore the element
+   * to its original state. The instance cannot be reused after this.
+   */
+  destroy: () => void;
+  /**
+   * Register an event listener.
+   *
+   * @param event - Event name: 'move', 'enter', or 'leave'
+   * @param callback - Handler function
+   */
+  on: <K extends keyof LevitaEventMap>(event: K, callback: EventCallback<LevitaEventMap[K]>) => void;
+  /**
+   * Remove a previously registered event listener.
+   *
+   * @param event - Event name
+   * @param callback - The exact handler reference passed to `on()`
+   */
+  off: <K extends keyof LevitaEventMap>(event: K, callback: EventCallback<LevitaEventMap[K]>) => void;
+  /** Emit an event to all registered listeners. */
+  private emit;
+  /**
+   * Process normalized sensor input and update CSS custom properties.
+   * Maps sensor X/Y to rotateY/rotateX (swapped, rotateX = vertical tilt).
+   */
+  private handleSensorInput;
+  private handleEnter;
+  private handleLeave;
+  /** Toggle the CSS transition on or off. */
+  private setTransition;
+  /** Reset the element to its neutral (non-tilted) position. */
+  private resetTransform;
+  /** Apply initial CSS custom properties from options. */
+  private applyBaseProperties;
+  /** Remove all Levita CSS custom properties from the element. */
+  private removeBaseProperties;
+}
+//#endregion
+export { type Axis, DEFAULT_OPTIONS, type EventCallback, type GyroscopeMode, Levita, type LevitaEventMap, type LevitaOptions, OPTION_KEYS, type TiltValues, buildOptions };
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/constants.ts","../src/levita.ts"],"mappings":";KAAY,IAAA;AAAA,KACA,aAAA;AAAA,UAEK,aAAA;;EAEhB,GAAA;EALe;EAOf,WAAA;EANwB;EAQxB,KAAA;EARwB;EAUxB,KAAA;EARgB;EAUhB,MAAA;;EAEA,OAAA;EAYW;EAVX,IAAA,EAAM,IAAA;EAce;EAZrB,KAAA;EAdA;EAgBA,KAAA;EAZA;EAcA,QAAA;EAVA;EAYA,MAAA;EARA;EAUA,SAAA,EAAW,aAAA;EARX;EAUA,QAAA;EANA;EAQA,QAAA,EAAU,WAAA;AAAA;AAAA,UAGM,UAAA;EALhB;EAOA,CAAA;EALU;EAOV,CAAA;EAPqB;EASrB,QAAA;EAN0B;EAQ1B,QAAA;AAAA;AAAA,UAGgB,cAAA;EAChB,IAAA,EAAM,UAAA;EACN,KAAA;EACA,KAAA;AAAA;AAAA,KAGW,aAAA,OAAoB,IAAA,EAAM,CAAA;;;AAnDtC;AAAA,cCGa,WAAA,kBAA6B,aAAA;;;;ADF1C;cCuBa,YAAA,GAAgB,MAAA,EAAQ,OAAA,CAAQ,aAAA,MAAiB,OAAA,CAAQ,aAAA;AAAA,cAWzD,eAAA,EAAiB,aAAA;;;ADnC9B;;;;;AACA;;;;;AAEA;;;;;;AAHA,cE0Ba,MAAA;EAAA,QACJ,EAAA;EAAA,QACA,OAAA;EAAA,QACA,aAAA;EAAA,QACA,YAAA;EAAA,QACA,WAAA;EAAA,QACA,YAAA;EAAA,QACA,MAAA;EAAA,QACA,SAAA;EAAA,QACA,SAAA;EAAA,QACA,kBAAA;EFfR;;;;cEqBY,EAAA,EAAI,WAAA,EAAa,OAAA,GAAS,OAAA,CAAQ,aAAA;EFb9C;;;;EAAA,QE0DQ,gBAAA;EFrDQ;EEkEhB,MAAA;;EAOA,OAAA;EFvEA;;;;;;EEoFA,iBAAA,QAA8B,OAAA;EF3EA;;;;EE0F9B,OAAA;EFxFA;;;;AAID;;EE2GC,EAAA,mBAAsB,cAAA,EACrB,KAAA,EAAO,CAAA,EACP,QAAA,EAAU,aAAA,CAAc,cAAA,CAAe,CAAA;EF7GF;;;;;;EE2HtC,GAAA,mBAAuB,cAAA,EACtB,KAAA,EAAO,CAAA,EACP,QAAA,EAAU,aAAA,CAAc,cAAA,CAAe,CAAA;;UAMhC,IAAA;EDnLI;;;;EAAA,QCgMJ,iBAAA;EAAA,QAyBA,WAAA;EAAA,QAMA,WAAA;;UASA,aAAA;EDnN4B;EAAA,QCwN5B,cAAA;EDxNqD;EAAA,QCmOrD,mBAAA;EDnO4D;EAAA,QC0O5D,oBAAA;AAAA"}