@agg-market/ui 0.0.1

package/dist/chunk-GPBLZGJ2.mjs

@@ -0,0 +1,136 @@
+import {
+  iconSizeClasses
+} from "./chunk-C4OI72SM.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn,
+  getMotionClassName
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/primitives/button/index.tsx
+import { useSdkUiConfig } from "@agg/hooks";
+
+// src/primitives/button/button.constants.ts
+var sizeClasses = {
+  xxs: cn("h-6 px-2.5 gap-1", "text-agg-xs leading-agg-4"),
+  xs: cn("h-7 px-3 gap-1", "text-agg-xs leading-agg-4"),
+  s: cn("h-8 px-4 gap-1.5", "text-agg-sm leading-agg-5"),
+  m: cn("h-9 px-5 gap-1.5", "text-agg-sm leading-agg-5"),
+  l: cn("h-10 px-6 gap-2", "text-agg-base leading-agg-6"),
+  xl: cn("h-11 px-7 gap-2", "text-agg-base leading-agg-6"),
+  xxl: cn("h-12 px-8 gap-2", "text-agg-base leading-agg-6")
+};
+var iconSizeClasses2 = {
+  xxs: iconSizeClasses.xs,
+  xs: iconSizeClasses.xs,
+  s: iconSizeClasses.s,
+  m: iconSizeClasses.s,
+  l: iconSizeClasses.s,
+  xl: iconSizeClasses.s,
+  xxl: iconSizeClasses.s
+};
+var iconSlotClasses = {
+  xxs: "[&_svg]:h-3 [&_svg]:w-3",
+  xs: "[&_svg]:h-3 [&_svg]:w-3",
+  s: "[&_svg]:h-4 [&_svg]:w-4",
+  m: "[&_svg]:h-4 [&_svg]:w-4",
+  l: "[&_svg]:h-4 [&_svg]:w-4",
+  xl: "[&_svg]:h-4 [&_svg]:w-4",
+  xxl: "[&_svg]:h-4 [&_svg]:w-4"
+};
+var variantClasses = {
+  primary: cn(
+    "bg-agg-primary text-agg-on-primary",
+    "hover:bg-agg-primary-hover",
+    "disabled:bg-agg-separator disabled:text-agg-on-primary",
+    "focus-visible:ring-agg-primary-hover"
+  ),
+  secondary: cn(
+    "border border-agg-separator bg-agg-secondary text-agg-foreground",
+    "hover:bg-agg-secondary-hover",
+    "disabled:bg-agg-secondary disabled:text-agg-muted-foreground disabled:border-agg-separator",
+    "focus-visible:ring-agg-separator"
+  ),
+  tertiary: cn(
+    "bg-transparent text-agg-foreground",
+    "hover:bg-agg-secondary-hover",
+    "disabled:bg-transparent disabled:text-agg-muted-foreground",
+    "focus-visible:ring-agg-separator"
+  )
+};
+var baseButtonClasses = cn(
+  "cursor-pointer disabled:cursor-not-allowed",
+  "inline-flex items-center justify-center rounded-agg-full font-agg-sans font-agg-bold text-center",
+  "whitespace-nowrap",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary"
+);
+
+// src/primitives/button/index.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Button = (_a) => {
+  var _b = _a, {
+    children,
+    variant = "primary",
+    size = "m",
+    isLoading = false,
+    disabled,
+    prefix,
+    suffix,
+    type = "button",
+    className,
+    "aria-label": ariaLabel
+  } = _b, other = __objRest(_b, [
+    "children",
+    "variant",
+    "size",
+    "isLoading",
+    "disabled",
+    "prefix",
+    "suffix",
+    "type",
+    "className",
+    "aria-label"
+  ]);
+  const { enableAnimations } = useSdkUiConfig();
+  const isDisabled = disabled || isLoading;
+  return /* @__PURE__ */ jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      type,
+      className: cn(
+        baseButtonClasses,
+        getMotionClassName(enableAnimations, "transition-colors"),
+        sizeClasses[size],
+        iconSlotClasses[size],
+        variantClasses[variant],
+        className
+      ),
+      disabled: isDisabled,
+      "aria-busy": isLoading,
+      "aria-label": ariaLabel
+    }, other), {
+      children: isLoading ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "inline-block rounded-agg-full border-2 border-current border-r-transparent",
+            getMotionClassName(enableAnimations, "animate-spin"),
+            iconSizeClasses2[size]
+          ),
+          "aria-hidden": "true"
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        prefix != null ? prefix : null,
+        /* @__PURE__ */ jsx("span", { children }),
+        suffix != null ? suffix : null
+      ] })
+    })
+  );
+};
+Button.displayName = "Button";
+
+export {
+  Button
+};

