fansunited-frontend-components 0.0.52 → 0.0.53

package/Betslip.js

@@ -1,4 +1,4 @@
-import { M as o } from "./chunks/main-DDb9jezz.js";
+import { M as o } from "./chunks/main-C7QFqjXA.js";
 const i = o;
 export {
   i as Betslip

package/Predictor.js

@@ -4,7 +4,7 @@ import we, { createContext as _t, useContext as _e, useState as F, useCallback a
 import { l as ue, a as he, e as le, B as u, f as Re, b as xe, c as ye, g as Ut, C as Kt, i as Gr, u as hl, k as fs, d as fl } from "./chunks/PrizeCard-DgHyperX.js";
 import { P as ml } from "./chunks/Portal-BQilulgu.js";
 import { createPortal as gl } from "react-dom";
-import { b as Vn, M as xl } from "./chunks/main-DDb9jezz.js";
+import { b as Vn, M as xl } from "./chunks/main-C7QFqjXA.js";
 import { u as yl, d as bl, b as vl, e as Sl, o as Cl } from "./chunks/index-5MPtbA_r.js";
 import { S as wl } from "./chunks/Stack-INH9bhkC.js";
 import { F as kl, C as Tl } from "./chunks/FormControl-COjw1gQd.js";

package/README.md

@@ -3459,8 +3459,7 @@ A floating betslip component that collects selections from any external source a
 
 ```tsx
 import React from "react";
-import { Betslip } from "fansunited-frontend-components";
-import { betslipApi } from "fansunited-frontend-core";
+import { Betslip, betslipApi } from "fansunited-frontend-components";
 import { FansUnitedSDK } from "fansunited-sdk-esm";
 
 const sdk = FansUnitedSDK({ /* your config */ });
@@ -3532,10 +3531,12 @@ type BetslipPosition =
 
 #### Command Bus (`betslipApi`)
 
-The betslip exposes a singleton command bus for external code to manage selections without needing a direct reference to the React component.
+The betslip exposes a singleton command bus for external code to manage selections and read betslip state without needing a direct reference to the React component.
+
+> **Important:** Always import `betslipApi` from `fansunited-frontend-components`. The component bundles its own singleton instance — importing from the components package guarantees your code and the widget share the same bus.
 
 ```tsx
-import { betslipApi } from "fansunited-frontend-core";
+import { betslipApi } from "fansunited-frontend-components";
 
 // Add or replace a selection (same eventId + market = outcome replaced)
 betslipApi.setSelection("fb:m:451678:FT_1X2:1");
@@ -3556,11 +3557,43 @@ betslipApi.removeSelection("fb:m:451678:FT_1X2:1");
 | `market`   | `FT_1X2`, `DOUBLE_CHANCE`, `OVER_GOALS_2_5`, `CORRECT_SCORE`, `PLAYER_SCORE_FIRST_GOAL` |
 | `outcome`  | `1` (home), `x` (draw), `2` (away), `1x`, `yes`, `no`, `1-2` (correct score) |
 
+**Reading state:**
+
+`betslipApi.getState()` returns a snapshot of the current betslip state. `betslipApi.subscribe()` lets you react to every change — useful for syncing a selection count badge, enabling a custom CTA elsewhere on the page, or forwarding stake changes to your own backend.
+
+```tsx
+import { betslipApi } from "fansunited-frontend-components";
+import type { BetslipState } from "fansunited-frontend-components";
+
+// One-shot read
+const { selections, stake, totalOdds } = betslipApi.getState();
+
+// Reactive — fires on every selection, stake, or odds change; returns unsubscribe
+const unsubscribe = betslipApi.subscribe((state: BetslipState) => {
+  setBadgeCount(state.selections.length);
+});
+
+// Stop listening
+unsubscribe();
+```
+
+**`BetslipState` shape:**
+
+```ts
+interface BetslipState {
+  selections: BetslipSelectionInput[]; // raw inputs (same shape as setSelection input)
+  stake: number;                        // parsed numeric stake (0 when empty)
+  totalOdds: number;                    // product of all selection decimal odds (0 when no selections)
+}
+```
+
 **Pre-mount queuing:**
 
 Calls to `betslipApi.setSelection` made before the `<Betslip />` component has mounted are queued and automatically replayed once the widget finishes initializing. There is no need to delay external code to wait for the widget.
 
 ```tsx
+import { betslipApi } from "fansunited-frontend-components";
+
 // Safe to call before <Betslip /> is rendered
 betslipApi.setSelection("fb:m:451678:FT_1X2:1");