@agg-market/ui 0.0.6 → 2.0.0

package/dist/{chunk-XELWY7SO.mjs → chunk-QYZKC7KG.mjs}

@@ -4,10 +4,10 @@ import {
   resolveOutcomeLabels,
   resolveOutcomesByVenue,
   resolveSeriesColor
-} from "./chunk-P23GR7NX.mjs";
+} from "./chunk-422MCIXV.mjs";
 import {
   Tabs
-} from "./chunk-LWTQD345.mjs";
+} from "./chunk-S3H63TQ5.mjs";
 import {
   getVenueSummary,
   normalizeProbability,
@@ -22,25 +22,25 @@ import {
   marketDetailsBaseCardClassName,
   marketDetailsDefaultIsOpened,
   orderBookRowLimitDefault
-} from "./chunk-JH5VMNDL.mjs";
+} from "./chunk-V52WSZHQ.mjs";
 import {
   LoadingIcon
-} from "./chunk-OGI343OV.mjs";
+} from "./chunk-IGPNIM2B.mjs";
 import {
   VenueLogo
-} from "./chunk-BLSHXIAH.mjs";
+} from "./chunk-D7JTOGYP.mjs";
 import {
   Typography
-} from "./chunk-DYEWXEEY.mjs";
+} from "./chunk-ERGNR6UQ.mjs";
 import {
   Card
-} from "./chunk-3O4U3E5I.mjs";
+} from "./chunk-FO2QCB4Z.mjs";
 import {
   LineChart
-} from "./chunk-VC7LTPQD.mjs";
+} from "./chunk-BN5VVHNV.mjs";
 import {
   SwitchButton
-} from "./chunk-JRS2M5GY.mjs";
+} from "./chunk-CTVMT3VL.mjs";
 import {
   __spreadProps,
   __spreadValues,
@@ -319,8 +319,8 @@ var MarketDetailsUnavailableState = ({
       role: "status",
       "aria-label": ariaLabel != null ? ariaLabel : labels.marketDetails.unavailableAria,
       children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 p-5", children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "title", children: labels.marketDetails.unavailableTitle }),
-        /* @__PURE__ */ jsx(Typography, { variant: "meta", children: labels.marketDetails.unavailableDescription })
+        /* @__PURE__ */ jsx(Typography, { variant: "body-large-strong", children: labels.marketDetails.unavailableTitle }),
+        /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.unavailableDescription })
       ] })
     }
   );
