@repere/react 0.1.0 → 0.2.0

package/dist/components/RepereProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RepereProvider.d.ts","sourceRoot":"","sources":["../../src/components/RepereProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhD,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAO/D,UAAU,mBAAmB;IAC3B,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,MAAM,EACN,KAAK,EACL,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,kDAkHrB"}
+{"version":3,"file":"RepereProvider.d.ts","sourceRoot":"","sources":["../../src/components/RepereProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAUhD,OAAO,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAO/D,UAAU,mBAAmB;IAC3B,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,MAAM,EACN,KAAK,EACL,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,kDAqHrB"}

package/dist/hooks/useBeaconPosition.d.ts

@@ -4,10 +4,11 @@ interface UseBeaconPositionParams {
     position: Position;
     offset?: Offset;
     zIndex?: number;
+    delay?: number;
     enabled?: boolean;
     debug?: boolean;
 }
-export declare function useBeaconPosition({ targetSelector, position, offset, zIndex, enabled, debug, }: UseBeaconPositionParams): {
+export declare function useBeaconPosition({ targetSelector, position, offset, zIndex, delay, enabled, debug, }: UseBeaconPositionParams): {
     calculatedPosition: CalculatedBeaconPosition | null;
     targetElement: HTMLElement | null;
 };

package/dist/hooks/useBeaconPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useBeaconPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useBeaconPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI/E,UAAU,uBAAuB;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,QAAQ,EACR,MAAM,EACN,MAAa,EACb,OAAc,EACd,KAAa,GACd,EAAE,uBAAuB;;;EAkCzB"}
+{"version":3,"file":"useBeaconPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useBeaconPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAI/E,UAAU,uBAAuB;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,cAAc,EACd,QAAQ,EACR,MAAM,EACN,MAAa,EACb,KAAK,EACL,OAAc,EACd,KAAa,GACd,EAAE,uBAAuB;;;EAkCzB"}

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+export type * from '@repere/core';
+export { Animation, Position } from '@repere/core';
 export { Beacons, type BeaconsProps } from './components/Beacons';
 export { ReperePopover } from './components/Popover';
 export { RepereTrigger } from './components/RepereTrigger';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,cAAc,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAElE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3D,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,GACtB,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -1,10 +1,10 @@
-import { jsx as g, jsxs as J } from "react/jsx-runtime";
-import { createContext as K, useContext as Q, useMemo as y, useState as C, useEffect as $, useCallback as A, isValidElement as N, cloneElement as W, useId as Z, forwardRef as b } from "react";
-import { createPortal as ee } from "react-dom";
+import { jsx as g, jsxs as K } from "react/jsx-runtime";
+import { createContext as Q, useContext as W, useMemo as w, useState as C, useEffect as L, useCallback as A, isValidElement as N, cloneElement as Z, useId as ee, forwardRef as b } from "react";
+import { createPortal as te } from "react-dom";
 import { motion as M } from "motion/react";
 var m = /* @__PURE__ */ ((e) => (e.TopLeft = "top-left", e.TopCenter = "top-center", e.TopRight = "top-right", e.RightCenter = "right-center", e.BottomRight = "bottom-right", e.BottomCenter = "bottom-center", e.BottomLeft = "bottom-left", e.LeftCenter = "left-center", e))(m || {});
-const te = m.TopRight;
-class oe {
+const oe = m.TopRight;
+class ne {
   state = /* @__PURE__ */ new Map();
   isDismissed(t) {
     return this.state.get(t)?.isDismissed ?? !1;
@@ -26,7 +26,7 @@ class oe {
   }
 }
 var v = /* @__PURE__ */ ((e) => (e.Fade = "fade", e.Scale = "scale", e.Grow = "grow", e.Shrink = "shrink", e.SlideUp = "slide-up", e.SlideDown = "slide-down", e.SlideLeft = "slide-left", e.SlideRight = "slide-right", e.None = "none", e))(v || {});
-const ne = {
+const ie = {
   [v.SlideDown]: {
     initial: { y: -20, opacity: 0 },
     animate: { y: 0, opacity: 1 },
@@ -73,11 +73,11 @@ const ne = {
     exit: {}
   }
 };
-function z(e) {
+function B(e) {
   return e ? typeof e == "string" ? { variant: e } : e : null;
 }
-function L(e, t) {
-  const o = z(e), i = z(t);
+function T(e, t) {
+  const o = B(e), i = B(t);
   return !o && !i ? null : o ? i ? {
     variant: i.variant ?? o.variant,
     duration: i.duration ?? o.duration,
@@ -85,10 +85,10 @@ function L(e, t) {
     ease: i.ease ?? o.ease
   } : o : i;
 }
-function B(e) {
-  const t = z(e);
+function $(e) {
+  const t = B(e);
   if (!t) return null;
-  const o = ne[t.variant];
+  const o = ie[t.variant];
   return o ? {
     variants: o,
     transition: {
@@ -100,7 +100,7 @@ function B(e) {
     }
   } : (console.warn(`[Repere] Unknown animation variant: ${t.variant}`), null);
 }
-function ie(e, t) {
+function se(e, t) {
   const o = (n) => {
     const a = n.match(/(-?\d+)%/);
     return a ? parseFloat(a[1]) : 0;
@@ -120,7 +120,7 @@ function ie(e, t) {
     }
   };
 }
-function se(e, t) {
+function re(e, t) {
   if (!e && !t) return {};
   const o = e?.variants, i = e?.transition, r = t?.variants, s = t?.transition, n = s?.ease ?? i?.ease ?? [0.4, 0, 0.2, 1], a = Array.isArray(n) ? `cubic-bezier(${n.join(", ")})` : n;
   return {
@@ -144,14 +144,14 @@ function se(e, t) {
     "--repere-transition-timing": a
   };
 }
-function re(e, t) {
+function ae(e, t) {
   const o = e?.transition.duration ?? 0, i = t?.transition.duration ?? 0;
   return Math.max(o, i) * 1e3;
 }
-function ae(e) {
+function le(e) {
   return new Promise((t) => setTimeout(t, e));
 }
-function le(e, t) {
+function ce(e, t) {
   if (t instanceof RegExp)
     return t.test(e);
   if (t === e)
@@ -162,7 +162,7 @@ function le(e, t) {
   }
   return !1;
 }
-class ce {
+class pe {
   store;
   debug;
   constructor(t, o = {}) {
@@ -173,7 +173,7 @@ class ce {
    * This supports wildcards - e.g., path="*" will match all pages
    */
   findMatchingPages(t, o) {
-    const i = t.filter((r) => typeof r.path == "function" ? r.path(o) : le(o, r.path));
+    const i = t.filter((r) => typeof r.path == "function" ? r.path(o) : ce(o, r.path));
     return this.debug && console.log(
       "[BeaconManager] Path:",
       o,
@@ -220,7 +220,7 @@ class ce {
     return this.store;
   }
 }
-function pe(e, t = m.TopRight, o = { x: 0, y: 0 }) {
+function de(e, t = m.TopRight, o = { x: 0, y: 0 }) {
   const { x: i = 0, y: r = 0 } = o;
   let s = 0, n = 0, a = "0", l = "0";
   switch (t) {
@@ -259,7 +259,7 @@ function pe(e, t = m.TopRight, o = { x: 0, y: 0 }) {
     translate: { x: a, y: l }
   };
 }
-class de {
+class ue {
   tracked = /* @__PURE__ */ new Map();
   scrollListener = null;
   resizeListener = null;
@@ -279,13 +279,25 @@ class de {
       position: o,
       offset: r.offset,
       zIndex: r.zIndex ?? 9999,
+      delay: r.delay,
       callbacks: /* @__PURE__ */ new Set(),
-      element: null
-    }), this.tracked.get(s)?.callbacks.add(i), this.tracked.size === 1 && this.startListening(), this.updatePosition(s), () => {
+      element: null,
+      hasInitialUpdate: !1
+    }), this.tracked.get(s)?.callbacks.add(i), this.tracked.size === 1 && this.startListening(), this.scheduleInitialUpdate(s), () => {
       const n = this.tracked.get(s);
-      n && (n.callbacks.delete(i), n.callbacks.size === 0 && (this.tracked.delete(s), this.tracked.size === 0 && this.stopListening()));
+      n && (n.callbacks.delete(i), n.callbacks.size === 0 && (n.delayTimeoutId !== void 0 && (clearTimeout(n.delayTimeoutId), n.delayTimeoutId = void 0), this.tracked.delete(s), this.tracked.size === 0 && this.stopListening()));
     };
   }
+  scheduleInitialUpdate(t) {
+    const o = this.tracked.get(t);
+    o && (!o.hasInitialUpdate && o.delay && o.delay > 0 ? (o.hasInitialUpdate = !0, this.debug && console.log(
+      `[PositionTracker] Delaying initial position calculation for ${t} by ${o.delay}ms`
+    ), o.delayTimeoutId = setTimeout(() => {
+      this.debug && console.log(
+        `[PositionTracker] Calculating position for ${t} after delay`
+      ), o.delayTimeoutId !== void 0 && (o.delayTimeoutId = void 0), this.updatePosition(t);
+    }, o.delay)) : (o.hasInitialUpdate || (o.hasInitialUpdate = !0), this.updatePosition(t)));
+  }
   updatePosition(t) {
     const o = this.tracked.get(t);
     if (!o) return;
@@ -298,7 +310,7 @@ class de {
     }
     o.element = i;
     const r = i.getBoundingClientRect(), s = {
-      ...pe(
+      ...de(
         r,
         o.position,
         o.offset
@@ -332,32 +344,34 @@ class de {
    * Clean up all listeners and subscriptions
    */
   destroy() {
+    for (const [, t] of this.tracked)
+      t.delayTimeoutId !== void 0 && (clearTimeout(t.delayTimeoutId), t.delayTimeoutId = void 0);
     this.stopListening(), this.tracked.clear();
   }
 }
-const j = K(null);
-function k() {
-  const e = Q(j);
+const U = Q(null);
+function I() {
+  const e = W(U);
   if (!e)
     throw new Error("useRepereContext must be used within a Repere provider.");
   return e;
 }
-function ue(e, t) {
-  const o = y(() => {
+function me(e, t) {
+  const o = w(() => {
     const n = t.trigger?.animations?.onRender, a = e.trigger?.animations?.onRender;
-    return B(L(n, a));
-  }, [t.trigger?.animations, e.trigger?.animations]), i = y(() => {
+    return $(T(n, a));
+  }, [t.trigger?.animations, e.trigger?.animations]), i = w(() => {
     const n = t.trigger?.animations?.onDismiss, a = e.trigger?.animations?.onDismiss;
-    return B(L(n, a));
+    return $(T(n, a));
   }, [
     t.trigger?.animations?.onDismiss,
     e.trigger?.animations?.onDismiss
-  ]), r = y(() => {
+  ]), r = w(() => {
     const n = t.popover?.animations?.onOpen, a = e.popover?.animations?.onOpen;
-    return B(L(n, a));
-  }, [t.popover?.animations?.onOpen, e.popover?.animations?.onOpen]), s = y(() => {
+    return $(T(n, a));
+  }, [t.popover?.animations?.onOpen, e.popover?.animations?.onOpen]), s = w(() => {
     const n = t.popover?.animations?.onClose, a = e.popover?.animations?.onClose;
-    return B(L(n, a));
+    return $(T(n, a));
   }, [
     t.popover?.animations?.onClose,
     e.popover?.animations?.onClose
@@ -369,32 +383,33 @@ function ue(e, t) {
     popoverCloseAnimation: s
   };
 }
-function me({
+function ge({
   targetSelector: e,
   position: t,
   offset: o,
   zIndex: i = 9999,
-  enabled: r = !0,
-  debug: s = !1
+  delay: r,
+  enabled: s = !0,
+  debug: n = !1
 }) {
-  const [n, a] = C(null), l = y(() => new de(s), [s]);
-  return $(() => {
-    if (!r) {
-      a(null);
+  const [a, l] = C(null), c = w(() => new ue(n), [n]);
+  return L(() => {
+    if (!s) {
+      l(null);
       return;
     }
-    return l.subscribe(
+    return c.subscribe(
       e,
       t,
-      a,
-      { offset: o, zIndex: i }
+      l,
+      { offset: o, zIndex: i, delay: r }
     );
-  }, [l, e, t, o, i, r]), $(() => () => l.destroy(), [l]), {
-    calculatedPosition: n,
-    targetElement: n ? document.querySelector(e) : null
+  }, [c, e, t, o, i, r, s]), L(() => () => c.destroy(), [c]), {
+    calculatedPosition: a,
+    targetElement: a ? document.querySelector(e) : null
   };
 }
-function ge() {
+function ve() {
   const [e, t] = C(!1), [o, i] = C(
     null
   ), r = A((l) => {
@@ -409,7 +424,7 @@ function ge() {
     () => o?.hidePopover(),
     [o]
   );
-  return $(() => {
+  return L(() => {
     if (!o) return;
     const l = (c) => {
       t(c.newState === "open");
@@ -424,7 +439,7 @@ function ge() {
     hidePopover: a
   };
 }
-function ve(e, t) {
+function he(e, t) {
   return e ? N(e) ? e : /* @__PURE__ */ g(
     e,
     {
@@ -436,7 +451,7 @@ function ve(e, t) {
     }
   ) : null;
 }
-function he(e, t) {
+function fe(e, t) {
   let o;
   return N(e) ? o = e : o = /* @__PURE__ */ g(
     e,
@@ -446,21 +461,22 @@ function he(e, t) {
       onDismiss: t.handleDismiss,
       onClose: t.hidePopover
     }
-  ), W(o, {
+  ), Z(o, {
     // @ts-expect-error - cloneElement ref typing doesn't handle callback refs properly
     ref: t.handlePopoverRef,
     id: t.popoverId,
     popover: "auto"
   });
 }
-function fe(e, t) {
-  const o = e.trigger?.position || t.trigger?.position || te, i = e.trigger?.zIndex || t.trigger?.zIndex || 9999, r = e.trigger?.offset, s = e.popover?.position || t.popover?.position || o, n = e.popover?.offset || t.popover?.offset || { x: 0, y: 0 };
+function ye(e, t) {
+  const o = e.trigger?.position || t.trigger?.position || oe, i = e.trigger?.zIndex || t.trigger?.zIndex || 9999, r = e.trigger?.offset, s = e.trigger?.delay ?? t.trigger?.delay, n = e.popover?.position || t.popover?.position || o, a = e.popover?.offset || t.popover?.offset || { x: 0, y: 0 };
   return {
     position: o,
     zIndex: i,
     offset: r,
-    popoverPosition: s,
-    popoverOffset: n
+    delay: s,
+    popoverPosition: n,
+    popoverOffset: a
   };
 }
 function we({
@@ -470,66 +486,67 @@ function we({
   onDismiss: i,
   debug: r
 }) {
-  const s = Z(), [n, a] = C(!1), { position: l, zIndex: c, offset: d, popoverPosition: w, popoverOffset: p } = fe(e, t), { calculatedPosition: u, targetElement: h } = me({
+  const s = ee(), [n, a] = C(!1), { position: l, zIndex: c, offset: d, delay: f, popoverPosition: p, popoverOffset: h } = ye(e, t), { calculatedPosition: u, targetElement: x } = ge({
     targetSelector: e.selector,
     position: l,
     offset: d,
     zIndex: c,
+    delay: f,
     enabled: !0,
     debug: r
   }), {
-    isOpen: x,
-    popoverElement: R,
-    handlePopoverRef: P,
-    togglePopover: f,
-    showPopover: O,
-    hidePopover: I
-  } = ge(), {
-    triggerAnimation: _,
-    triggerDismissAnimation: D,
-    popoverOpenAnimation: G,
-    popoverCloseAnimation: T
-  } = ue(e, t), E = async () => {
-    a(!0), R?.hidePopover();
-    const H = re(
-      D,
-      T
+    isOpen: k,
+    popoverElement: P,
+    handlePopoverRef: y,
+    togglePopover: R,
+    showPopover: _,
+    hidePopover: O
+  } = ve(), {
+    triggerAnimation: G,
+    triggerDismissAnimation: z,
+    popoverOpenAnimation: V,
+    popoverCloseAnimation: D
+  } = me(e, t), E = async () => {
+    a(!0), P?.hidePopover();
+    const J = ae(
+      z,
+      D
     );
-    await ae(H), await Promise.resolve(o.dismiss(e.id)), i();
-  }, V = {
+    await le(J), await Promise.resolve(o.dismiss(e.id)), i();
+  }, q = {
     beaconId: e.id,
     position: l,
-    popoverPosition: w,
-    popoverOffset: p,
+    popoverPosition: p,
+    popoverOffset: h,
     calculatedPosition: u,
-    isOpen: x,
+    isOpen: k,
     isDismissing: n,
-    toggle: f,
-    open: O,
-    close: I,
+    toggle: R,
+    open: _,
+    close: O,
     dismiss: E,
-    triggerAnimation: _,
-    triggerDismissAnimation: D,
-    popoverOpenAnimation: G,
-    popoverCloseAnimation: T,
+    triggerAnimation: G,
+    triggerDismissAnimation: z,
+    popoverOpenAnimation: V,
+    popoverCloseAnimation: D,
     popoverId: s
-  }, q = e.trigger?.component || t.trigger?.component, S = e.popover.component || t.popover?.component;
-  return !u || !h ? (r && console.warn(
-    `[Repere] ${e.id} waiting for target element: position=${!!u}, element=${!!h}`
-  ), null) : S ? /* @__PURE__ */ J(j.Provider, { value: V, children: [
-    ve(q, {
+  }, H = e.trigger?.component || t.trigger?.component, S = e.popover.component || t.popover?.component;
+  return !u || !x ? (r && console.warn(
+    `[Repere] ${e.id} waiting for target element: position=${!!u}, element=${!!x}`
+  ), null) : S ? /* @__PURE__ */ K(U.Provider, { value: q, children: [
+    he(H, {
       beacon: e,
       calculatedPosition: u,
       position: l,
-      isOpen: x,
-      togglePopover: f
+      isOpen: k,
+      togglePopover: R
     }),
-    he(S, {
+    fe(S, {
       beacon: e,
       position: l,
       handleDismiss: E,
-      hidePopover: I,
-      handlePopoverRef: P,
+      hidePopover: O,
+      handlePopoverRef: y,
       popoverId: s
     })
   ] }) : (r && console.warn(
@@ -537,41 +554,41 @@ function we({
     e.id
   ), null);
 }
-function Be({
+function $e({
   config: e,
   currentPath: t,
   enabled: o = !0,
   debug: i = !1
 }) {
-  const r = y(
-    () => e.store || new oe(),
+  const r = w(
+    () => e.store || new ne(),
     [e.store]
-  ), s = y(
-    () => new ce(r, { debug: i }),
+  ), s = w(
+    () => new pe(r, { debug: i }),
     [r, i]
   ), [n, a] = C([]), [l, c] = C(
     /* @__PURE__ */ new Set()
   );
-  $(() => {
+  L(() => {
     if (!o) {
       a([]), c(/* @__PURE__ */ new Set());
       return;
     }
     (async () => {
-      const u = await s.getActiveBeacons(
+      const h = await s.getActiveBeacons(
         e.pages,
         t
       );
-      a(u);
+      a(h);
     })();
   }, [s, e.pages, t, o]);
   const d = (p) => {
-    c((u) => /* @__PURE__ */ new Set([...u, p]));
-  }, w = n.filter(
+    c((h) => /* @__PURE__ */ new Set([...h, p]));
+  }, f = n.filter(
     (p) => !l.has(p.id)
   );
-  return w.length === 0 ? null : ee(
-    w.map((p) => /* @__PURE__ */ g(
+  return f.length === 0 ? null : te(
+    f.map((p) => /* @__PURE__ */ g(
       we,
       {
         beacon: p,
@@ -585,7 +602,7 @@ function Be({
     document.body
   );
 }
-const X = b(
+const j = b(
   ({
     children: e,
     style: t,
@@ -600,22 +617,22 @@ const X = b(
   }, c) => {
     const {
       beaconId: d,
-      popoverOpenAnimation: w,
+      popoverOpenAnimation: f,
       popoverCloseAnimation: p,
-      popoverPosition: u,
-      popoverOffset: h
-    } = k(), x = A(
-      (f) => {
-        typeof c == "function" ? c(f) : c && (c.current = f);
+      popoverPosition: h,
+      popoverOffset: u
+    } = I(), x = A(
+      (y) => {
+        typeof c == "function" ? c(y) : c && (c.current = y);
       },
       [c]
     ), P = {
       positionAnchor: d ? `--repere-trigger-${d}` : void 0,
-      ...h && {
-        marginLeft: h.x || 0,
-        marginTop: h.y || 0
+      ...u && {
+        marginLeft: u.x || 0,
+        marginTop: u.y || 0
       },
-      ...se(w, p),
+      ...re(f, p),
       ...t
     };
     return /* @__PURE__ */ g(
@@ -625,7 +642,7 @@ const X = b(
         role: "dialog",
         "aria-labelledby": `repere-popover-${d}`,
         "data-repere-popover": "",
-        "data-position": u,
+        "data-position": h,
         popover: o,
         ...l,
         style: P,
@@ -634,15 +651,15 @@ const X = b(
     );
   }
 );
-X.displayName = "ReperePopover";
-const ye = b(
+j.displayName = "ReperePopover";
+const xe = b(
   ({
     children: e = "Got it",
     onClick: t,
     as: o,
     ...i
   }, r) => {
-    const s = k(), n = s?.dismiss || (() => {
+    const s = I(), n = s?.dismiss || (() => {
     }), a = s?.popoverId;
     return /* @__PURE__ */ g(
       o || "button",
@@ -658,10 +675,10 @@ const ye = b(
       }
     );
   }
-), xe = Object.assign(ye, {
+), be = Object.assign(xe, {
   displayName: "ReperePopover.AcknowledgeButton"
-}), Y = b(({ children: e = "×", ...t }, o) => {
-  const r = k()?.popoverId;
+}), X = b(({ children: e = "×", ...t }, o) => {
+  const r = I()?.popoverId;
   return /* @__PURE__ */ g(
     "button",
     {
@@ -674,29 +691,29 @@ const ye = b(
     }
   );
 });
-Y.displayName = "ReperePopover.CloseButton";
-const F = b(
+X.displayName = "ReperePopover.CloseButton";
+const Y = b(
   ({ children: e, ...t }, o) => /* @__PURE__ */ g("div", { ref: o, ...t, children: e })
 );
-F.displayName = "ReperePopover.Content";
-const U = b(
+Y.displayName = "ReperePopover.Content";
+const F = b(
   ({ children: e, ...t }, o) => /* @__PURE__ */ g("div", { ref: o, ...t, children: e })
 );
-U.displayName = "ReperePopover.Footer";
-const be = b(
+F.displayName = "ReperePopover.Footer";
+const Pe = b(
   ({ children: e, as: t, ...o }, i) => {
-    const s = k()?.beaconId || "unknown";
+    const s = I()?.beaconId || "unknown";
     return /* @__PURE__ */ g(t || "h3", { ref: i, id: `repere-popover-${s}`, ...o, children: e });
   }
-), Pe = Object.assign(be, {
+), Ce = Object.assign(Pe, {
   displayName: "ReperePopover.Title"
-}), $e = Object.assign(X, {
-  Title: Pe,
-  Content: F,
-  Footer: U,
-  AcknowledgeButton: xe,
-  CloseButton: Y
-}), Ce = b(
+}), Le = Object.assign(j, {
+  Title: Ce,
+  Content: Y,
+  Footer: F,
+  AcknowledgeButton: be,
+  CloseButton: X
+}), ke = b(
   ({
     children: e,
     as: t,
@@ -710,10 +727,10 @@ const be = b(
       triggerAnimation: l,
       triggerDismissAnimation: c,
       isDismissing: d,
-      popoverId: w
-    } = k(), p = t || "button", u = y(() => !t || t === "button" ? M.button : M.create(p), [t, p]);
+      popoverId: f
+    } = I(), p = t || "button", h = w(() => !t || t === "button" ? M.button : M.create(p), [t, p]);
     if (!n) return null;
-    const h = {
+    const u = {
       position: n.position,
       top: n.top,
       left: n.left,
@@ -721,27 +738,27 @@ const be = b(
       pointerEvents: "auto",
       cursor: "pointer",
       anchorName: `--repere-trigger-${a}`
-    }, x = o ? { ...h, ...o } : h, R = !i && (l || c), P = {
+    }, x = o ? { ...u, ...o } : u, k = !i && (l || c), P = {
       ref: s,
-      popovertarget: w,
+      popovertarget: f,
       "aria-label": `Beacon trigger for ${a}`,
       "data-repere-trigger": "",
       ...r
     };
-    if (R) {
-      const f = d && c ? c : l;
-      if (!f) return null;
-      const O = ie(
+    if (k) {
+      const y = d && c ? c : l;
+      if (!y) return null;
+      const R = se(
         n.translate,
-        f.variants
+        y.variants
       );
       return /* @__PURE__ */ g(
-        u,
+        h,
         {
           initial: "initial",
           animate: d ? "exit" : "animate",
-          variants: O,
-          transition: f.transition,
+          variants: R,
+          transition: y.transition,
           ...P,
           style: x,
           children: e
@@ -760,11 +777,13 @@ const be = b(
       }
     );
   }
-), Oe = Object.assign(Ce, {
+), Be = Object.assign(ke, {
   displayName: "RepereTrigger"
 });
 export {
-  Be as Beacons,
-  $e as ReperePopover,
-  Oe as RepereTrigger
+  v as Animation,
+  $e as Beacons,
+  m as Position,
+  Le as ReperePopover,
+  Be as RepereTrigger
 };

package/dist/styles.css

@@ -0,0 +1 @@
+[data-repere-popover]{position:absolute;position-anchor:var(--repere-anchor);inset:unset;margin:0;opacity:var(--repere-exit-opacity, 0);transform:translate(var(--repere-exit-x, 0)) translateY(var(--repere-exit-y, -20px)) scale(var(--repere-exit-scale, 1));transition-property:opacity,transform,overlay,display;transition-duration:var(--repere-transition-duration, .3s);transition-timing-function:var( --repere-transition-timing, cubic-bezier(.4, 0, .2, 1) );transition-behavior:allow-discrete}[data-repere-popover]:popover-open{opacity:var(--repere-animate-opacity, 1);transform:translate(var(--repere-animate-x, 0)) translateY(var(--repere-animate-y, 0)) scale(var(--repere-animate-scale, 1))}@starting-style{[data-repere-popover]:popover-open{opacity:var(--repere-initial-opacity, 0);transform:translate(var(--repere-initial-x, 0)) translateY(var(--repere-initial-y, -20px)) scale(var(--repere-initial-scale, 1))}}[data-repere-popover][data-position=bottom-left]{top:anchor(bottom);left:anchor(left);position-try-fallbacks:--bottom-right,--top-left,--top-right}[data-repere-popover][data-position=bottom-center]{top:anchor(bottom);left:anchor(center);translate:-50% 0;position-try-fallbacks:--bottom-left,--bottom-right,--top-center}[data-repere-popover][data-position=bottom-right]{top:anchor(bottom);right:anchor(right);position-try-fallbacks:--bottom-left,--top-right,--top-left}[data-repere-popover][data-position=top-left]{bottom:anchor(top);left:anchor(left);position-try-fallbacks:--top-right,--bottom-left,--bottom-right}[data-repere-popover][data-position=top-center]{bottom:anchor(top);left:anchor(center);translate:-50% 0;position-try-fallbacks:--top-left,--top-right,--bottom-center}[data-repere-popover][data-position=top-right]{bottom:anchor(top);right:anchor(right);position-try-fallbacks:--top-left,--bottom-right,--bottom-left}[data-repere-popover][data-position=left-center]:popover-open{top:anchor(center);right:anchor(left);translate:0 -50%;position-try-fallbacks:--right-center,--bottom-center,--top-center}[data-repere-popover][data-position=right-center]:popover-open{top:anchor(center);left:anchor(right);translate:0 -50%;position-try-fallbacks:--left-center,--bottom-center,--top-center}[data-repere-trigger]{anchor-name:var(--repere-anchor)}@position-try --bottom-left{top:anchor(bottom);left:anchor(left);right:auto;bottom:auto;translate:0 0}@position-try --bottom-right{top:anchor(bottom);right:anchor(right);left:auto;bottom:auto;translate:0 0}@position-try --bottom-center{top:anchor(bottom);left:anchor(center);right:auto;bottom:auto;translate:-50% 0}@position-try --top-left{bottom:anchor(top);left:anchor(left);right:auto;top:auto;translate:0 0}@position-try --top-right{bottom:anchor(top);right:anchor(right);left:auto;top:auto;translate:0 0}@position-try --top-center{bottom:anchor(top);left:anchor(center);right:auto;top:auto;translate:-50% 0}@position-try --left-center{top:anchor(center);right:anchor(left);left:auto;bottom:auto;translate:0 -50%}@position-try --right-center{top:anchor(center);left:anchor(right);right:auto;bottom:auto;translate:0 -50%}

package/dist/utils/resolveBeaconConfig.d.ts

@@ -4,6 +4,7 @@ export declare function resolveBeaconConfig(beacon: Beacon, config: RepereReactC
     position: Position;
     zIndex: number;
     offset: Offset | undefined;
+    delay: number | undefined;
     popoverPosition: Position;
     popoverOffset: Offset;
 };

package/dist/utils/resolveBeaconConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolveBeaconConfig.d.ts","sourceRoot":"","sources":["../../src/utils/resolveBeaconConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB;;;;;;EAqB5E"}
+{"version":3,"file":"resolveBeaconConfig.d.ts","sourceRoot":"","sources":["../../src/utils/resolveBeaconConfig.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,iBAAiB;;;;;;;EAwB5E"}

package/package.json

@@ -1,26 +1,25 @@
 {
   "name": "@repere/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist"
   ],
-  "dependencies": {
-    "@repere/core": "0.0.3"
-  },
   "peerDependencies": {
     "motion": "^12.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.2",
@@ -28,7 +27,8 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "vite": "^7.3.0",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "@repere/core": "0.1.0"
   },
   "keywords": [
     "react",