package/dist/chunk-H4LELROL.mjs

@@ -0,0 +1,262 @@
+import {
+  EventListItem
+} from "./chunk-MRHSN2B7.mjs";
+import {
+  Tabs
+} from "./chunk-VLIJ7PQK.mjs";
+import {
+  Skeleton
+} from "./chunk-P674XRDY.mjs";
+import {
+  VenueLogo
+} from "./chunk-4ADCXJE6.mjs";
+import {
+  Icon
+} from "./chunk-DA6KZWSK.mjs";
+import {
+  Typography
+} from "./chunk-DQ6XFBYJ.mjs";
+import {
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/events/list/index.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useEvents, useLabels } from "@agg/hooks";
+
+// src/events/list/event-list.constants.ts
+var POLYMARKET_VENUE = "polymarket";
+var KALSHI_VENUE = "kalshi";
+var POLYMARKET_VENUE_LOGO = "polymarket";
+var KALSHI_VENUE_LOGO = "kalshi";
+var getDefaultEventListTabs = (labels) => {
+  return [
+    {
+      value: "matched",
+      label: labels.eventList.matchedTab,
+      iconName: "arrows-to-dot"
+    },
+    {
+      value: "polymarket",
+      label: labels.venues.polymarket,
+      venueLogo: POLYMARKET_VENUE_LOGO,
+      venues: [POLYMARKET_VENUE]
+    },
+    {
+      value: "kalshi",
+      label: labels.venues.kalshi,
+      venueLogo: KALSHI_VENUE_LOGO,
+      venues: [KALSHI_VENUE]
+    }
+  ];
+};
+
+// src/events/list/event-list.utils.ts
+var mapEventToEventListItemEvent = (event) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const fallbackVenueEvent = event.venueEvents[0];
+  if (!fallbackVenueEvent)
+    return null;
+  const mergedVenueMarkets = event.markets.flatMap((m) => m.venueMarkets);
+  if ((mergedVenueMarkets == null ? void 0 : mergedVenueMarkets.length) === 0)
+    return null;
+  return __spreadProps(__spreadValues({}, event), {
+    id: event.id,
+    title: event.title || fallbackVenueEvent.title,
+    description: (_b = (_a = event.description) != null ? _a : fallbackVenueEvent.description) != null ? _b : null,
+    volume: (_d = (_c = event.volume) != null ? _c : fallbackVenueEvent.volume) != null ? _d : null,
+    startDate: (_f = (_e = event.startDate) != null ? _e : fallbackVenueEvent.startDate) != null ? _f : null,
+    endDate: (_h = (_g = event.endDate) != null ? _g : fallbackVenueEvent.endDate) != null ? _h : null,
+    creationDate: (_j = (_i = event.creationDate) != null ? _i : fallbackVenueEvent.creationDate) != null ? _j : null
+  });
+};
+var filterEventsByTabValue = (events, _tabValue) => {
+  return events;
+};
+var resolveTabVenus = (tab) => {
+  if (!tab)
+    return void 0;
+  if (tab.venues && tab.venues.length > 0)
+    return tab.venues;
+  if (tab.value === "polymarket" || tab.value === "kalshi") {
+    return tab.value === "polymarket" ? ["polymarket"] : ["kalshi"];
+  }
+  return void 0;
+};
+
+// src/events/list/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var renderTabIcon = (tab, isActive) => {
+  if (tab.venueLogo) {
+    return /* @__PURE__ */ jsx(VenueLogo, { venue: tab.venueLogo, size: "xs" });
+  }
+  if (!tab.iconName)
+    return null;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: tab.iconName,
+      size: "s",
+      color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
+    }
+  );
+};
+var EventList = ({
+  title,
+  maxItemsPerRow = 3,
+  limit = 3,
+  maxVisibleItems,
+  showVenueLogo = true,
+  search,
+  categoryIds
+}) => {
+  var _a, _b;
+  const labels = useLabels();
+  const defaultEventListTabs = useMemo(() => {
+    return getDefaultEventListTabs(labels);
+  }, [labels]);
+  const [activeTabValue, setActiveTabValue] = useState(
+    (_b = (_a = defaultEventListTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
+  );
+  const activeTab = useMemo(() => {
+    return defaultEventListTabs.find((tab) => tab.value === activeTabValue);
+  }, [activeTabValue]);
+  const venues = useMemo(() => {
+    return resolveTabVenus(activeTab);
+  }, [activeTab]);
+  const resolvedMaxVisibleItems = useMemo(() => {
+    if (!Number.isFinite(maxVisibleItems))
+      return void 0;
+    return Math.max(1, Math.floor(maxVisibleItems));
+  }, [maxVisibleItems]);
+  const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
+  const shouldPaginate = resolvedMaxVisibleItems == null;
+  const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useEvents({
+    venues,
+    search,
+    categoryIds,
+    limit: requestLimit
+  });
+  const filteredEvents = useMemo(() => {
+    return filterEventsByTabValue(events, activeTabValue);
+  }, [events, activeTabValue]);
+  const tileEvents = useMemo(() => {
+    const normalizedEvents = filteredEvents.map((event) => mapEventToEventListItemEvent(event)).filter((event) => event != null);
+    if (resolvedMaxVisibleItems == null)
+      return normalizedEvents;
+    return normalizedEvents.slice(0, resolvedMaxVisibleItems);
+  }, [filteredEvents, resolvedMaxVisibleItems]);
+  const tabsItems = useMemo(() => {
+    return defaultEventListTabs.map((tab) => {
+      const isActive = tab.value === activeTabValue;
+      return {
+        value: tab.value,
+        label: tab.label,
+        icon: renderTabIcon(tab, isActive),
+        disabled: tab.disabled
+      };
+    });
+  }, [activeTabValue]);
+  const resolvedMaxItemsPerRow = Number.isFinite(maxItemsPerRow) ? Math.max(1, Math.floor(maxItemsPerRow)) : 1;
+  const loadingPlaceholderCount = isFetchingNextPage ? Math.min(resolvedMaxItemsPerRow, resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : Infinity) : 0;
+  const shouldRenderLoadingState = isLoading && tileEvents.length === 0;
+  const loadMoreRef = useRef(null);
+  useEffect(() => {
+    if (!shouldPaginate)
+      return;
+    if (!hasNextPage)
+      return;
+    const target = loadMoreRef.current;
+    if (!target)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!(entry == null ? void 0 : entry.isIntersecting))
+          return;
+        if (isLoading || isFetchingNextPage || !hasNextPage)
+          return;
+        void fetchNextPage();
+      },
+      {
+        rootMargin: "320px 0px"
+      }
+    );
+    observer.observe(target);
+    return () => {
+      observer.disconnect();
+    };
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, shouldPaginate]);
+  const gridStyle = {
+    ["--agg-event-list-columns"]: String(resolvedMaxItemsPerRow)
+  };
+  const gridClassName = cn(
+    "grid grid-cols-1 gap-5",
+    "md:[grid-template-columns:repeat(var(--agg-event-list-columns),minmax(0,1fr))]"
+  );
+  if (shouldRenderLoadingState) {
+    return /* @__PURE__ */ jsx(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "flex w-full flex-col gap-5", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-col md:flex-row w-full flex-nowrap items-start md:items-center justify-between gap-2 md:gap-4", children: [
+      /* @__PURE__ */ jsx(Typography, { as: "h2", variant: "value", className: "truncate [&::first-letter]:uppercase", children: title }),
+      /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          ariaLabel: labels.eventList.tabsAria(title),
+          className: "max-w-full",
+          items: tabsItems,
+          value: activeTabValue,
+          onChange: setActiveTabValue
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: gridClassName, style: gridStyle, children: [
+      tileEvents.map((event) => /* @__PURE__ */ jsx(
+        EventListItem,
+        {
+          event,
+          showVenueLogo,
+          classNames: {
+            root: "w-full min-w-0 max-w-none"
+          }
+        },
+        event.id
+      )),
+      Array.from({ length: loadingPlaceholderCount }).map((_, index) => /* @__PURE__ */ jsx(
+        EventListItem,
+        {
+          isLoading: true,
+          classNames: {
+            root: "w-full min-w-0 max-w-none"
+          }
+        },
+        `loading-${index}`
+      )),
+      !isLoading && !isError && (tileEvents == null ? void 0 : tileEvents.length) === 0 ? /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "body",
+          className: "w-full col-span-full flex flex-col items-center justify-center h-32",
+          children: labels.eventList.empty
+        }
+      ) : null,
+      isError ? /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "body",
+          className: "w-full col-span-full flex flex-col items-center justify-center h-32",
+          children: labels.eventList.error
+        }
+      ) : null
+    ] }),
+    shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: "h-px w-full", "aria-hidden": true }) : null
+  ] });
+};
+EventList.displayName = "EventList";
+
+export {
+  EventList
+};

