react-raffle-picker 0.2.1 → 0.2.2

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 (4) hide show
  1. package/dist/index.cjs +12 -11
  2. package/dist/index.mjs +12 -11
  3. package/dist/styles.css +18 -11
  4. package/package.json +4 -1
package/dist/index.cjs CHANGED
@@ -429,25 +429,26 @@ function CountdownRunning({ seconds, className, style, children }) {
429
429
  //#region src/components/RafflePick/RafflePickSlots.tsx
430
430
  const pickRandom = (pool) => pool[Math.floor(Math.random() * pool.length)] ?? "";
431
431
  const SLOT_BASE_CSS = `
432
- .rrp-slot{display:inline-block;overflow:hidden;height:1em;line-height:1em;vertical-align:baseline}
433
- .rrp-slot__col{display:flex;flex-direction:column;transform:translateY(-1em);animation:rrp-slot-reel var(--rrp-tick,80ms) linear infinite}
434
- .rrp-slot__cell{display:block;height:1em;line-height:1em}
435
- .rrp-slot[data-stopped] .rrp-slot__col{animation:none;transform:translateY(-1em)}
436
- @keyframes rrp-slot-reel{from{transform:translateY(-1em)}to{transform:translateY(-2em)}}
432
+ .rrp-slot{display:inline-block;position:relative;overflow:hidden;vertical-align:baseline}
433
+ .rrp-slot__col{position:absolute;top:0;left:0;right:0;height:300%;transform:translate3d(0,-33.3333%,0);animation:rrp-slot-reel var(--rrp-tick,80ms) linear infinite;will-change:transform}
434
+ .rrp-slot__cell{height:33.3333%;display:grid;place-items:center;padding:0;margin:0;box-sizing:border-box;text-align:center}
435
+ .rrp-slot[data-stopped] .rrp-slot__col{animation:none;transform:translate3d(0,-33.3333%,0)}
436
+ @keyframes rrp-slot-reel{from{transform:translate3d(0,-33.3333%,0)}to{transform:translate3d(0,-66.6666%,0)}}
437
437
  `;
438
- let slotStylesInjected = false;
438
+ const SLOT_STYLES_VERSION = "4";
439
439
  const injectSlotStyles = () => {
440
- if (slotStylesInjected) return;
441
440
  if (typeof document === "undefined") return;
442
- if (document.querySelector("style[data-rrp-slot-base]")) {
443
- slotStylesInjected = true;
441
+ const existing = document.querySelector("style[data-rrp-slot-base]");
442
+ if (existing) {
443
+ if (existing.getAttribute("data-rrp-slot-base") === SLOT_STYLES_VERSION) return;
444
+ existing.textContent = SLOT_BASE_CSS;
445
+ existing.setAttribute("data-rrp-slot-base", SLOT_STYLES_VERSION);
444
446
  return;
445
447
  }
446
448
  const tag = document.createElement("style");
447
- tag.setAttribute("data-rrp-slot-base", "");
449
+ tag.setAttribute("data-rrp-slot-base", SLOT_STYLES_VERSION);
448
450
  tag.textContent = SLOT_BASE_CSS;
449
451
  document.head.appendChild(tag);
450
- slotStylesInjected = true;
451
452
  };
452
453
  const makeRefs = () => ({
453
454
  root: null,
package/dist/index.mjs CHANGED
@@ -428,25 +428,26 @@ function CountdownRunning({ seconds, className, style, children }) {
428
428
  //#region src/components/RafflePick/RafflePickSlots.tsx
429
429
  const pickRandom = (pool) => pool[Math.floor(Math.random() * pool.length)] ?? "";
430
430
  const SLOT_BASE_CSS = `
431
- .rrp-slot{display:inline-block;overflow:hidden;height:1em;line-height:1em;vertical-align:baseline}
432
- .rrp-slot__col{display:flex;flex-direction:column;transform:translateY(-1em);animation:rrp-slot-reel var(--rrp-tick,80ms) linear infinite}
433
- .rrp-slot__cell{display:block;height:1em;line-height:1em}
434
- .rrp-slot[data-stopped] .rrp-slot__col{animation:none;transform:translateY(-1em)}
435
- @keyframes rrp-slot-reel{from{transform:translateY(-1em)}to{transform:translateY(-2em)}}
431
+ .rrp-slot{display:inline-block;position:relative;overflow:hidden;vertical-align:baseline}
432
+ .rrp-slot__col{position:absolute;top:0;left:0;right:0;height:300%;transform:translate3d(0,-33.3333%,0);animation:rrp-slot-reel var(--rrp-tick,80ms) linear infinite;will-change:transform}
433
+ .rrp-slot__cell{height:33.3333%;display:grid;place-items:center;padding:0;margin:0;box-sizing:border-box;text-align:center}
434
+ .rrp-slot[data-stopped] .rrp-slot__col{animation:none;transform:translate3d(0,-33.3333%,0)}
435
+ @keyframes rrp-slot-reel{from{transform:translate3d(0,-33.3333%,0)}to{transform:translate3d(0,-66.6666%,0)}}
436
436
  `;
437
- let slotStylesInjected = false;
437
+ const SLOT_STYLES_VERSION = "4";
438
438
  const injectSlotStyles = () => {
439
- if (slotStylesInjected) return;
440
439
  if (typeof document === "undefined") return;
441
- if (document.querySelector("style[data-rrp-slot-base]")) {
442
- slotStylesInjected = true;
440
+ const existing = document.querySelector("style[data-rrp-slot-base]");
441
+ if (existing) {
442
+ if (existing.getAttribute("data-rrp-slot-base") === SLOT_STYLES_VERSION) return;
443
+ existing.textContent = SLOT_BASE_CSS;
444
+ existing.setAttribute("data-rrp-slot-base", SLOT_STYLES_VERSION);
443
445
  return;
444
446
  }
445
447
  const tag = document.createElement("style");
446
- tag.setAttribute("data-rrp-slot-base", "");
448
+ tag.setAttribute("data-rrp-slot-base", SLOT_STYLES_VERSION);
447
449
  tag.textContent = SLOT_BASE_CSS;
448
450
  document.head.appendChild(tag);
449
- slotStylesInjected = true;
450
451
  };
451
452
  const makeRefs = () => ({
452
453
  root: null,
package/dist/styles.css CHANGED
@@ -4,29 +4,36 @@
4
4
 
5
5
  .rrp-slot {
6
6
  display: inline-block;
7
+ position: relative;
7
8
  overflow: hidden;
8
- height: 1em;
9
- line-height: 1em;
10
9
  vertical-align: baseline;
11
10
  }
12
11
  .rrp-slot__col {
13
- display: flex;
14
- flex-direction: column;
15
- transform: translateY(-1em);
12
+ position: absolute;
13
+ top: 0;
14
+ left: 0;
15
+ right: 0;
16
+ height: 300%;
17
+ transform: translate3d(0, -33.3333%, 0);
16
18
  animation: rrp-slot-reel var(--rrp-tick, 80ms) linear infinite;
19
+ will-change: transform;
17
20
  }
18
21
  .rrp-slot__cell {
19
- display: block;
20
- height: 1em;
21
- line-height: 1em;
22
+ height: 33.3333%;
23
+ display: grid;
24
+ place-items: center;
25
+ padding: 0;
26
+ margin: 0;
27
+ box-sizing: border-box;
28
+ text-align: center;
22
29
  }
23
30
  .rrp-slot[data-stopped] .rrp-slot__col {
24
31
  animation: none;
25
- transform: translateY(-1em);
32
+ transform: translate3d(0, -33.3333%, 0);
26
33
  }
27
34
  @keyframes rrp-slot-reel {
28
- from { transform: translateY(-1em); }
29
- to { transform: translateY(-2em); }
35
+ from { transform: translate3d(0, -33.3333%, 0); }
36
+ to { transform: translate3d(0, -66.6666%, 0); }
30
37
  }
31
38
 
32
39
  /* Value animations: opt-in via <RafflePick.Value animation="..." /> */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-raffle-picker",
3
- "version": "0.2.1",
3
+ "version": "0.2.2",
4
4
  "description": "Headless React raffle picker for giveaways, winner draws, countdowns, and slot-machine UIs.",
5
5
  "type": "module",
6
6
  "publishConfig": {
@@ -111,5 +111,8 @@
111
111
  "typescript-eslint": "^8.58.2",
112
112
  "vite": "^8.0.8",
113
113
  "vitest": "^4.1.4"
114
+ },
115
+ "volta": {
116
+ "node": "22.12.0"
114
117
  }
115
118
  }