@agg-market/ui 0.0.1

package/dist/chunk-2PGUPOXY.mjs

@@ -0,0 +1,285 @@
+import {
+  Settlement
+} from "./chunk-J7OETCZ7.mjs";
+import {
+  PlaceOrder
+} from "./chunk-5MN6ZNFA.mjs";
+import {
+  EventListItemDetails
+} from "./chunk-4NK2FNAG.mjs";
+import {
+  MarketDetails
+} from "./chunk-7CD7GIZC.mjs";
+import {
+  Typography
+} from "./chunk-DQ6XFBYJ.mjs";
+import {
+  Card
+} from "./chunk-YUIZZ6XE.mjs";
+import {
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/pages/event-market/index.tsx
+import { useEffect, useMemo, useState } from "react";
+import { useEvent, useLabels } from "@agg-market/hooks";
+import dayjs from "dayjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+var getMarketDateValue = (market, fallbackIndex) => {
+  var _a, _b, _c;
+  const candidateDate = (_c = (_b = (_a = market.endDate) != null ? _a : market.startDate) != null ? _b : market.creationDate) != null ? _c : null;
+  if (!candidateDate)
+    return Number.MAX_SAFE_INTEGER - 1 + fallbackIndex;
+  const parsedDate = dayjs(candidateDate);
+  if (!parsedDate.isValid()) {
+    return Number.MAX_SAFE_INTEGER - 1 + fallbackIndex;
+  }
+  return parsedDate.valueOf();
+};
+var resolveHeroMarketId = (event, heroMarketId) => {
+  var _a, _b;
+  if (!((_a = event == null ? void 0 : event.markets) == null ? void 0 : _a.length))
+    return void 0;
+  if (heroMarketId) {
+    const matchingHeroMarket = event.markets.find((market) => market.id === heroMarketId);
+    if (matchingHeroMarket)
+      return matchingHeroMarket.id;
+  }
+  return (_b = event.markets[0]) == null ? void 0 : _b.id;
+};
+var buildHeroEvent = (event, heroMarketId) => {
+  if (!heroMarketId)
+    return void 0;
+  const heroMarket = event.markets.find((market) => market.id === heroMarketId);
+  if (!heroMarket)
+    return void 0;
+  return __spreadProps(__spreadValues({}, event), {
+    markets: [heroMarket]
+  });
+};
+var resolveDetailedMarkets = (event, heroMarketId) => {
+  return event.markets.filter((market) => market.id !== heroMarketId).map((market, index) => ({
+    market,
+    index
+  })).sort((leftItem, rightItem) => {
+    return getMarketDateValue(leftItem.market, leftItem.index) - getMarketDateValue(rightItem.market, rightItem.index);
+  }).map((item) => item.market);
+};
+var resolveInitialExpandedMarketId = (detailedMarkets, defaultExpandedMarketId) => {
+  var _a, _b;
+  if (!detailedMarkets.length)
+    return null;
+  if (defaultExpandedMarketId) {
+    const matchingMarket = detailedMarkets.find((market) => market.id === defaultExpandedMarketId);
+    if (matchingMarket)
+      return matchingMarket.id;
+  }
+  return (_b = (_a = detailedMarkets[0]) == null ? void 0 : _a.id) != null ? _b : null;
+};
+var EventMarketPageUnavailableState = ({
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      className: "rounded-agg-xl border border-agg-separator bg-agg-secondary p-6 shadow-none hover:shadow-none",
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventMarketPage.unavailableAria,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "title", children: labels.eventMarketPage.unavailableTitle }),
+        /* @__PURE__ */ jsx(Typography, { variant: "meta", children: labels.eventMarketPage.unavailableDescription })
+      ] })
+    }
+  );
+};
+var EventMarketPageLoadingState = ({
+  placeOrder,
+  settlement,
+  classNames
+}) => {
+  const labels = useLabels();
+  const fallbackSettlement = settlement != null ? settlement : {
+    sectionLabel: labels.trading.settlementSection,
+    question: labels.eventMarketPage.loadingSettlementQuestion,
+    differencesTitle: labels.eventMarketPage.loadingSettlementDifferencesTitle,
+    differences: [labels.eventMarketPage.loadingSettlementPlaceholder],
+    venues: [
+      {
+        venue: "polymarket",
+        description: labels.eventMarketPage.loadingSettlementPlaceholder
+      }
+    ]
+  };
+  return /* @__PURE__ */ jsx("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "mx-auto flex w-full max-w-[1200px] flex-col gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
+        classNames == null ? void 0 : classNames.content
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
+          /* @__PURE__ */ jsx(
+            EventListItemDetails,
+            {
+              isLoading: true,
+              classNames: {
+                root: classNames == null ? void 0 : classNames.hero
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: [
+            /* @__PURE__ */ jsx(MarketDetails, { isLoading: true, isOpened: true, classNames: { root: "w-full" } }),
+            /* @__PURE__ */ jsx(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } }),
+            /* @__PURE__ */ jsx(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
+          /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
+          placeOrder ? /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.mobileTrade })) }) : null
+        ] }),
+        placeOrder ? /* @__PURE__ */ jsx(
+          "aside",
+          {
+            className: cn(
+              "hidden w-full shrink-0 lg:sticky lg:top-6 lg:block lg:w-[343px]",
+              classNames == null ? void 0 : classNames.sidebar
+            ),
+            children: /* @__PURE__ */ jsx(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.trade }))
+          }
+        ) : null
+      ]
+    }
+  ) });
+};
+var EventMarketPageContent = ({
+  event,
+  heroMarketId,
+  defaultExpandedMarketId,
+  expandedMarketId,
+  onExpandedMarketChange,
+  heroDefaultTimeRange,
+  placeOrder,
+  settlement,
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  const resolvedHeroMarketId = useMemo(() => {
+    return resolveHeroMarketId(event, heroMarketId);
+  }, [event, heroMarketId]);
+  const heroEvent = useMemo(() => {
+    return buildHeroEvent(event, resolvedHeroMarketId);
+  }, [event, resolvedHeroMarketId]);
+  const detailedMarkets = useMemo(() => {
+    return resolveDetailedMarkets(event, resolvedHeroMarketId);
+  }, [event, resolvedHeroMarketId]);
+  const [internalExpandedMarketId, setInternalExpandedMarketId] = useState(() => {
+    return resolveInitialExpandedMarketId(detailedMarkets, defaultExpandedMarketId);
+  });
+  useEffect(() => {
+    if (typeof expandedMarketId === "undefined")
+      return;
+    setInternalExpandedMarketId(expandedMarketId);
+  }, [expandedMarketId]);
+  useEffect(() => {
+    if (typeof expandedMarketId !== "undefined")
+      return;
+    setInternalExpandedMarketId((currentExpandedMarketId) => {
+      if (currentExpandedMarketId && detailedMarkets.some((market) => market.id === currentExpandedMarketId)) {
+        return currentExpandedMarketId;
+      }
+      return resolveInitialExpandedMarketId(detailedMarkets, defaultExpandedMarketId);
+    });
+  }, [defaultExpandedMarketId, detailedMarkets, expandedMarketId]);
+  const resolvedExpandedMarketId = typeof expandedMarketId === "undefined" ? internalExpandedMarketId : expandedMarketId;
+  const handleExpandedMarketChange = (marketId, isOpened) => {
+    const nextExpandedMarketId = isOpened ? marketId : null;
+    if (typeof expandedMarketId === "undefined") {
+      setInternalExpandedMarketId(nextExpandedMarketId);
+    }
+    onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(nextExpandedMarketId);
+  };
+  if (!heroEvent || !event.markets.length) {
+    return /* @__PURE__ */ jsx(EventMarketPageUnavailableState, { ariaLabel });
+  }
+  return /* @__PURE__ */ jsx("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel != null ? ariaLabel : event.title, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "mx-auto flex w-full max-w-[1200px] flex-row gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
+        classNames == null ? void 0 : classNames.content
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
+          /* @__PURE__ */ jsx(
+            EventListItemDetails,
+            {
+              event: heroEvent,
+              defaultTimeRange: heroDefaultTimeRange,
+              classNames: {
+                root: classNames == null ? void 0 : classNames.hero
+              }
+            }
+          ),
+          detailedMarkets.length > 0 ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: detailedMarkets.map((market) => {
+            const isOpened = resolvedExpandedMarketId === market.id;
+            return /* @__PURE__ */ jsx(
+              MarketDetails,
+              {
+                event,
+                marketId: market.id,
+                isOpened,
+                defaultTab: "order-book",
+                ariaLabel: market.endDate && dayjs(market.endDate).isValid() ? labels.eventMarketPage.marketDetailsAriaByDate(
+                  dayjs(market.endDate).format("MMM D, YYYY")
+                ) : labels.eventMarketPage.marketDetailsAriaByQuestion(market.question),
+                onOpenChange: (nextIsOpened) => handleExpandedMarketChange(market.id, nextIsOpened)
+              },
+              market.id
+            );
+          }) }) : null,
+          settlement ? /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null,
+          settlement ? /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null
+        ] }),
+        placeOrder ? /* @__PURE__ */ jsx("aside", { className: cn("w-full lg:block lg:max-w-[360px]", classNames == null ? void 0 : classNames.sidebar), children: /* @__PURE__ */ jsx(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { className: classNames == null ? void 0 : classNames.trade })) }) : null
+      ]
+    }
+  ) });
+};
+var EventMarketPage = (props) => {
+  const hasEventProp = "event" in props && !!props.event;
+  const { event: fetchedEvent, isLoading: isFetchingEvent } = useEvent(
+    hasEventProp ? void 0 : props.eventId,
+    {
+      enabled: !props.isLoading && !hasEventProp && !!props.eventId
+    }
+  );
+  if (props.isLoading) {
+    return /* @__PURE__ */ jsx(EventMarketPageLoadingState, { placeOrder: props.placeOrder, settlement: props.settlement });
+  }
+  if ("event" in props && props.event) {
+    return /* @__PURE__ */ jsx(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: props.event }));
+  }
+  if (isFetchingEvent) {
+    return /* @__PURE__ */ jsx(
+      EventMarketPageLoadingState,
+      {
+        placeOrder: props.placeOrder,
+        settlement: props.settlement,
+        classNames: props.classNames
+      }
+    );
+  }
+  if (!fetchedEvent) {
+    return /* @__PURE__ */ jsx(EventMarketPageUnavailableState, { ariaLabel: props.ariaLabel });
+  }
+  return /* @__PURE__ */ jsx(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: fetchedEvent }));
+};
+EventMarketPage.displayName = "EventMarketPage";
+
+export {
+  EventMarketPage
+};

