@agg-market/ui 0.0.1

package/dist/chunk-BNDFQPHF.mjs

@@ -0,0 +1,9 @@
+// src/primitives/icon/types.ts
+var getIconA11yProps = (title) => ({
+  role: title ? "img" : "presentation",
+  "aria-hidden": title ? void 0 : true
+});
+
+export {
+  getIconA11yProps
+};

package/dist/chunk-C4OI72SM.mjs

@@ -0,0 +1,14 @@
+// src/primitives/icon/icon.constants.ts
+var iconSizeClasses = {
+  xxs: "h-2 w-2",
+  xs: "h-3 w-3",
+  s: "h-4 w-4",
+  m: "h-6 w-6",
+  l: "h-8 w-8",
+  xl: "h-10 w-10",
+  xxl: "h-12 w-12"
+};
+
+export {
+  iconSizeClasses
+};

package/dist/chunk-CB2MLGCJ.mjs

@@ -0,0 +1,279 @@
+import {
+  formatCountLabel,
+  getVenueSummary,
+  normalizeProbability,
+  resolveEventListItemEvent,
+  resolveOutcomeTitle,
+  resolveTileImage,
+  resolveTileTitle,
+  resolveVenueLabel,
+  resolveVisibleOutcomes,
+  selectPrimaryVenueMarket
+} from "./chunk-PAQ542ER.mjs";
+import {
+  Badge
+} from "./chunk-MG243DSX.mjs";
+import {
+  Skeleton,
+  baseCardClassName
+} from "./chunk-NFYS557L.mjs";
+import {
+  VenueLogo
+} from "./chunk-LY6474C4.mjs";
+import {
+  Icon
+} from "./chunk-DA6KZWSK.mjs";
+import {
+  Typography
+} from "./chunk-DQ6XFBYJ.mjs";
+import {
+  Card
+} from "./chunk-YUIZZ6XE.mjs";
+import {
+  __objRest,
+  __spreadValues,
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/events/item/index.tsx
+import dayjs from "dayjs";
+import { useMemo } from "react";
+import { useEvent, useLabels, useSdkUiConfig } from "@agg-market/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EventListItemLoadingState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      view: "event-list-item",
+      className: classNames == null ? void 0 : classNames.root,
+      ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItem.loading
+    }
+  );
+};
+var EventListItemUnavailableState = ({
+  classNames,
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      className: cn(baseCardClassName, classNames == null ? void 0 : classNames.root),
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventItem.unavailableAria,
+      children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", classNames == null ? void 0 : classNames.header), children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "title", className: cn("truncate", classNames == null ? void 0 : classNames.title), children: labels.eventItem.unavailableTitle }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body", className: "text-agg-muted-foreground", children: labels.eventItem.unavailableDescription })
+      ] })
+    }
+  );
+};
+var EventListItemContent = ({
+  event,
+  title,
+  image,
+  showVenueLogo = true,
+  maxOutcomes = 2,
+  classNames,
+  venueInfo,
+  arbitrageByOutcomeId,
+  onClick,
+  ariaLabel
+}) => {
+  var _a;
+  const config = useSdkUiConfig();
+  const labels = useLabels();
+  const allVenueMarkets = useMemo(() => {
+    return event.markets.flatMap((market) => market.venueMarkets);
+  }, [event.markets]);
+  const primaryVenueMarket = useMemo(() => {
+    return selectPrimaryVenueMarket(allVenueMarkets);
+  }, [allVenueMarkets]);
+  const visibleOutcomes = useMemo(() => {
+    if (allVenueMarkets.length === 0)
+      return [];
+    return resolveVisibleOutcomes(allVenueMarkets, maxOutcomes);
+  }, [allVenueMarkets, maxOutcomes]);
+  const resolvedTitle = resolveTileTitle(event, primaryVenueMarket, title);
+  const resolvedImage = resolveTileImage(event, primaryVenueMarket, image);
+  const { marketCount, venueCount, singleVenue } = getVenueSummary(allVenueMarkets);
+  const venueLabel = resolveVenueLabel(singleVenue, venueInfo, labels);
+  const visibleVenueLogos = useMemo(() => {
+    return Array.from(new Set(allVenueMarkets.map((market) => market.venue))).slice(0, 4);
+  }, [allVenueMarkets]);
+  const resolvedVolume = typeof event.volume === "number" ? event.volume : (_a = primaryVenueMarket == null ? void 0 : primaryVenueMarket.volume) != null ? _a : void 0;
+  const volumeLabel = typeof resolvedVolume === "number" ? `${config.formatCompactCurrency(resolvedVolume)} ${labels.eventItem.volumeSuffix}` : "";
+  const handleKeyDown = (eventToHandle) => {
+    if (!onClick)
+      return;
+    if (eventToHandle.key === "Enter" || eventToHandle.key === " ") {
+      eventToHandle.preventDefault();
+      onClick();
+    }
+  };
+  const renderArbitrage = (value) => {
+    if (value == null)
+      return null;
+    if (Math.abs(value) < config.arbitrageThreshold)
+      return null;
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-baseline gap-1", "text-agg-success"), children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-success", children: config.formatPercent(value) }),
+      /* @__PURE__ */ jsx(Icon, { name: "triangle-up", size: "xxs", title: labels.eventItem.arbitrage })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(baseCardClassName, onClick && "cursor-pointer", classNames == null ? void 0 : classNames.root),
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onClick,
+      onKeyDown: handleKeyDown,
+      "aria-label": ariaLabel != null ? ariaLabel : resolvedTitle,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3", classNames == null ? void 0 : classNames.header), children: [
+          resolvedImage ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: resolvedImage,
+              alt: "",
+              className: cn("h-10 w-10", "rounded-agg-lg object-cover")
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "title",
+              className: cn(
+                "min-w-0 text-agg-base font-agg-bold leading-agg-6 whitespace-normal [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2] md:block md:truncate md:whitespace-nowrap",
+                classNames == null ? void 0 : classNames.title
+              ),
+              children: resolvedTitle
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.outcomes), children: visibleOutcomes.map((visibleOutcome) => {
+          const probability = normalizeProbability(visibleOutcome.outcome.price);
+          const showBadge = typeof probability === "number";
+          const arbitragePercent = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[visibleOutcome.outcome.id];
+          const outcomeTitle = resolveOutcomeTitle(visibleOutcome.outcome);
+          const formattedTitle = dayjs(outcomeTitle).isValid() ? dayjs(outcomeTitle).format("MMMM D, YYYY") : outcomeTitle;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "grid w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3",
+                classNames == null ? void 0 : classNames.outcomeRow
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "body",
+                    className: "min-w-0 truncate text-agg-sm leading-agg-5 md:text-agg-base md:leading-agg-6",
+                    children: formattedTitle
+                  }
+                ),
+                renderArbitrage(arbitragePercent),
+                showBadge ? /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    text: config.formatPercent(probability),
+                    prefix: showVenueLogo ? /* @__PURE__ */ jsx(VenueLogo, { venue: visibleOutcome.venue, size: "s" }) : void 0,
+                    size: "l",
+                    classNames: {
+                      root: cn(
+                        "h-9 min-w-[101px] justify-center px-4 text-agg-base leading-agg-6",
+                        classNames == null ? void 0 : classNames.badge
+                      )
+                    }
+                  }
+                ) : null
+              ]
+            },
+            `${visibleOutcome.market.id}-${visibleOutcome.outcome.id}`
+          );
+        }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between gap-2",
+              "text-agg-muted-foreground",
+              classNames == null ? void 0 : classNames.footer
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", "text-agg-sm leading-agg-5"), children: [
+                /* @__PURE__ */ jsx("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
+                  marketCount,
+                  labels.eventItem.marketSingular,
+                  labels.eventItem.marketPlural
+                ) }),
+                /* @__PURE__ */ jsx("span", { className: "text-agg-muted-foreground", children: "\xD7" }),
+                singleVenue ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 truncate text-agg-muted-foreground", children: [
+                  showVenueLogo ? /* @__PURE__ */ jsx(VenueLogo, { venue: singleVenue, size: "xs" }) : null,
+                  /* @__PURE__ */ jsx("span", { children: venueLabel })
+                ] }) : /* @__PURE__ */ jsx("span", { className: "truncate text-agg-muted-foreground", children: formatCountLabel(
+                  venueCount,
+                  labels.eventItem.venueSingular,
+                  labels.eventItem.venuePlural
+                ) }),
+                showVenueLogo && !singleVenue && visibleVenueLogos.length > 0 ? /* @__PURE__ */ jsx("span", { className: "flex items-center gap-1 overflow-hidden", children: visibleVenueLogos.map((venue) => /* @__PURE__ */ jsx(VenueLogo, { venue, size: "xs" }, venue)) }) : null
+              ] }),
+              volumeLabel ? /* @__PURE__ */ jsx(Typography, { variant: "meta", className: "text-agg-sm", children: volumeLabel }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var EventListItemByEventId = (_a) => {
+  var _b = _a, {
+    eventId
+  } = _b, rest = __objRest(_b, [
+    "eventId"
+  ]);
+  const {
+    event: fetchedEvent,
+    isError,
+    isLoading
+  } = useEvent(eventId, {
+    enabled: !!eventId
+  });
+  const resolvedEvent = useMemo(() => {
+    return resolveEventListItemEvent(fetchedEvent);
+  }, [fetchedEvent]);
+  if (!eventId) {
+    return /* @__PURE__ */ jsx(EventListItemUnavailableState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(EventListItemLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!resolvedEvent && !isError) {
+    return /* @__PURE__ */ jsx(EventListItemLoadingState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  if (!resolvedEvent) {
+    return /* @__PURE__ */ jsx(EventListItemUnavailableState, { classNames: rest.classNames, ariaLabel: rest.ariaLabel });
+  }
+  return /* @__PURE__ */ jsx(EventListItemContent, __spreadValues({ event: resolvedEvent }, rest));
+};
+var EventListItem = (props) => {
+  if (props.isLoading) {
+    return /* @__PURE__ */ jsx(EventListItemLoadingState, { classNames: props.classNames, ariaLabel: props.ariaLabel });
+  }
+  if ("event" in props && props.event) {
+    const _a = props, { event } = _a, rest = __objRest(_a, ["event"]);
+    return /* @__PURE__ */ jsx(EventListItemContent, __spreadValues({ event }, rest));
+  }
+  return /* @__PURE__ */ jsx(EventListItemByEventId, __spreadValues({}, props));
+};
+EventListItem.displayName = "EventListItem";
+
+export {
+  EventListItem
+};

package/dist/chunk-CKTAVEW2.mjs

@@ -0,0 +1,212 @@
+import {
+  CloseIcon
+} from "./chunk-VYNVBJK6.mjs";
+import {
+  AGG_ROOT_CLASS_NAME,
+  cn,
+  getMotionClassName
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/primitives/modal/index.tsx
+import * as Dialog from "@radix-ui/react-dialog";
+import { useSdkUiConfig, useLabels } from "@agg-market/hooks";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Modal = ({
+  open,
+  onOpenChange,
+  children,
+  "aria-label": _ariaLabel,
+  "aria-labelledby": _ariaLabelledBy
+}) => {
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, children });
+};
+var ModalContainer = ({
+  children,
+  maxWidth = "600px",
+  classNames,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) => {
+  const { rootClassName, enableAnimations } = useSdkUiConfig();
+  const overlayAnimationClassName = enableAnimations ? "motion-safe:data-[state=open]:animate-agg-modal-overlay-in motion-safe:data-[state=closed]:animate-agg-modal-overlay-out motion-reduce:animate-none" : void 0;
+  const panelAnimationClassName = enableAnimations ? "motion-safe:data-[state=open]:animate-agg-modal-panel-in motion-safe:data-[state=closed]:animate-agg-modal-panel-out motion-reduce:animate-none" : void 0;
+  return /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      Dialog.Overlay,
+      {
+        className: cn(
+          "fixed inset-0 z-agg-overlay bg-agg-overlay",
+          overlayAnimationClassName,
+          classNames == null ? void 0 : classNames.overlay
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog.Content,
+      {
+        className: cn(
+          "fixed inset-0 z-agg-modal",
+          "flex items-center justify-center p-4",
+          "sm:p-5",
+          classNames == null ? void 0 : classNames.content
+        ),
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        onCloseAutoFocus: (event) => {
+          event.preventDefault();
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              AGG_ROOT_CLASS_NAME,
+              rootClassName,
+              "flex w-full max-h-[calc(100%-2rem)] flex-col font-agg-sans",
+              "rounded-agg-2xl border border-agg-separator",
+              "bg-agg-secondary text-agg-foreground shadow-agg-modal",
+              "origin-bottom overflow-hidden will-change-transform",
+              panelAnimationClassName,
+              classNames == null ? void 0 : classNames.container
+            ),
+            "data-agg-animations": enableAnimations ? "true" : "false",
+            style: { maxWidth },
+            children
+          }
+        )
+      }
+    )
+  ] });
+};
+Modal.Container = ModalContainer;
+var ModalHeader = ({
+  title,
+  subtitle,
+  leftElement,
+  rightElement,
+  hideClose = false,
+  closeIcon,
+  classNames,
+  children,
+  hideBorder = false
+}) => {
+  const { enableAnimations } = useSdkUiConfig();
+  const labels = useLabels();
+  const defaultCloseIcon = /* @__PURE__ */ jsx(CloseIcon, { className: "h-6 w-6" });
+  const resolvedCloseIcon = closeIcon != null ? closeIcon : defaultCloseIcon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col",
+        "sticky top-0 z-20",
+        "bg-agg-secondary",
+        hideBorder ? "border-0" : "border-b border-agg-separator",
+        subtitle ? "min-h-20" : "min-h-16",
+        classNames == null ? void 0 : classNames.root
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between",
+              "px-4 py-4",
+              "sm:px-8 sm:py-6",
+              subtitle && "sm:py-4",
+              children ? "pb-3 sm:pb-4" : void 0,
+              classNames == null ? void 0 : classNames.container
+            ),
+            children: [
+              leftElement ? /* @__PURE__ */ jsx(Fragment, { children: leftElement }) : null,
+              /* @__PURE__ */ jsxs("div", { className: cn("max-w-[calc(100%-1rem)] flex-1", classNames == null ? void 0 : classNames.titleContainer), children: [
+                /* @__PURE__ */ jsx(
+                  Dialog.Title,
+                  {
+                    className: cn(
+                      !title && "invisible",
+                      "flex items-center text-agg-lg font-agg-bold leading-agg-6",
+                      "sm:text-agg-2xl sm:leading-agg-8",
+                      "text-ellipsis overflow-hidden whitespace-nowrap",
+                      classNames == null ? void 0 : classNames.title
+                    ),
+                    children: title
+                  }
+                ),
+                subtitle ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "text-agg-sm leading-agg-4 text-agg-muted-foreground sm:leading-agg-5",
+                      classNames == null ? void 0 : classNames.subtitle
+                    ),
+                    children: subtitle
+                  }
+                ) : null
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-6 items-center justify-end", children: [
+                rightElement ? /* @__PURE__ */ jsx(Fragment, { children: rightElement }) : null,
+                !hideClose && /* @__PURE__ */ jsx(
+                  Dialog.Close,
+                  {
+                    className: cn(
+                      "outline-0 flex items-center hover:cursor-pointer justify-center text-agg-foreground hover:text-agg-foreground/80",
+                      getMotionClassName(enableAnimations, "transition-colors"),
+                      classNames == null ? void 0 : classNames.close
+                    ),
+                    "aria-label": labels.common.close,
+                    children: resolvedCloseIcon
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        children ? /* @__PURE__ */ jsx("div", { children }) : null
+      ]
+    }
+  );
+};
+Modal.Header = ModalHeader;
+var ModalBody = ({ children, classNames }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grow overflow-y-auto",
+        "px-4 py-6",
+        "sm:p-8",
+        "bg-agg-secondary text-agg-foreground",
+        classNames == null ? void 0 : classNames.root
+      ),
+      children
+    }
+  );
+};
+Modal.Body = ModalBody;
+var ModalFooter = ({
+  children,
+  classNames,
+  hideBorder = false
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "sticky bottom-0",
+        "bg-agg-secondary",
+        "flex h-[73px] w-full flex-row items-center justify-between gap-3",
+        "border-agg-separator p-4",
+        "sm:h-20 sm:justify-end sm:px-8 sm:py-5",
+        hideBorder ? "border-0" : "border-t",
+        classNames == null ? void 0 : classNames.root
+      ),
+      children
+    }
+  );
+};
+Modal.Footer = ModalFooter;
+Modal.displayName = "Modal";
+
+export {
+  Modal
+};