@repere/react 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.js +317 -268
  2. package/package.json +5 -3
package/dist/index.js CHANGED
@@ -1,10 +1,10 @@
1
- import { jsx as g, jsxs as K } from "react/jsx-runtime";
2
- 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";
3
- import { createPortal as te } from "react-dom";
1
+ import { jsx as g, jsxs as Q } from "react/jsx-runtime";
2
+ import { createContext as W, useContext as Z, useMemo as w, useState as k, useEffect as B, useCallback as A, isValidElement as F, cloneElement as ee, useId as te, forwardRef as x } from "react";
3
+ import { createPortal as oe } from "react-dom";
4
4
  import { motion as M } from "motion/react";
5
5
  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 || {});
6
- const oe = m.TopRight;
7
- class ne {
6
+ const ne = m.TopRight;
7
+ class ie {
8
8
  state = /* @__PURE__ */ new Map();
9
9
  isDismissed(t) {
10
10
  return this.state.get(t)?.isDismissed ?? !1;
@@ -25,70 +25,70 @@ class ne {
25
25
  return Array.from(this.state.values());
26
26
  }
27
27
  }
28
- 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 || {});
29
- const ie = {
30
- [v.SlideDown]: {
28
+ var f = /* @__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))(f || {});
29
+ const se = {
30
+ [f.SlideDown]: {
31
31
  initial: { y: -20, opacity: 0 },
32
32
  animate: { y: 0, opacity: 1 },
33
33
  exit: { y: -20, opacity: 0 }
34
34
  },
35
- [v.SlideUp]: {
35
+ [f.SlideUp]: {
36
36
  initial: { y: 20, opacity: 0 },
37
37
  animate: { y: 0, opacity: 1 },
38
38
  exit: { y: 20, opacity: 0 }
39
39
  },
40
- [v.SlideLeft]: {
40
+ [f.SlideLeft]: {
41
41
  initial: { x: 20, opacity: 0 },
42
42
  animate: { x: 0, opacity: 1 },
43
43
  exit: { x: 20, opacity: 0 }
44
44
  },
45
- [v.SlideRight]: {
45
+ [f.SlideRight]: {
46
46
  initial: { x: -20, opacity: 0 },
47
47
  animate: { x: 0, opacity: 1 },
48
48
  exit: { x: -20, opacity: 0 }
49
49
  },
50
- [v.Fade]: {
50
+ [f.Fade]: {
51
51
  initial: { opacity: 0 },
52
52
  animate: { opacity: 1 },
53
53
  exit: { opacity: 0 }
54
54
  },
55
- [v.Shrink]: {
55
+ [f.Shrink]: {
56
56
  initial: { scale: 1.1, opacity: 0 },
57
57
  animate: { scale: 1, opacity: 1 },
58
58
  exit: { scale: 0.9, opacity: 0 }
59
59
  },
60
- [v.Grow]: {
60
+ [f.Grow]: {
61
61
  initial: { scale: 0.9, opacity: 0 },
62
62
  animate: { scale: 1, opacity: 1 },
63
63
  exit: { scale: 1.1, opacity: 0 }
64
64
  },
65
- [v.Scale]: {
65
+ [f.Scale]: {
66
66
  initial: { scale: 0, opacity: 0 },
67
67
  animate: { scale: 1, opacity: 1 },
68
68
  exit: { scale: 0, opacity: 0 }
69
69
  },
70
- [v.None]: {
70
+ [f.None]: {
71
71
  initial: {},
72
72
  animate: {},
73
73
  exit: {}
74
74
  }
75
75
  };
76
- function B(e) {
76
+ function L(e) {
77
77
  return e ? typeof e == "string" ? { variant: e } : e : null;
78
78
  }
79
79
  function T(e, t) {
80
- const o = B(e), i = B(t);
81
- return !o && !i ? null : o ? i ? {
82
- variant: i.variant ?? o.variant,
83
- duration: i.duration ?? o.duration,
84
- delay: i.delay ?? o.delay,
85
- ease: i.ease ?? o.ease
86
- } : o : i;
80
+ const o = L(e), n = L(t);
81
+ return !o && !n ? null : o ? n ? {
82
+ variant: n.variant ?? o.variant,
83
+ duration: n.duration ?? o.duration,
84
+ delay: n.delay ?? o.delay,
85
+ ease: n.ease ?? o.ease
86
+ } : o : n;
87
87
  }
88
88
  function $(e) {
89
- const t = B(e);
89
+ const t = L(e);
90
90
  if (!t) return null;
91
- const o = ie[t.variant];
91
+ const o = se[t.variant];
92
92
  return o ? {
93
93
  variants: o,
94
94
  transition: {
@@ -100,29 +100,29 @@ function $(e) {
100
100
  }
101
101
  } : (console.warn(`[Repere] Unknown animation variant: ${t.variant}`), null);
102
102
  }
103
- function se(e, t) {
104
- const o = (n) => {
105
- const a = n.match(/(-?\d+)%/);
103
+ function re(e, t) {
104
+ const o = (i) => {
105
+ const a = i.match(/(-?\d+)%/);
106
106
  return a ? parseFloat(a[1]) : 0;
107
- }, i = o(e.x), r = o(e.y), s = (n = 0) => r === 0 && n === 0 ? `translate(${i}%, 0)` : n === 0 ? `translate(${i}%, ${r}%)` : `translate(${i}%, calc(${r}% + ${n}px))`;
107
+ }, n = o(e.x), s = o(e.y), r = (i = 0) => s === 0 && i === 0 ? `translate(${n}%, 0)` : i === 0 ? `translate(${n}%, ${s}%)` : `translate(${n}%, calc(${s}% + ${i}px))`;
108
108
  return {
109
109
  initial: {
110
110
  ...t.initial,
111
- transform: s(t.initial.y || 0)
111
+ transform: r(t.initial.y || 0)
112
112
  },
113
113
  animate: {
114
114
  ...t.animate,
115
- transform: s(t.animate.y || 0)
115
+ transform: r(t.animate.y || 0)
116
116
  },
117
117
  exit: {
118
118
  ...t.exit,
119
- transform: s(t.exit.y || 0)
119
+ transform: r(t.exit.y || 0)
120
120
  }
121
121
  };
122
122
  }
123
- function re(e, t) {
123
+ function ae(e, t) {
124
124
  if (!e && !t) return {};
125
- 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;
125
+ const o = e?.variants, n = e?.transition, s = t?.variants, r = t?.transition, i = r?.ease ?? n?.ease ?? [0.4, 0, 0.2, 1], a = Array.isArray(i) ? `cubic-bezier(${i.join(", ")})` : i;
126
126
  return {
127
127
  // Initial state (when opening starts) - from onOpen animation
128
128
  "--repere-initial-opacity": o?.initial.opacity ?? 0,
@@ -135,23 +135,23 @@ function re(e, t) {
135
135
  "--repere-animate-y": `${o?.animate.y ?? 0}px`,
136
136
  "--repere-animate-scale": o?.animate.scale ?? 1,
137
137
  // Exit state (when closing) - from onClose animation
138
- "--repere-exit-opacity": r?.exit.opacity ?? 0,
139
- "--repere-exit-x": `${r?.exit.x ?? 0}px`,
140
- "--repere-exit-y": `${r?.exit.y ?? 0}px`,
141
- "--repere-exit-scale": r?.exit.scale ?? 1,
138
+ "--repere-exit-opacity": s?.exit.opacity ?? 0,
139
+ "--repere-exit-x": `${s?.exit.x ?? 0}px`,
140
+ "--repere-exit-y": `${s?.exit.y ?? 0}px`,
141
+ "--repere-exit-scale": s?.exit.scale ?? 1,
142
142
  // Transition timing
143
- "--repere-transition-duration": `${s?.duration ?? i?.duration ?? 0.3}s`,
143
+ "--repere-transition-duration": `${r?.duration ?? n?.duration ?? 0.3}s`,
144
144
  "--repere-transition-timing": a
145
145
  };
146
146
  }
147
- function ae(e, t) {
148
- const o = e?.transition.duration ?? 0, i = t?.transition.duration ?? 0;
149
- return Math.max(o, i) * 1e3;
147
+ function le(e, t) {
148
+ const o = e?.transition.duration ?? 0, n = t?.transition.duration ?? 0;
149
+ return Math.max(o, n) * 1e3;
150
150
  }
151
- function le(e) {
151
+ function ce(e) {
152
152
  return new Promise((t) => setTimeout(t, e));
153
153
  }
154
- function ce(e, t) {
154
+ function pe(e, t) {
155
155
  if (t instanceof RegExp)
156
156
  return t.test(e);
157
157
  if (t === e)
@@ -162,7 +162,7 @@ function ce(e, t) {
162
162
  }
163
163
  return !1;
164
164
  }
165
- class pe {
165
+ class de {
166
166
  store;
167
167
  debug;
168
168
  constructor(t, o = {}) {
@@ -173,45 +173,45 @@ class pe {
173
173
  * This supports wildcards - e.g., path="*" will match all pages
174
174
  */
175
175
  findMatchingPages(t, o) {
176
- const i = t.filter((r) => typeof r.path == "function" ? r.path(o) : ce(o, r.path));
176
+ const n = t.filter((s) => typeof s.path == "function" ? s.path(o) : pe(o, s.path));
177
177
  return this.debug && console.log(
178
178
  "[BeaconManager] Path:",
179
179
  o,
180
180
  "Matched pages:",
181
- i.map((r) => r.id).join(", ") || "none"
182
- ), i;
181
+ n.map((s) => s.id).join(", ") || "none"
182
+ ), n;
183
183
  }
184
184
  /**
185
185
  * Get all active (non-dismissed) beacons for the current path
186
186
  * Includes beacons from all matching pages (supports wildcards)
187
187
  */
188
188
  async getActiveBeacons(t, o) {
189
- const i = this.findMatchingPages(t, o);
190
- if (i.length === 0)
189
+ const n = this.findMatchingPages(t, o);
190
+ if (n.length === 0)
191
191
  return this.debug && console.log("[BeaconManager] No matching pages found"), [];
192
192
  this.debug && console.log(
193
193
  "[BeaconManager] Found",
194
- i.length,
194
+ n.length,
195
195
  "matching page(s):",
196
- i.map((a) => a.id).join(", ")
196
+ n.map((a) => a.id).join(", ")
197
197
  );
198
- const r = [], s = /* @__PURE__ */ new Set();
199
- for (const a of i)
198
+ const s = [], r = /* @__PURE__ */ new Set();
199
+ for (const a of n)
200
200
  for (const l of a.beacons) {
201
- if (s.has(l.id)) {
201
+ if (r.has(l.id)) {
202
202
  this.debug && console.warn(
203
203
  `[BeaconManager] Duplicate beacon ID "${l.id}" in page "${a.id}", skipping`
204
204
  );
205
205
  continue;
206
206
  }
207
- s.add(l.id), r.push(l);
207
+ r.add(l.id), s.push(l);
208
208
  }
209
- const n = [];
210
- for (const a of r)
209
+ const i = [];
210
+ for (const a of s)
211
211
  await Promise.resolve(
212
212
  this.store.isDismissed(a.id)
213
- ) ? this.debug && console.log("[BeaconManager] Beacon", a.id, "is dismissed") : n.push(a);
214
- return this.debug && console.log("[BeaconManager] Active beacons:", n.length), n;
213
+ ) ? this.debug && console.log("[BeaconManager] Beacon", a.id, "is dismissed") : i.push(a);
214
+ return this.debug && console.log("[BeaconManager] Active beacons:", i.length), i;
215
215
  }
216
216
  /**
217
217
  * Get the store instance
@@ -220,42 +220,42 @@ class pe {
220
220
  return this.store;
221
221
  }
222
222
  }
223
- function de(e, t = m.TopRight, o = { x: 0, y: 0 }) {
224
- const { x: i = 0, y: r = 0 } = o;
225
- let s = 0, n = 0, a = "0", l = "0";
223
+ function N(e, t = m.TopRight, o = { x: 0, y: 0 }) {
224
+ const { x: n = 0, y: s = 0 } = o;
225
+ let r = 0, i = 0, a = "0", l = "0";
226
226
  switch (t) {
227
227
  // Top positions
228
228
  case m.TopLeft:
229
- s = e.top + window.scrollY, n = e.left + window.scrollX, a = "-50%", l = "-100%";
229
+ r = e.top + window.scrollY, i = e.left + window.scrollX, a = "-50%", l = "-100%";
230
230
  break;
231
231
  case m.TopCenter:
232
- s = e.top + window.scrollY, n = e.left + window.scrollX + e.width / 2, a = "-50%", l = "-100%";
232
+ r = e.top + window.scrollY, i = e.left + window.scrollX + e.width / 2, a = "-50%", l = "-100%";
233
233
  break;
234
234
  case m.TopRight:
235
- s = e.top + window.scrollY, n = e.right + window.scrollX, a = "-50%", l = "-100%";
235
+ r = e.top + window.scrollY, i = e.right + window.scrollX, a = "-50%", l = "-100%";
236
236
  break;
237
237
  // Right positions
238
238
  case m.RightCenter:
239
- s = e.top + window.scrollY + e.height / 2, n = e.right + window.scrollX, a = "0", l = "-50%";
239
+ r = e.top + window.scrollY + e.height / 2, i = e.right + window.scrollX, a = "0", l = "-50%";
240
240
  break;
241
241
  // Bottom positions
242
242
  case m.BottomLeft:
243
- s = e.bottom + window.scrollY, n = e.left + window.scrollX, a = "-50%", l = "0";
243
+ r = e.bottom + window.scrollY, i = e.left + window.scrollX, a = "-50%", l = "0";
244
244
  break;
245
245
  case m.BottomCenter:
246
- s = e.bottom + window.scrollY, n = e.left + window.scrollX + e.width / 2, a = "-50%", l = "0";
246
+ r = e.bottom + window.scrollY, i = e.left + window.scrollX + e.width / 2, a = "-50%", l = "0";
247
247
  break;
248
248
  case m.BottomRight:
249
- s = e.bottom + window.scrollY, n = e.right + window.scrollX, a = "-50%", l = "0";
249
+ r = e.bottom + window.scrollY, i = e.right + window.scrollX, a = "-50%", l = "0";
250
250
  break;
251
251
  // Left positions
252
252
  case m.LeftCenter:
253
- s = e.top + window.scrollY + e.height / 2, n = e.left + window.scrollX, a = "-100%", l = "-50%";
253
+ r = e.top + window.scrollY + e.height / 2, i = e.left + window.scrollX, a = "-100%", l = "-50%";
254
254
  break;
255
255
  }
256
- return s += r, n += i, {
257
- top: s,
258
- left: n,
256
+ return r += s, i += n, {
257
+ top: r,
258
+ left: i,
259
259
  translate: { x: a, y: l }
260
260
  };
261
261
  }
@@ -272,46 +272,92 @@ class ue {
272
272
  /**
273
273
  * Subscribe to position updates for an element
274
274
  */
275
- subscribe(t, o, i, r = {}) {
276
- const s = t;
277
- return this.tracked.has(s) || this.tracked.set(s, {
275
+ subscribe(t, o, n, s = {}) {
276
+ const r = t;
277
+ this.tracked.has(r) || this.tracked.set(r, {
278
278
  selector: t,
279
279
  position: o,
280
- offset: r.offset,
281
- zIndex: r.zIndex ?? 9999,
282
- delay: r.delay,
283
- callbacks: /* @__PURE__ */ new Set(),
280
+ offset: s.offset,
281
+ zIndex: s.zIndex ?? 9999,
282
+ delay: s.delay,
283
+ callbacks: /* @__PURE__ */ new Map(),
284
284
  element: null,
285
- hasInitialUpdate: !1
286
- }), this.tracked.get(s)?.callbacks.add(i), this.tracked.size === 1 && this.startListening(), this.scheduleInitialUpdate(s), () => {
287
- const n = this.tracked.get(s);
288
- 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()));
285
+ delayTimeoutIds: /* @__PURE__ */ new Map()
286
+ });
287
+ const i = this.tracked.get(r);
288
+ return i ? (i.callbacks.set(n, {
289
+ callback: n,
290
+ needsInitialDelay: (s.delay ?? 0) > 0
291
+ }), this.tracked.size === 1 && this.startListening(), this.scheduleInitialUpdate(r, n), () => {
292
+ const a = this.tracked.get(r);
293
+ if (a) {
294
+ const l = a.delayTimeoutIds.get(n);
295
+ if (l !== void 0 && (clearTimeout(l), a.delayTimeoutIds.delete(n)), a.callbacks.delete(n), a.callbacks.size === 0) {
296
+ for (const [, c] of a.delayTimeoutIds)
297
+ clearTimeout(c);
298
+ a.delayTimeoutIds.clear(), this.tracked.delete(r), this.tracked.size === 0 && this.stopListening();
299
+ }
300
+ }
301
+ }) : () => {
289
302
  };
290
303
  }
291
- scheduleInitialUpdate(t) {
292
- const o = this.tracked.get(t);
293
- o && (!o.hasInitialUpdate && o.delay && o.delay > 0 ? (o.hasInitialUpdate = !0, this.debug && console.log(
294
- `[PositionTracker] Delaying initial position calculation for ${t} by ${o.delay}ms`
295
- ), o.delayTimeoutId = setTimeout(() => {
296
- this.debug && console.log(
297
- `[PositionTracker] Calculating position for ${t} after delay`
298
- ), o.delayTimeoutId !== void 0 && (o.delayTimeoutId = void 0), this.updatePosition(t);
299
- }, o.delay)) : (o.hasInitialUpdate || (o.hasInitialUpdate = !0), this.updatePosition(t)));
304
+ scheduleInitialUpdate(t, o) {
305
+ const n = this.tracked.get(t);
306
+ if (!n) return;
307
+ const s = n.callbacks.get(o);
308
+ if (s)
309
+ if (s.needsInitialDelay && n.delay && n.delay > 0) {
310
+ this.debug && console.log(
311
+ `[PositionTracker] Delaying initial position calculation for ${t} by ${n.delay}ms`
312
+ );
313
+ const r = setTimeout(() => {
314
+ this.debug && console.log(
315
+ `[PositionTracker] Calculating position for ${t} after delay`
316
+ );
317
+ const i = n.callbacks.get(o);
318
+ i && (i.needsInitialDelay = !1), n.delayTimeoutIds.delete(o), this.updatePositionForCallback(t, o);
319
+ }, n.delay);
320
+ n.delayTimeoutIds.set(o, r);
321
+ } else
322
+ this.updatePositionForCallback(t, o);
323
+ }
324
+ updatePositionForCallback(t, o) {
325
+ const n = this.tracked.get(t);
326
+ if (!n) return;
327
+ const s = document.querySelector(n.selector);
328
+ if (!s) {
329
+ this.debug && console.log(`[PositionTracker] Element not found: ${n.selector}`), n.element = null, o(null);
330
+ return;
331
+ }
332
+ n.element = s;
333
+ const r = s.getBoundingClientRect(), i = {
334
+ ...N(
335
+ r,
336
+ n.position,
337
+ n.offset
338
+ ),
339
+ position: "fixed",
340
+ zIndex: n.zIndex
341
+ };
342
+ this.debug && console.log(
343
+ `[PositionTracker] Updated position for ${n.selector}:`,
344
+ i
345
+ ), o(i);
300
346
  }
301
347
  updatePosition(t) {
302
348
  const o = this.tracked.get(t);
303
349
  if (!o) return;
304
- const i = document.querySelector(o.selector);
305
- if (!i) {
350
+ const n = document.querySelector(o.selector);
351
+ if (!n) {
306
352
  this.debug && console.log(`[PositionTracker] Element not found: ${o.selector}`), o.element = null;
307
- for (const n of o.callbacks)
308
- n(null);
353
+ for (const [i] of o.callbacks)
354
+ i(null);
309
355
  return;
310
356
  }
311
- o.element = i;
312
- const r = i.getBoundingClientRect(), s = {
313
- ...de(
314
- r,
357
+ o.element = n;
358
+ const s = n.getBoundingClientRect(), r = {
359
+ ...N(
360
+ s,
315
361
  o.position,
316
362
  o.offset
317
363
  ),
@@ -320,10 +366,10 @@ class ue {
320
366
  };
321
367
  this.debug && console.log(
322
368
  `[PositionTracker] Updated position for ${o.selector}:`,
323
- s
369
+ r
324
370
  );
325
- for (const n of o.callbacks)
326
- n(s);
371
+ for (const [i] of o.callbacks)
372
+ i(r);
327
373
  }
328
374
  updateAllPositions = () => {
329
375
  for (const [t] of this.tracked)
@@ -344,57 +390,60 @@ class ue {
344
390
  * Clean up all listeners and subscriptions
345
391
  */
346
392
  destroy() {
347
- for (const [, t] of this.tracked)
348
- t.delayTimeoutId !== void 0 && (clearTimeout(t.delayTimeoutId), t.delayTimeoutId = void 0);
393
+ for (const [, t] of this.tracked) {
394
+ for (const [, o] of t.delayTimeoutIds)
395
+ clearTimeout(o);
396
+ t.delayTimeoutIds.clear();
397
+ }
349
398
  this.stopListening(), this.tracked.clear();
350
399
  }
351
400
  }
352
- const U = Q(null);
401
+ const j = W(null);
353
402
  function I() {
354
- const e = W(U);
403
+ const e = Z(j);
355
404
  if (!e)
356
405
  throw new Error("useRepereContext must be used within a Repere provider.");
357
406
  return e;
358
407
  }
359
408
  function me(e, t) {
360
409
  const o = w(() => {
361
- const n = t.trigger?.animations?.onRender, a = e.trigger?.animations?.onRender;
362
- return $(T(n, a));
363
- }, [t.trigger?.animations, e.trigger?.animations]), i = w(() => {
364
- const n = t.trigger?.animations?.onDismiss, a = e.trigger?.animations?.onDismiss;
365
- return $(T(n, a));
410
+ const i = t.trigger?.animations?.onRender, a = e.trigger?.animations?.onRender;
411
+ return $(T(i, a));
412
+ }, [t.trigger?.animations, e.trigger?.animations]), n = w(() => {
413
+ const i = t.trigger?.animations?.onDismiss, a = e.trigger?.animations?.onDismiss;
414
+ return $(T(i, a));
366
415
  }, [
367
416
  t.trigger?.animations?.onDismiss,
368
417
  e.trigger?.animations?.onDismiss
369
- ]), r = w(() => {
370
- const n = t.popover?.animations?.onOpen, a = e.popover?.animations?.onOpen;
371
- return $(T(n, a));
372
- }, [t.popover?.animations?.onOpen, e.popover?.animations?.onOpen]), s = w(() => {
373
- const n = t.popover?.animations?.onClose, a = e.popover?.animations?.onClose;
374
- return $(T(n, a));
418
+ ]), s = w(() => {
419
+ const i = t.popover?.animations?.onOpen, a = e.popover?.animations?.onOpen;
420
+ return $(T(i, a));
421
+ }, [t.popover?.animations?.onOpen, e.popover?.animations?.onOpen]), r = w(() => {
422
+ const i = t.popover?.animations?.onClose, a = e.popover?.animations?.onClose;
423
+ return $(T(i, a));
375
424
  }, [
376
425
  t.popover?.animations?.onClose,
377
426
  e.popover?.animations?.onClose
378
427
  ]);
379
428
  return {
380
429
  triggerAnimation: o,
381
- triggerDismissAnimation: i,
382
- popoverOpenAnimation: r,
383
- popoverCloseAnimation: s
430
+ triggerDismissAnimation: n,
431
+ popoverOpenAnimation: s,
432
+ popoverCloseAnimation: r
384
433
  };
385
434
  }
386
435
  function ge({
387
436
  targetSelector: e,
388
437
  position: t,
389
438
  offset: o,
390
- zIndex: i = 9999,
391
- delay: r,
392
- enabled: s = !0,
393
- debug: n = !1
439
+ zIndex: n = 9999,
440
+ delay: s,
441
+ enabled: r = !0,
442
+ debug: i = !1
394
443
  }) {
395
- const [a, l] = C(null), c = w(() => new ue(n), [n]);
396
- return L(() => {
397
- if (!s) {
444
+ const [a, l] = k(null), c = w(() => new ue(i), [i]);
445
+ return B(() => {
446
+ if (!r) {
398
447
  l(null);
399
448
  return;
400
449
  }
@@ -402,29 +451,29 @@ function ge({
402
451
  e,
403
452
  t,
404
453
  l,
405
- { offset: o, zIndex: i, delay: r }
454
+ { offset: o, zIndex: n, delay: s }
406
455
  );
407
- }, [c, e, t, o, i, r, s]), L(() => () => c.destroy(), [c]), {
456
+ }, [c, e, t, o, n, s, r]), B(() => () => c.destroy(), [c]), {
408
457
  calculatedPosition: a,
409
458
  targetElement: a ? document.querySelector(e) : null
410
459
  };
411
460
  }
412
- function ve() {
413
- const [e, t] = C(!1), [o, i] = C(
461
+ function fe() {
462
+ const [e, t] = k(!1), [o, n] = k(
414
463
  null
415
- ), r = A((l) => {
416
- i(l);
417
- }, []), s = A(
464
+ ), s = A((l) => {
465
+ n(l);
466
+ }, []), r = A(
418
467
  () => o?.togglePopover(),
419
468
  [o]
420
- ), n = A(
469
+ ), i = A(
421
470
  () => o?.showPopover(),
422
471
  [o]
423
472
  ), a = A(
424
473
  () => o?.hidePopover(),
425
474
  [o]
426
475
  );
427
- return L(() => {
476
+ return B(() => {
428
477
  if (!o) return;
429
478
  const l = (c) => {
430
479
  t(c.newState === "open");
@@ -433,14 +482,14 @@ function ve() {
433
482
  }, [o]), {
434
483
  isOpen: e,
435
484
  popoverElement: o,
436
- handlePopoverRef: r,
437
- togglePopover: s,
438
- showPopover: n,
485
+ handlePopoverRef: s,
486
+ togglePopover: r,
487
+ showPopover: i,
439
488
  hidePopover: a
440
489
  };
441
490
  }
442
- function he(e, t) {
443
- return e ? N(e) ? e : /* @__PURE__ */ g(
491
+ function ve(e, t) {
492
+ return e ? F(e) ? e : /* @__PURE__ */ g(
444
493
  e,
445
494
  {
446
495
  beacon: t.beacon,
@@ -451,9 +500,9 @@ function he(e, t) {
451
500
  }
452
501
  ) : null;
453
502
  }
454
- function fe(e, t) {
503
+ function he(e, t) {
455
504
  let o;
456
- return N(e) ? o = e : o = /* @__PURE__ */ g(
505
+ return F(e) ? o = e : o = /* @__PURE__ */ g(
457
506
  e,
458
507
  {
459
508
  beacon: t.beacon,
@@ -461,7 +510,7 @@ function fe(e, t) {
461
510
  onDismiss: t.handleDismiss,
462
511
  onClose: t.hidePopover
463
512
  }
464
- ), Z(o, {
513
+ ), ee(o, {
465
514
  // @ts-expect-error - cloneElement ref typing doesn't handle callback refs properly
466
515
  ref: t.handlePopoverRef,
467
516
  id: t.popoverId,
@@ -469,13 +518,13 @@ function fe(e, t) {
469
518
  });
470
519
  }
471
520
  function ye(e, t) {
472
- 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 };
521
+ const o = e.trigger?.position || t.trigger?.position || ne, n = e.trigger?.zIndex || t.trigger?.zIndex || 9999, s = e.trigger?.offset, r = e.trigger?.delay ?? t.trigger?.delay, i = e.popover?.position || t.popover?.position || o, a = e.popover?.offset || t.popover?.offset || { x: 0, y: 0 };
473
522
  return {
474
523
  position: o,
475
- zIndex: i,
476
- offset: r,
477
- delay: s,
478
- popoverPosition: n,
524
+ zIndex: n,
525
+ offset: s,
526
+ delay: r,
527
+ popoverPosition: i,
479
528
  popoverOffset: a
480
529
  };
481
530
  }
@@ -483,73 +532,73 @@ function we({
483
532
  beacon: e,
484
533
  config: t,
485
534
  store: o,
486
- onDismiss: i,
487
- debug: r
535
+ onDismiss: n,
536
+ debug: s
488
537
  }) {
489
- 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({
538
+ const r = te(), [i, a] = k(!1), { position: l, zIndex: c, offset: d, delay: h, popoverPosition: p, popoverOffset: v } = ye(e, t), { calculatedPosition: u, targetElement: b } = ge({
490
539
  targetSelector: e.selector,
491
540
  position: l,
492
541
  offset: d,
493
542
  zIndex: c,
494
- delay: f,
543
+ delay: h,
495
544
  enabled: !0,
496
- debug: r
545
+ debug: s
497
546
  }), {
498
- isOpen: k,
547
+ isOpen: C,
499
548
  popoverElement: P,
500
549
  handlePopoverRef: y,
501
550
  togglePopover: R,
502
- showPopover: _,
551
+ showPopover: q,
503
552
  hidePopover: O
504
- } = ve(), {
553
+ } = fe(), {
505
554
  triggerAnimation: G,
506
- triggerDismissAnimation: z,
555
+ triggerDismissAnimation: D,
507
556
  popoverOpenAnimation: V,
508
- popoverCloseAnimation: D
557
+ popoverCloseAnimation: z
509
558
  } = me(e, t), E = async () => {
510
559
  a(!0), P?.hidePopover();
511
- const J = ae(
512
- z,
513
- D
560
+ const K = le(
561
+ D,
562
+ z
514
563
  );
515
- await le(J), await Promise.resolve(o.dismiss(e.id)), i();
516
- }, q = {
564
+ await ce(K), await Promise.resolve(o.dismiss(e.id)), n();
565
+ }, H = {
517
566
  beaconId: e.id,
518
567
  position: l,
519
568
  popoverPosition: p,
520
- popoverOffset: h,
569
+ popoverOffset: v,
521
570
  calculatedPosition: u,
522
- isOpen: k,
523
- isDismissing: n,
571
+ isOpen: C,
572
+ isDismissing: i,
524
573
  toggle: R,
525
- open: _,
574
+ open: q,
526
575
  close: O,
527
576
  dismiss: E,
528
577
  triggerAnimation: G,
529
- triggerDismissAnimation: z,
578
+ triggerDismissAnimation: D,
530
579
  popoverOpenAnimation: V,
531
- popoverCloseAnimation: D,
532
- popoverId: s
533
- }, H = e.trigger?.component || t.trigger?.component, S = e.popover.component || t.popover?.component;
534
- return !u || !x ? (r && console.warn(
535
- `[Repere] ${e.id} waiting for target element: position=${!!u}, element=${!!x}`
536
- ), null) : S ? /* @__PURE__ */ K(U.Provider, { value: q, children: [
537
- he(H, {
580
+ popoverCloseAnimation: z,
581
+ popoverId: r
582
+ }, J = e.trigger?.component || t.trigger?.component, S = e.popover.component || t.popover?.component;
583
+ return !u || !b ? (s && console.warn(
584
+ `[Repere] ${e.id} waiting for target element: position=${!!u}, element=${!!b}`
585
+ ), null) : S ? /* @__PURE__ */ Q(j.Provider, { value: H, children: [
586
+ ve(J, {
538
587
  beacon: e,
539
588
  calculatedPosition: u,
540
589
  position: l,
541
- isOpen: k,
590
+ isOpen: C,
542
591
  togglePopover: R
543
592
  }),
544
- fe(S, {
593
+ he(S, {
545
594
  beacon: e,
546
595
  position: l,
547
596
  handleDismiss: E,
548
597
  hidePopover: O,
549
598
  handlePopoverRef: y,
550
- popoverId: s
599
+ popoverId: r
551
600
  })
552
- ] }) : (r && console.warn(
601
+ ] }) : (s && console.warn(
553
602
  "[Repere] No popover component provided for beacon:",
554
603
  e.id
555
604
  ), null);
@@ -558,43 +607,43 @@ function $e({
558
607
  config: e,
559
608
  currentPath: t,
560
609
  enabled: o = !0,
561
- debug: i = !1
610
+ debug: n = !1
562
611
  }) {
563
- const r = w(
564
- () => e.store || new ne(),
612
+ const s = w(
613
+ () => e.store || new ie(),
565
614
  [e.store]
566
- ), s = w(
567
- () => new pe(r, { debug: i }),
568
- [r, i]
569
- ), [n, a] = C([]), [l, c] = C(
615
+ ), r = w(
616
+ () => new de(s, { debug: n }),
617
+ [s, n]
618
+ ), [i, a] = k([]), [l, c] = k(
570
619
  /* @__PURE__ */ new Set()
571
620
  );
572
- L(() => {
621
+ B(() => {
573
622
  if (!o) {
574
623
  a([]), c(/* @__PURE__ */ new Set());
575
624
  return;
576
625
  }
577
626
  (async () => {
578
- const h = await s.getActiveBeacons(
627
+ const v = await r.getActiveBeacons(
579
628
  e.pages,
580
629
  t
581
630
  );
582
- a(h);
631
+ a(v);
583
632
  })();
584
- }, [s, e.pages, t, o]);
633
+ }, [r, e.pages, t, o]);
585
634
  const d = (p) => {
586
- c((h) => /* @__PURE__ */ new Set([...h, p]));
587
- }, f = n.filter(
635
+ c((v) => /* @__PURE__ */ new Set([...v, p]));
636
+ }, h = i.filter(
588
637
  (p) => !l.has(p.id)
589
638
  );
590
- return f.length === 0 ? null : te(
591
- f.map((p) => /* @__PURE__ */ g(
639
+ return h.length === 0 ? null : oe(
640
+ h.map((p) => /* @__PURE__ */ g(
592
641
  we,
593
642
  {
594
643
  beacon: p,
595
644
  config: e,
596
- store: r,
597
- debug: i,
645
+ store: s,
646
+ debug: n,
598
647
  onDismiss: () => d(p.id)
599
648
  },
600
649
  p.id
@@ -602,26 +651,26 @@ function $e({
602
651
  document.body
603
652
  );
604
653
  }
605
- const j = b(
654
+ const X = x(
606
655
  ({
607
656
  children: e,
608
657
  style: t,
609
658
  popover: o = "auto",
610
- disableAnimation: i,
659
+ disableAnimation: n,
611
660
  // Destructure and discard internal props so they don't spread to DOM
612
- beacon: r,
613
- position: s,
614
- onDismiss: n,
661
+ beacon: s,
662
+ position: r,
663
+ onDismiss: i,
615
664
  onClose: a,
616
665
  ...l
617
666
  }, c) => {
618
667
  const {
619
668
  beaconId: d,
620
- popoverOpenAnimation: f,
669
+ popoverOpenAnimation: h,
621
670
  popoverCloseAnimation: p,
622
- popoverPosition: h,
671
+ popoverPosition: v,
623
672
  popoverOffset: u
624
- } = I(), x = A(
673
+ } = I(), b = A(
625
674
  (y) => {
626
675
  typeof c == "function" ? c(y) : c && (c.current = y);
627
676
  },
@@ -632,17 +681,17 @@ const j = b(
632
681
  marginLeft: u.x || 0,
633
682
  marginTop: u.y || 0
634
683
  },
635
- ...re(f, p),
684
+ ...ae(h, p),
636
685
  ...t
637
686
  };
638
687
  return /* @__PURE__ */ g(
639
688
  "div",
640
689
  {
641
- ref: x,
690
+ ref: b,
642
691
  role: "dialog",
643
692
  "aria-labelledby": `repere-popover-${d}`,
644
693
  "data-repere-popover": "",
645
- "data-position": h,
694
+ "data-position": v,
646
695
  popover: o,
647
696
  ...l,
648
697
  style: P,
@@ -651,39 +700,39 @@ const j = b(
651
700
  );
652
701
  }
653
702
  );
654
- j.displayName = "ReperePopover";
655
- const xe = b(
703
+ X.displayName = "ReperePopover";
704
+ const be = x(
656
705
  ({
657
706
  children: e = "Got it",
658
707
  onClick: t,
659
708
  as: o,
660
- ...i
661
- }, r) => {
662
- const s = I(), n = s?.dismiss || (() => {
663
- }), a = s?.popoverId;
709
+ ...n
710
+ }, s) => {
711
+ const r = I(), i = r?.dismiss || (() => {
712
+ }), a = r?.popoverId;
664
713
  return /* @__PURE__ */ g(
665
714
  o || "button",
666
715
  {
667
- ref: r,
716
+ ref: s,
668
717
  onClick: (d) => {
669
- n(), t?.(d);
718
+ i(), t?.(d);
670
719
  },
671
720
  popovertarget: a,
672
721
  popovertargetaction: "hide",
673
- ...i,
722
+ ...n,
674
723
  children: e
675
724
  }
676
725
  );
677
726
  }
678
- ), be = Object.assign(xe, {
727
+ ), xe = Object.assign(be, {
679
728
  displayName: "ReperePopover.AcknowledgeButton"
680
- }), X = b(({ children: e = "×", ...t }, o) => {
681
- const r = I()?.popoverId;
729
+ }), Y = x(({ children: e = "×", ...t }, o) => {
730
+ const s = I()?.popoverId;
682
731
  return /* @__PURE__ */ g(
683
732
  "button",
684
733
  {
685
734
  ref: o,
686
- popovertarget: r,
735
+ popovertarget: s,
687
736
  popovertargetaction: "hide",
688
737
  "aria-label": "Close",
689
738
  ...t,
@@ -691,76 +740,76 @@ const xe = b(
691
740
  }
692
741
  );
693
742
  });
694
- X.displayName = "ReperePopover.CloseButton";
695
- const Y = b(
743
+ Y.displayName = "ReperePopover.CloseButton";
744
+ const U = x(
696
745
  ({ children: e, ...t }, o) => /* @__PURE__ */ g("div", { ref: o, ...t, children: e })
697
746
  );
698
- Y.displayName = "ReperePopover.Content";
699
- const F = b(
747
+ U.displayName = "ReperePopover.Content";
748
+ const _ = x(
700
749
  ({ children: e, ...t }, o) => /* @__PURE__ */ g("div", { ref: o, ...t, children: e })
701
750
  );
702
- F.displayName = "ReperePopover.Footer";
703
- const Pe = b(
704
- ({ children: e, as: t, ...o }, i) => {
705
- const s = I()?.beaconId || "unknown";
706
- return /* @__PURE__ */ g(t || "h3", { ref: i, id: `repere-popover-${s}`, ...o, children: e });
751
+ _.displayName = "ReperePopover.Footer";
752
+ const Pe = x(
753
+ ({ children: e, as: t, ...o }, n) => {
754
+ const r = I()?.beaconId || "unknown";
755
+ return /* @__PURE__ */ g(t || "h3", { ref: n, id: `repere-popover-${r}`, ...o, children: e });
707
756
  }
708
- ), Ce = Object.assign(Pe, {
757
+ ), ke = Object.assign(Pe, {
709
758
  displayName: "ReperePopover.Title"
710
- }), Le = Object.assign(j, {
711
- Title: Ce,
712
- Content: Y,
713
- Footer: F,
714
- AcknowledgeButton: be,
715
- CloseButton: X
716
- }), ke = b(
759
+ }), Be = Object.assign(X, {
760
+ Title: ke,
761
+ Content: U,
762
+ Footer: _,
763
+ AcknowledgeButton: xe,
764
+ CloseButton: Y
765
+ }), Ce = x(
717
766
  ({
718
767
  children: e,
719
768
  as: t,
720
769
  style: o,
721
- disableAnimation: i,
722
- ...r
723
- }, s) => {
770
+ disableAnimation: n,
771
+ ...s
772
+ }, r) => {
724
773
  const {
725
- calculatedPosition: n,
774
+ calculatedPosition: i,
726
775
  beaconId: a,
727
776
  triggerAnimation: l,
728
777
  triggerDismissAnimation: c,
729
778
  isDismissing: d,
730
- popoverId: f
731
- } = I(), p = t || "button", h = w(() => !t || t === "button" ? M.button : M.create(p), [t, p]);
732
- if (!n) return null;
779
+ popoverId: h
780
+ } = I(), p = t || "button", v = w(() => !t || t === "button" ? M.button : M.create(p), [t, p]);
781
+ if (!i) return null;
733
782
  const u = {
734
- position: n.position,
735
- top: n.top,
736
- left: n.left,
737
- zIndex: n.zIndex,
783
+ position: i.position,
784
+ top: i.top,
785
+ left: i.left,
786
+ zIndex: i.zIndex,
738
787
  pointerEvents: "auto",
739
788
  cursor: "pointer",
740
789
  anchorName: `--repere-trigger-${a}`
741
- }, x = o ? { ...u, ...o } : u, k = !i && (l || c), P = {
742
- ref: s,
743
- popovertarget: f,
790
+ }, b = o ? { ...u, ...o } : u, C = !n && (l || c), P = {
791
+ ref: r,
792
+ popovertarget: h,
744
793
  "aria-label": `Beacon trigger for ${a}`,
745
794
  "data-repere-trigger": "",
746
- ...r
795
+ ...s
747
796
  };
748
- if (k) {
797
+ if (C) {
749
798
  const y = d && c ? c : l;
750
799
  if (!y) return null;
751
- const R = se(
752
- n.translate,
800
+ const R = re(
801
+ i.translate,
753
802
  y.variants
754
803
  );
755
804
  return /* @__PURE__ */ g(
756
- h,
805
+ v,
757
806
  {
758
807
  initial: "initial",
759
808
  animate: d ? "exit" : "animate",
760
809
  variants: R,
761
810
  transition: y.transition,
762
811
  ...P,
763
- style: x,
812
+ style: b,
764
813
  children: e
765
814
  }
766
815
  );
@@ -770,20 +819,20 @@ const Pe = b(
770
819
  {
771
820
  ...P,
772
821
  style: {
773
- ...x,
774
- translate: `${n.translate.x} ${n.translate.y}`
822
+ ...b,
823
+ translate: `${i.translate.x} ${i.translate.y}`
775
824
  },
776
825
  children: e
777
826
  }
778
827
  );
779
828
  }
780
- ), Be = Object.assign(ke, {
829
+ ), Le = Object.assign(Ce, {
781
830
  displayName: "RepereTrigger"
782
831
  });
783
832
  export {
784
- v as Animation,
833
+ f as Animation,
785
834
  $e as Beacons,
786
835
  m as Position,
787
- Le as ReperePopover,
788
- Be as RepereTrigger
836
+ Be as ReperePopover,
837
+ Le as RepereTrigger
789
838
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@repere/react",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "exports": {
@@ -13,6 +13,9 @@
13
13
  "files": [
14
14
  "dist"
15
15
  ],
16
+ "dependencies": {
17
+ "@repere/core": "0.1.1"
18
+ },
16
19
  "peerDependencies": {
17
20
  "motion": "^12.0.0",
18
21
  "react": "^18.0.0 || ^19.0.0",
@@ -27,8 +30,7 @@
27
30
  "react": "^19.2.3",
28
31
  "react-dom": "^19.2.3",
29
32
  "vite": "^7.3.0",
30
- "vite-plugin-dts": "^4.5.4",
31
- "@repere/core": "0.1.0"
33
+ "vite-plugin-dts": "^4.5.4"
32
34
  },
33
35
  "keywords": [
34
36
  "react",