package/dist/chunk-H7P6DIX4.mjs

@@ -0,0 +1,262 @@
+import {
+  EventListItem
+} from "./chunk-CB2MLGCJ.mjs";
+import {
+  Tabs
+} from "./chunk-QXFDXXDB.mjs";
+import {
+  Skeleton
+} from "./chunk-NFYS557L.mjs";
+import {
+  VenueLogo
+} from "./chunk-LY6474C4.mjs";
+import {
+  Icon
+} from "./chunk-DA6KZWSK.mjs";
+import {
+  Typography
+} from "./chunk-DQ6XFBYJ.mjs";
+import {
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/events/list/index.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useEvents, useLabels } from "@agg-market/hooks";
+
+// src/events/list/event-list.constants.ts
+var POLYMARKET_VENUE = "polymarket";
+var KALSHI_VENUE = "kalshi";
+var POLYMARKET_VENUE_LOGO = "polymarket";
+var KALSHI_VENUE_LOGO = "kalshi";
+var getDefaultEventListTabs = (labels) => {
+  return [
+    {
+      value: "matched",
+      label: labels.eventList.matchedTab,
+      iconName: "arrows-to-dot"
+    },
+    {
+      value: "polymarket",
+      label: labels.venues.polymarket,
+      venueLogo: POLYMARKET_VENUE_LOGO,
+      venues: [POLYMARKET_VENUE]
+    },
+    {
+      value: "kalshi",
+      label: labels.venues.kalshi,
+      venueLogo: KALSHI_VENUE_LOGO,
+      venues: [KALSHI_VENUE]
+    }
+  ];
+};
+
+// src/events/list/event-list.utils.ts
+var mapEventToEventListItemEvent = (event) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const fallbackVenueEvent = event.venueEvents[0];
+  if (!fallbackVenueEvent)
+    return null;
+  const mergedVenueMarkets = event.markets.flatMap((m) => m.venueMarkets);
+  if ((mergedVenueMarkets == null ? void 0 : mergedVenueMarkets.length) === 0)
+    return null;
+  return __spreadProps(__spreadValues({}, event), {
+    id: event.id,
+    title: event.title || fallbackVenueEvent.title,
+    description: (_b = (_a = event.description) != null ? _a : fallbackVenueEvent.description) != null ? _b : null,
+    volume: (_d = (_c = event.volume) != null ? _c : fallbackVenueEvent.volume) != null ? _d : null,
+    startDate: (_f = (_e = event.startDate) != null ? _e : fallbackVenueEvent.startDate) != null ? _f : null,
+    endDate: (_h = (_g = event.endDate) != null ? _g : fallbackVenueEvent.endDate) != null ? _h : null,
+    creationDate: (_j = (_i = event.creationDate) != null ? _i : fallbackVenueEvent.creationDate) != null ? _j : null
+  });
+};
+var filterEventsByTabValue = (events, _tabValue) => {
+  return events;
+};
+var resolveTabVenus = (tab) => {
+  if (!tab)
+    return void 0;
+  if (tab.venues && tab.venues.length > 0)
+    return tab.venues;
+  if (tab.value === "polymarket" || tab.value === "kalshi") {
+    return [tab.value];
+  }
+  return void 0;
+};
+
+// src/events/list/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var renderTabIcon = (tab, isActive) => {
+  if (tab.venueLogo) {
+    return /* @__PURE__ */ jsx(VenueLogo, { venue: tab.venueLogo, size: "xs" });
+  }
+  if (!tab.iconName)
+    return null;
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: tab.iconName,
+      size: "s",
+      color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
+    }
+  );
+};
+var EventList = ({
+  title,
+  maxItemsPerRow = 3,
+  limit = 3,
+  maxVisibleItems,
+  showVenueLogo = true,
+  search,
+  categoryIds
+}) => {
+  var _a, _b;
+  const labels = useLabels();
+  const defaultEventListTabs = useMemo(() => {
+    return getDefaultEventListTabs(labels);
+  }, [labels]);
+  const [activeTabValue, setActiveTabValue] = useState(
+    (_b = (_a = defaultEventListTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
+  );
+  const activeTab = useMemo(() => {
+    return defaultEventListTabs.find((tab) => tab.value === activeTabValue);
+  }, [activeTabValue]);
+  const venues = useMemo(() => {
+    return resolveTabVenus(activeTab);
+  }, [activeTab]);
+  const resolvedMaxVisibleItems = useMemo(() => {
+    if (!Number.isFinite(maxVisibleItems))
+      return void 0;
+    return Math.max(1, Math.floor(maxVisibleItems));
+  }, [maxVisibleItems]);
+  const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
+  const shouldPaginate = resolvedMaxVisibleItems == null;
+  const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useEvents({
+    venues,
+    search,
+    categoryIds,
+    limit: requestLimit
+  });
+  const filteredEvents = useMemo(() => {
+    return filterEventsByTabValue(events, activeTabValue);
+  }, [events, activeTabValue]);
+  const tileEvents = useMemo(() => {
+    const normalizedEvents = filteredEvents.map((event) => mapEventToEventListItemEvent(event)).filter((event) => event != null);
+    if (resolvedMaxVisibleItems == null)
+      return normalizedEvents;
+    return normalizedEvents.slice(0, resolvedMaxVisibleItems);
+  }, [filteredEvents, resolvedMaxVisibleItems]);
+  const tabsItems = useMemo(() => {
+    return defaultEventListTabs.map((tab) => {
+      const isActive = tab.value === activeTabValue;
+      return {
+        value: tab.value,
+        label: tab.label,
+        icon: renderTabIcon(tab, isActive),
+        disabled: tab.disabled
+      };
+    });
+  }, [activeTabValue]);
+  const resolvedMaxItemsPerRow = Number.isFinite(maxItemsPerRow) ? Math.max(1, Math.floor(maxItemsPerRow)) : 1;
+  const loadingPlaceholderCount = isFetchingNextPage ? Math.min(resolvedMaxItemsPerRow, resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : Infinity) : 0;
+  const shouldRenderLoadingState = isLoading && tileEvents.length === 0;
+  const loadMoreRef = useRef(null);
+  useEffect(() => {
+    if (!shouldPaginate)
+      return;
+    if (!hasNextPage)
+      return;
+    const target = loadMoreRef.current;
+    if (!target)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!(entry == null ? void 0 : entry.isIntersecting))
+          return;
+        if (isLoading || isFetchingNextPage || !hasNextPage)
+          return;
+        void fetchNextPage();
+      },
+      {
+        rootMargin: "320px 0px"
+      }
+    );
+    observer.observe(target);
+    return () => {
+      observer.disconnect();
+    };
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, shouldPaginate]);
+  const gridStyle = {
+    ["--agg-event-list-columns"]: String(resolvedMaxItemsPerRow)
+  };
+  const gridClassName = cn(
+    "grid grid-cols-1 gap-5",
+    "md:[grid-template-columns:repeat(var(--agg-event-list-columns),minmax(0,1fr))]"
+  );
+  if (shouldRenderLoadingState) {
+    return /* @__PURE__ */ jsx(Skeleton, { view: "event-list", ariaLabel: labels.eventList.loading(title) });
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "flex w-full flex-col gap-5", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-col md:flex-row w-full flex-nowrap items-start md:items-center justify-between gap-2 md:gap-4", children: [
+      /* @__PURE__ */ jsx(Typography, { as: "h2", variant: "value", className: "truncate [&::first-letter]:uppercase", children: title }),
+      /* @__PURE__ */ jsx(
+        Tabs,
+        {
+          ariaLabel: labels.eventList.tabsAria(title),
+          className: "max-w-full",
+          items: tabsItems,
+          value: activeTabValue,
+          onChange: setActiveTabValue
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: gridClassName, style: gridStyle, children: [
+      tileEvents.map((event) => /* @__PURE__ */ jsx(
+        EventListItem,
+        {
+          event,
+          showVenueLogo,
+          classNames: {
+            root: "w-full min-w-0 max-w-none"
+          }
+        },
+        event.id
+      )),
+      Array.from({ length: loadingPlaceholderCount }).map((_, index) => /* @__PURE__ */ jsx(
+        EventListItem,
+        {
+          isLoading: true,
+          classNames: {
+            root: "w-full min-w-0 max-w-none"
+          }
+        },
+        `loading-${index}`
+      )),
+      !isLoading && !isError && (tileEvents == null ? void 0 : tileEvents.length) === 0 ? /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "body",
+          className: "w-full col-span-full flex flex-col items-center justify-center h-32",
+          children: labels.eventList.empty
+        }
+      ) : null,
+      isError ? /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "body",
+          className: "w-full col-span-full flex flex-col items-center justify-center h-32",
+          children: labels.eventList.error
+        }
+      ) : null
+    ] }),
+    shouldPaginate && hasNextPage ? /* @__PURE__ */ jsx("div", { ref: loadMoreRef, className: "h-px w-full", "aria-hidden": true }) : null
+  ] });
+};
+EventList.displayName = "EventList";
+
+export {
+  EventList
+};

package/dist/chunk-H7YEBGYY.mjs

@@ -0,0 +1,42 @@
+import {
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/primitives/number-value.tsx
+import { useMemo } from "react";
+import { useSdkUiConfig } from "@agg/hooks";
+import { jsx } from "react/jsx-runtime";
+var NumberValue = ({
+  value,
+  format = "number",
+  fallback = "\u2014",
+  className,
+  ariaLabel
+}) => {
+  const config = useSdkUiConfig();
+  const formatted = useMemo(() => {
+    if (value == null)
+      return fallback;
+    if (format === "date") {
+      if (value instanceof Date)
+        return config.formatDate(value);
+      return fallback;
+    }
+    if (typeof value !== "number")
+      return fallback;
+    if (format === "percent")
+      return config.formatPercent(value);
+    if (format === "currency")
+      return config.formatCurrency(value);
+    if (format === "compactCurrency") {
+      return config.formatCompactCurrency(value);
+    }
+    return config.formatNumber(value);
+  }, [config, fallback, format, value]);
+  return /* @__PURE__ */ jsx("span", { className: cn("font-agg-sans", className), "aria-label": ariaLabel, children: formatted });
+};
+NumberValue.displayName = "NumberValue";
+
+export {
+  NumberValue
+};