@sensiblestats/widget-react 0.7.0 → 0.7.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sensiblestats/widget-react
 
+## 0.7.2
+
+### Patch Changes
+
+- Redesign the betting insight card for clarity. The market/selection is now the visual hero, the odds token is unmistakable (legible `ODDS` label + larger value, boxed and tinted). Stats and scope chips are collapsed by default behind a `Show stats` toggle — the reason-to-bet prose carries the justification, and the numbers are one tap away. When expanded, all stat rows show at once (the old three-row `Show N more` cap is removed) and the `This League / All comps / H2H` scopes render as a segmented control. Add to slip stays visible whether stats are open or closed. Adds `showStats` / `hideStats` UI strings (en + tr) to `UiConfig`.
+
+## 0.7.1
+
+### Patch Changes
+
+- Give the add-to-slip button its own CTA color token (`--ss-w-cta` / `--ss-w-cta-ink`, gold in both themes) instead of reusing the brand accent, so the primary action stands out on the betting insight card.
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -53,6 +53,8 @@ var STRINGS = {
     retry: "Retry",
     showLess: "Show less",
     showMore: (n) => `Show ${n} more`,
+    showStats: "Show stats",
+    hideStats: "Hide stats",
     oddsLabel: "Odds",
     liveLabel: "Live",
     addToSlip: "Add to slip",
@@ -77,6 +79,8 @@ var STRINGS = {
     retry: "Tekrar dene",
     showLess: "Daha az g\xF6ster",
     showMore: (n) => `${n} tane daha g\xF6ster`,
+    showStats: "\u0130statistikleri g\xF6ster",
+    hideStats: "\u0130statistikleri gizle",
     oddsLabel: "Oran",
     liveLabel: "Canl\u0131",
     addToSlip: "Kupona ekle",
@@ -118,6 +122,8 @@ function normalizeUi(cfg) {
     retry: strings.retry,
     showLess: strings.showLess,
     showMore: strings.showMore,
+    showStats: strings.showStats,
+    hideStats: strings.hideStats,
     oddsLabel: strings.oddsLabel,
     liveLabel: strings.liveLabel,
     addToSlip: strings.addToSlip,
@@ -609,26 +615,40 @@ function AddToSlipButton({ it, slip, ui }) {
 
 // src/components/BettingInsightList.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var MAX_ROWS = 3;
-function StatRows({ stats, ui }) {
-  const [expanded, setExpanded] = (0, import_react5.useState)(false);
-  const shown = expanded ? stats : stats.slice(0, MAX_ROWS);
-  const overflow = stats.length - MAX_ROWS;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-rows", children: [
-    shown.map((s) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-row-lbl", children: s.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-row-dots", "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-row-num", children: s.value })
-    ] }, `${s.label}:${s.value}`)),
-    overflow > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "ss-w-bi-more", onClick: () => setExpanded((v) => !v), children: expanded ? ui?.showLess ?? "Show less" : (ui?.showMore ?? ((n) => `Show ${n} more`))(overflow) }) : null
-  ] });
+function StatRows({ stats }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ss-w-bi-rows", children: stats.map((s) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-row-lbl", children: s.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ss-w-bi-row-num", children: s.value })
+  ] }, `${s.label}:${s.value}`)) });
 }
-function ScopedStats({ scopes, ui }) {
+function ScopedStats({ scopes }) {
   const [active, setActive] = (0, import_react5.useState)(0);
   const current = scopes[active] ?? scopes[0] ?? { key: "", label: "", stats: [] };
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-scoped", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ss-w-bi-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { type: "button", className: "ss-w-bi-chip", "aria-pressed": i === active, onClick: () => setActive(i), children: s.label }, s.key)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatRows, { stats: current.stats, ui }, current.key)
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatRows, { stats: current.stats }, current.key)
+  ] });
+}
+function StatsDisclosure({ it, ui }) {
+  const [open, setOpen] = (0, import_react5.useState)(false);
+  const hasScopes = !!it.scopes && it.scopes.length >= 2;
+  const hasStats = hasScopes || it.stats.length > 0;
+  if (!hasStats) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "ss-w-bi-stats", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "ss-w-bi-toggle",
+        "aria-expanded": open,
+        onClick: () => setOpen((v) => !v),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: open ? ui?.hideStats ?? "Hide stats" : ui?.showStats ?? "Show stats" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `ss-w-bi-chev${open ? " ss-w-bi-chev-up" : ""}`, "aria-hidden": "true" })
+        ]
+      }
+    ),
+    open ? hasScopes ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScopedStats, { scopes: it.scopes }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatRows, { stats: it.stats }) : null
   ] });
 }
 function InsightCard({ it, ui, slip }) {
@@ -654,7 +674,7 @@ function InsightCard({ it, ui, slip }) {
       ] }) : null
     ] }),
     it.text ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ss-w-bi-text", children: it.text }) : null,
-    it.scopes && it.scopes.length >= 2 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScopedStats, { scopes: it.scopes, ui }) : it.stats.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatRows, { stats: it.stats, ui }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StatsDisclosure, { it, ui }),
     it.disclaimer ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "ss-w-bi-disc", children: it.disclaimer }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AddToSlipButton, { it, slip, ui })
   ] });