package/dist/chunk-3DV3D2LH.mjs

@@ -0,0 +1,155 @@
+import {
+  cn,
+  getMotionClassName
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/primitives/switch-button/index.tsx
+import { useEffect, useMemo, useState } from "react";
+import { useSdkUiConfig } from "@agg/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+var resolveActiveIndex = (options, value) => {
+  const activeIndex = options.findIndex((option) => option.value === value);
+  if (activeIndex >= 0)
+    return activeIndex;
+  return 0;
+};
+var resolveNextEnabledIndex = (options, currentIndex, direction) => {
+  if (options.length <= 1)
+    return currentIndex;
+  const step = direction === "next" ? 1 : -1;
+  for (let offset = 1; offset <= options.length; offset += 1) {
+    const candidateIndex = (currentIndex + step * offset + options.length) % options.length;
+    const candidate = options[candidateIndex];
+    if (candidate && !candidate.disabled) {
+      return candidateIndex;
+    }
+  }
+  return currentIndex;
+};
+var SwitchButton = ({
+  options,
+  value,
+  onValueChange,
+  ariaLabel,
+  className
+}) => {
+  const { enableAnimations } = useSdkUiConfig();
+  const activeIndex = useMemo(() => {
+    return resolveActiveIndex(options, value);
+  }, [options, value]);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [lastAnimatedIndex, setLastAnimatedIndex] = useState(activeIndex);
+  useEffect(() => {
+    if (lastAnimatedIndex === activeIndex) {
+      return;
+    }
+    setLastAnimatedIndex(activeIndex);
+    if (!enableAnimations) {
+      setIsAnimating(false);
+      return;
+    }
+    setIsAnimating(true);
+    const timeoutId = window.setTimeout(() => {
+      setIsAnimating(false);
+    }, 350);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [activeIndex, enableAnimations, lastAnimatedIndex]);
+  if (options.length === 0) {
+    return null;
+  }
+  const handleKeyDown = (event, optionIndex) => {
+    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+      return;
+    }
+    event.preventDefault();
+    const nextOptionIndex = resolveNextEnabledIndex(
+      options,
+      optionIndex,
+      event.key === "ArrowRight" ? "next" : "previous"
+    );
+    const nextOption = options[nextOptionIndex];
+    if (!nextOption || nextOption.disabled) {
+      return;
+    }
+    onValueChange(nextOption.value);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex min-w-0 rounded-agg-full bg-agg-secondary-hover font-agg-sans",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative grid min-w-0 flex-1 items-center",
+          style: {
+            gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))`
+          },
+          role: "tablist",
+          "aria-label": ariaLabel,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "pointer-events-none absolute inset-y-0 left-0 rounded-agg-full border-2 border-agg-primary bg-agg-secondary",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-transform duration-[450ms] ease-[cubic-bezier(0.77,0,0.175,1)]"
+                  )
+                ),
+                style: {
+                  width: `${100 / options.length}%`,
+                  transform: `translateX(${activeIndex * 100}%) scaleX(${isAnimating ? 1.08 : 1})`
+                },
+                "aria-hidden": "true"
+              }
+            ),
+            options.map((option, optionIndex) => {
+              var _a;
+              const isActive = optionIndex === activeIndex;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": isActive,
+                  "aria-label": (_a = option.ariaLabel) != null ? _a : void 0,
+                  tabIndex: isActive ? 0 : -1,
+                  disabled: option.disabled,
+                  className: cn(
+                    "relative z-10 min-w-0 rounded-agg-full px-5 py-1.5 font-agg-sans text-agg-base leading-agg-6 text-agg-foreground",
+                    getMotionClassName(enableAnimations, "transition-colors duration-300"),
+                    "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",
+                    "disabled:cursor-not-allowed disabled:text-agg-muted-foreground",
+                    isActive ? "font-agg-bold" : "font-agg-normal"
+                  ),
+                  onClick: () => {
+                    if (option.disabled || isActive) {
+                      return;
+                    }
+                    onValueChange(option.value);
+                  },
+                  onKeyDown: (event) => {
+                    handleKeyDown(event, optionIndex);
+                  },
+                  children: option.label
+                },
+                option.value
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+};
+SwitchButton.displayName = "SwitchButton";
+
+export {
+  SwitchButton
+};