@@ -336,11 +336,11 @@ var OrderBookRows = ({
   const priceClassName = isAsks ? "text-agg-orderbook-ask" : "text-agg-orderbook-bid";
   const barClassName = isAsks ? "bg-agg-orderbook-ask/10" : "bg-agg-orderbook-bid/10";
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-xs leading-agg-4", children: title }),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption-caps", children: title }),
     rows.map((row, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[52px_1fr_1fr_52px] items-center gap-2 md:grid-cols-[88px_1fr_1fr_minmax(120px,220px)] md:gap-6", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 md:gap-3", children: [
-          /* @__PURE__ */ jsx(VenueLogo, { venue: row.venue, size: "xs" }),
+          /* @__PURE__ */ jsx(VenueLogo, { venue: row.venue, size: "small" }),
           /* @__PURE__ */ jsx(
             "span",
             {
@@ -374,11 +374,15 @@ var getOutcomeButtonClassName = ({
   isPositive,
   isActive
 }) => {
+  const defaultStateClassName = isPositive ? "border-[#18c15c]/50 bg-[#18c15c]/5 text-agg-foreground hover:bg-[#18c15c]/10" : "border-[#e5455f]/50 bg-[#e5455f]/5 text-agg-foreground hover:bg-[#e5455f]/10";
+  const activeStateClassName = isPositive ? "border-transparent bg-[#18c15c] text-agg-on-primary" : "border-transparent bg-[#e5455f] text-agg-on-primary";
   return cn(
     "h-auto min-h-10 flex-1 rounded-agg-full border px-4 py-1.5 text-agg-base leading-agg-6 shadow-none md:flex-none md:min-w-[168px]",
-    getMotionClassName(enableAnimations, "transition-all duration-300"),
-    isPositive ? "border-agg-orderbook-bid/50 bg-agg-orderbook-bid/5 text-agg-foreground" : "border-agg-orderbook-ask/50 bg-agg-orderbook-ask/5 text-agg-foreground",
-    isActive && (isPositive ? "border-agg-orderbook-bid" : "border-agg-orderbook-ask")
+    getMotionClassName(enableAnimations, "transition-all duration-300 ease-in-out"),
+    isActive ? activeStateClassName : defaultStateClassName,
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover",
+    "cursor-pointer disabled:cursor-not-allowed disabled:text-agg-muted-foreground",
+    isActive ? "font-agg-bold" : "font-agg-normal"
   );
 };
 var MarketDetailsContent = ({
@@ -585,7 +589,7 @@ var MarketDetailsContent = ({
   }, [labels, model]);
   const handleOutcomeKeyDown = (eventToHandle) => {
     var _a;
-    if (eventToHandle.key !== "ArrowLeft" && eventToHandle.key !== "ArrowRight") {
+    if ((eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowLeft" && (eventToHandle == null ? void 0 : eventToHandle.key) !== "ArrowRight") {
       return;
     }
     if (headerOutcomeItems.length <= 1)
@@ -597,9 +601,17 @@ var MarketDetailsContent = ({
     const nextIndex = activeIndex < 0 ? 0 : (activeIndex + direction + headerOutcomeItems.length) % headerOutcomeItems.length;
     setSelectedOutcomeLabel((_a = headerOutcomeItems[nextIndex]) == null ? void 0 : _a.label);
   };
-  const handleToggleExpanded = () => {
-    setIsOpened((prev) => !prev);
-    onOpenChange == null ? void 0 : onOpenChange(!isOpened);
+  const handleToggleExpanded = (event2) => {
+    if (event2 && "key" in event2 && (event2 == null ? void 0 : event2.key) !== "Enter" && (event2 == null ? void 0 : event2.key) !== " ") {
+      return;
+    }
+    event2 == null ? void 0 : event2.preventDefault();
+    event2 == null ? void 0 : event2.stopPropagation();
+    setIsOpened((prev) => {
+      const next = !prev;
+      onOpenChange == null ? void 0 : onOpenChange(next);
+      return next;
+    });
   };
   const handleGraphVenueToggle = (venue) => {
     setSelectedGraphVenue((currentVenue) => {
@@ -623,88 +635,101 @@ var MarketDetailsContent = ({
   return /* @__PURE__ */ jsxs(
     Card,
     {
-      className: cn(marketDetailsBaseCardClassName, classNames == null ? void 0 : classNames.root),
-      "aria-label": ariaLabel != null ? ariaLabel : model.title,
+      className: cn(
+        "w-full cursor-pointer rounded-agg-2xl text-left outline-none",
+        marketDetailsBaseCardClassName,
+        classNames == null ? void 0 : classNames.root
+      ),
+      "aria-expanded": isOpened,
+      "aria-controls": detailsContentId,
+      role: "button",
+      tabIndex: 0,
+      "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
+      onClick: handleToggleExpanded,
+      onKeyDown: handleToggleExpanded,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3 px-5 py-4", isOpened && "pb-3", classNames == null ? void 0 : classNames.header), children: [
-          /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              className: "flex w-full cursor-pointer items-center justify-between gap-4 rounded-agg-2xl text-left outline-none",
-              "aria-expanded": isOpened,
-              "aria-controls": detailsContentId,
-              "aria-label": isOpened ? labels.marketDetails.toggleCloseDetailsAria(model.title) : labels.marketDetails.toggleOpenDetailsAria(model.title),
-              onClick: handleToggleExpanded,
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
-                  model.image ? /* @__PURE__ */ jsx(
-                    "img",
-                    {
-                      src: model.image,
-                      alt: "",
-                      className: "size-12 rounded-agg-lg object-cover md:size-[60px]"
-                    }
-                  ) : null,
-                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
-                    /* @__PURE__ */ jsx(Typography, { as: "h3", variant: "title", className: "truncate text-agg-lg leading-agg-7", children: model.title }),
-                    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx(Typography, { variant: "meta", className: "truncate text-agg-sm leading-agg-5", children: model.subtitle }) })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx(
-                  Typography,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex flex-row items-center justify-between gap-3 px-5 py-4",
+              isOpened && "pb-3",
+              classNames == null ? void 0 : classNames.header
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3 md:gap-4", children: [
+                model.image ? /* @__PURE__ */ jsx(
+                  "img",
                   {
-                    as: "div",
-                    variant: "value",
-                    className: "shrink-0 text-agg-2xl font-agg-bold leading-agg-8",
-                    children: formatProbabilityPercent(headlineProbability)
+                    src: model.image,
+                    alt: "",
+                    className: "size-12 rounded-agg-lg object-cover md:size-[60px]"
                   }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "flex gap-2",
-              role: "tablist",
-              "aria-label": labels.marketDetails.marketOutcomesAria,
-              tabIndex: 0,
-              onKeyDown: handleOutcomeKeyDown,
-              children: headerOutcomeItems.map((item) => {
-                const isPositive = item.tone === "positive";
-                return /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    role: "tab",
-                    "aria-selected": item.label === selectedOutcomeLabel,
-                    tabIndex: item.label === selectedOutcomeLabel ? 0 : -1,
-                    className: getOutcomeButtonClassName({
-                      enableAnimations: config.enableAnimations,
-                      isPositive,
-                      isActive: item.label === selectedOutcomeLabel
-                    }),
-                    onClick: () => {
-                      setSelectedOutcomeLabel(item.label);
-                    },
-                    children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx(
-                        VenueLogo,
-                        {
-                          venue: isPositive ? "polymarket" : "probable",
-                          size: "xs"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(Typography, { className: "text-agg-base leading-agg-6", children: `${item.label} ${formatProbabilityCents(item.probability)}` })
-                    ] })
-                  },
-                  item.label
-                );
-              })
-            }
-          )
-        ] }),
+                ) : null,
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+                  /* @__PURE__ */ jsx(Typography, { as: "h3", variant: "body-large-strong", className: "truncate", children: model.title }),
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx(Typography, { variant: "label", className: "truncate text-agg-muted-foreground", children: model.subtitle }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(Typography, { as: "div", variant: "heading", className: "shrink-0", children: formatProbabilityPercent(headlineProbability) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex gap-2",
+                  role: "tablist",
+                  "aria-label": labels.marketDetails.marketOutcomesAria,
+                  tabIndex: 0,
+                  onKeyDown: (e) => handleOutcomeKeyDown(e),
+                  children: headerOutcomeItems.map((item) => {
+                    const isPositive = item.tone === "positive";
+                    const isActiveOutcome = item.label === selectedOutcomeLabel;
+                    return /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        role: "tab",
+                        "aria-selected": isActiveOutcome,
+                        tabIndex: isActiveOutcome ? 0 : -1,
+                        className: getOutcomeButtonClassName({
+                          enableAnimations: config.enableAnimations,
+                          isPositive,
+                          isActive: isActiveOutcome
+                        }),
+                        onClick: (e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          setSelectedOutcomeLabel(item.label);
+                        },
+                        children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx(
+                            VenueLogo,
+                            {
+                              venue: isPositive ? "polymarket" : "probable",
+                              size: "small",
+                              color: isActiveOutcome ? "var(--agg-color-on-primary)" : void 0
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Typography,
+                            {
+                              variant: isActiveOutcome ? "body-strong" : "body",
+                              className: cn(
+                                "text-agg-base leading-agg-6",
+                                isActiveOutcome ? "text-agg-on-primary" : "text-agg-foreground"
+                              ),
+                              children: `${item.label} ${formatProbabilityCents(item.probability)}`
+                            }
+                          )
+                        ] })
+                      },
+                      item.label
+                    );
+                  })
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -756,7 +781,7 @@ var MarketDetailsContent = ({
                           "aria-busy": true,
                           children: [
                             /* @__PURE__ */ jsx(LoadingIcon, {}),
-                            /* @__PURE__ */ jsx(Typography, { variant: "meta", children: labels.marketDetails.loadingOrderbookLabel })
+                            /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.marketDetails.loadingOrderbookLabel })
                           ]
                         }
                       ) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -804,9 +829,13 @@ var MarketDetailsContent = ({
                                         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover",
                                         isActiveVenue ? "border-agg-primary bg-agg-secondary" : "border-transparent bg-agg-secondary-hover"
                                       ),
-                                      onClick: () => handleGraphVenueToggle(item.venue),
+                                      onClick: (e) => {
+                                        e.preventDefault();
+                                        e.stopPropagation();
+                                        handleGraphVenueToggle(item.venue);
+                                      },
                                       children: [
-                                        /* @__PURE__ */ jsx(VenueLogo, { venue: item.venue, size: "xs" }),
+                                        /* @__PURE__ */ jsx(VenueLogo, { venue: item.venue, size: "small" }),
                                         /* @__PURE__ */ jsx("span", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: probability })
                                       ]
                                     },
@@ -851,7 +880,11 @@ var MarketDetailsContent = ({
                                       isActive ? "font-agg-bold text-agg-foreground" : "font-agg-normal text-agg-muted-foreground"
                                     ),
                                     "aria-pressed": isActive,
-                                    onClick: () => setSelectedTimeRange(timeRange),
+                                    onClick: (e) => {
+                                      e.preventDefault();
+                                      e.stopPropagation();
+                                      setSelectedTimeRange(timeRange);
+                                    },
                                     children: timeRange === "ALL" ? labels.eventItemDetails.allTimeRange : timeRange
                                   },
                                   timeRange
@@ -866,7 +899,7 @@ var MarketDetailsContent = ({
                         {
                           className: "flex items-center justify-between rounded-agg-xl bg-agg-secondary-hover px-4 py-3",
                           children: [
-                            /* @__PURE__ */ jsx(Typography, { variant: "meta", children: row.label }),
+                            /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-muted-foreground", children: row.label }),
                             /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-right", children: row.value })
                           ]
                         },