@@ -810,6 +830,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-root, .ss-w-root * { box-sizing: border-box; margin: 0; padding: 0; }
 .ss-w-root {
   --ss-w-accent: #17936a;
+  --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;
   --ss-w-ink: #14181d; --ss-w-faint: #6b7580; --ss-w-line: #e4e8ec;
   --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;
   --ss-w-radius: 16px; --ss-w-offset-x: 20px; --ss-w-offset-y: 20px;
@@ -818,16 +839,19 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 }
 @media (prefers-color-scheme: dark) {
   .ss-w-root[data-ss-w-theme="auto"] {
-    --ss-w-accent: #37c891; --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;
+    --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;
+    --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;
     --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;
   }
 }
 .ss-w-root[data-ss-w-theme="dark"] {
-  --ss-w-accent: #37c891; --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;
+  --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;
+  --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;
   --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;
 }
 .ss-w-root[data-ss-w-theme="light"] {
-  --ss-w-accent: #17936a; --ss-w-ink: #14181d; --ss-w-faint: #6b7580;
+  --ss-w-accent: #17936a; --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;
+  --ss-w-ink: #14181d; --ss-w-faint: #6b7580;
   --ss-w-line: #e4e8ec; --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;
 }
 
@@ -909,27 +933,29 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-bi-live { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #c0392b; border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; gap: 4px; flex: none; }
 .ss-w-bi-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
 .ss-w-bi-head { display: flex; align-items: flex-start; gap: 10px; }
-.ss-w-bi-mkt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
-.ss-w-bi-market { font-size: 13px; font-weight: 660; line-height: 1.3; color: var(--ss-w-ink); }
-.ss-w-bi-sel { font-size: 11px; line-height: 1.3; color: var(--ss-w-faint); }
-.ss-w-bi-odds { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 24%, var(--ss-w-line)); border-radius: 8px; padding: 3px 9px; min-width: 56px; }
-.ss-w-bi-odds-cap { font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ss-w-faint); }
-.ss-w-bi-odds b { font-size: 15px; font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.15; }
+.ss-w-bi-mkt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.ss-w-bi-market { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }
+.ss-w-bi-sel { font-size: 12px; line-height: 1.3; color: var(--ss-w-faint); }
+.ss-w-bi-odds { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 10px; padding: 4px 11px; min-width: 62px; }
+.ss-w-bi-odds-cap { font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }
+.ss-w-bi-odds b { font-size: 19px; font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.1; }
 .ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }
-.ss-w-bi-text { font-size: 12px; color: var(--ss-w-ink); }
+.ss-w-bi-text { font-size: 12px; line-height: 1.45; color: var(--ss-w-ink); }
+.ss-w-bi-stats { display: flex; flex-direction: column; gap: 8px; }
+.ss-w-bi-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 0; cursor: pointer; }
+.ss-w-bi-toggle:hover { text-decoration: underline; }
+.ss-w-bi-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
+.ss-w-bi-chev-up { transform: translateY(1px) rotate(-135deg); }
 .ss-w-bi-rows { display: flex; flex-direction: column; }
-.ss-w-bi-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; border-top: 1px solid var(--ss-w-line); }
+.ss-w-bi-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--ss-w-line); }
 .ss-w-bi-row:first-child { border-top: none; }
-.ss-w-bi-row-lbl { font-size: 11px; color: var(--ss-w-faint); min-width: 0; }
-.ss-w-bi-row-dots { flex: 1; border-bottom: 1px dotted var(--ss-w-line); transform: translateY(-3px); min-width: 12px; }
-.ss-w-bi-row-num { font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12.5px; flex: none; color: var(--ss-w-ink); }
-.ss-w-bi-more { align-self: flex-start; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 11px; font-weight: 560; padding: 2px 0; cursor: pointer; }
-.ss-w-bi-more:hover { text-decoration: underline; }
+.ss-w-bi-row-lbl { font-size: 11.5px; color: var(--ss-w-faint); min-width: 0; }
+.ss-w-bi-row-num { font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; flex: none; color: var(--ss-w-ink); }
 .ss-w-bi-disc { font-size: 10px; font-style: italic; color: var(--ss-w-faint); }
-.ss-w-bi-scoped { display: flex; flex-direction: column; gap: 6px; }
-.ss-w-bi-scopes { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
-.ss-w-bi-chip { font-size: 11px; font-weight: 550; border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 3px 10px; color: var(--ss-w-ink); background: var(--ss-w-bubble); cursor: pointer; }
-.ss-w-bi-chip[aria-pressed="true"] { color: #fff; background: var(--ss-w-accent); border-color: var(--ss-w-accent); }
+.ss-w-bi-scoped { display: flex; flex-direction: column; gap: 8px; }
+.ss-w-bi-scopes { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; align-self: flex-start; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 2px; }
+.ss-w-bi-chip { font-size: 11px; font-weight: 600; border: none; border-radius: 7px; padding: 4px 10px; color: var(--ss-w-faint); background: none; cursor: pointer; }
+.ss-w-bi-chip[aria-pressed="true"] { color: var(--ss-w-ink); background: var(--ss-w-panel); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
 
 /* action buttons */
 .ss-w-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
@@ -956,7 +982,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* add to slip */
 .ss-w-slip { position: relative; display: flex; }
-.ss-w-slip-btn { font-size: 11.5px; font-weight: 620; color: #fff; background: var(--ss-w-accent); border: 1px solid var(--ss-w-accent); border-radius: 14px; padding: 5px 12px; cursor: pointer; }
+.ss-w-slip-btn { font-size: 11.5px; font-weight: 620; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); border: 1px solid var(--ss-w-cta); border-radius: 14px; padding: 5px 12px; cursor: pointer; }
 .ss-w-slip-btn:disabled { opacity: .6; cursor: default; background: var(--ss-w-bubble); color: var(--ss-w-faint); border-color: var(--ss-w-line); }
 .ss-w-toast { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1; max-width: 100%; font-size: 11px; font-weight: 560; border-radius: 10px; padding: 5px 10px; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
 .ss-w-toast-success { color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }