@agg-market/ui 4.0.0 → 6.0.0

package/dist/chunk-OH56VUYK.mjs

@@ -1,321 +0,0 @@
-import {
-  EventListItem
-} from "./chunk-LA3FBBSJ.mjs";
-import {
-  Tabs
-} from "./chunk-S3H63TQ5.mjs";
-import {
-  Skeleton
-} from "./chunk-M4RJHRFT.mjs";
-import {
-  VenueLogo
-} from "./chunk-PORVP72S.mjs";
-import {
-  Icon
-} from "./chunk-PZTHM6WG.mjs";
-import {
-  Typography
-} from "./chunk-ERGNR6UQ.mjs";
-import {
-  cn
-} from "./chunk-GJ4U5NCE.mjs";
-
-// src/events/list/index.tsx
-import { useCallback, 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) => {
-  const mergedVenueMarkets = event.markets.flatMap((m) => m.venueMarkets);
-  if (mergedVenueMarkets.length === 0)
-    return null;
-  return event;
-};
-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: "small" });
-  }
-  if (!tab.iconName)
-    return null;
-  return /* @__PURE__ */ jsx(
-    Icon,
-    {
-      name: tab.iconName,
-      size: "small",
-      color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
-    }
-  );
-};
-var TAB_MIN_WIDTH = 80;
-var TAB_HORIZONTAL_PADDING = 32;
-var TAB_ICON_AND_GAP_WIDTH = 24;
-var TAB_OUTER_BORDER_WIDTH = 2;
-var TAB_INNER_BORDER_WIDTH = 1;
-var measureTabLabelWidth = (label) => {
-  if (typeof document === "undefined")
-    return label.length * 9;
-  const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
-  if (!context)
-    return label.length * 9;
-  context.font = "700 16px Inter";
-  return context.measureText(label).width;
-};
-var estimateTabsWidth = (items) => {
-  if (items.length === 0)
-    return 0;
-  const tabsWidth = items.reduce((sum, item) => {
-    const textWidth = Math.ceil(measureTabLabelWidth(item.label));
-    const iconWidth = item.icon ? TAB_ICON_AND_GAP_WIDTH : 0;
-    const buttonWidth = Math.max(TAB_MIN_WIDTH, textWidth + iconWidth + TAB_HORIZONTAL_PADDING);
-    return sum + buttonWidth;
-  }, 0);
-  return tabsWidth + TAB_OUTER_BORDER_WIDTH + (items.length - 1) * TAB_INNER_BORDER_WIDTH;
-};
-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 [_shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState(false);
-  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 headerRef = useRef(null);
-  const titleRef = useRef(null);
-  const updateTabsOverflowBehavior = useCallback(() => {
-    if (typeof window === "undefined")
-      return;
-    const headerElement = headerRef.current;
-    const titleElement = titleRef.current;
-    if (!headerElement || !titleElement)
-      return;
-    const isDesktop = window.matchMedia("(min-width: 768px)").matches;
-    if (!isDesktop) {
-      setShouldUseSelectOverflow(false);
-      return;
-    }
-    const headerStyles = window.getComputedStyle(headerElement);
-    const rawGap = headerStyles.columnGap || headerStyles.gap || "0";
-    const horizontalGap = Number.parseFloat(rawGap) || 0;
-    const availableTabsWidth = headerElement.clientWidth - titleElement.getBoundingClientRect().width - horizontalGap;
-    const estimatedTabsWidth = estimateTabsWidth(tabsItems);
-    setShouldUseSelectOverflow(availableTabsWidth > 0 && estimatedTabsWidth > availableTabsWidth);
-  }, [tabsItems]);
-  useEffect(() => {
-    updateTabsOverflowBehavior();
-  }, [updateTabsOverflowBehavior]);
-  useEffect(() => {
-    if (typeof ResizeObserver === "undefined")
-      return;
-    const headerElement = headerRef.current;
-    const titleElement = titleRef.current;
-    if (!headerElement || !titleElement)
-      return;
-    const resizeObserver = new ResizeObserver(() => {
-      updateTabsOverflowBehavior();
-    });
-    resizeObserver.observe(headerElement);
-    resizeObserver.observe(titleElement);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [updateTabsOverflowBehavior]);
-  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",
-      {
-        ref: headerRef,
-        className: "flex flex-col sm:flex-row w-full flex-nowrap items-start sm:items-center justify-between gap-2 sm:gap-4",
-        children: [
-          /* @__PURE__ */ jsx("div", { ref: titleRef, className: "min-w-0", children: /* @__PURE__ */ jsx(Typography, { as: "h2", variant: "title", className: "truncate [&::first-letter]:uppercase", children: title }) }),
-          /* @__PURE__ */ jsx(
-            Tabs,
-            {
-              ariaLabel: labels.eventList.tabsAria(title),
-              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-OJVTGNIF.mjs

@@ -1,230 +0,0 @@
-import {
-  SwitchButton
-} from "./chunk-LCZKSITC.mjs";
-import {
-  __spreadProps,
-  __spreadValues,
-  cn
-} from "./chunk-GJ4U5NCE.mjs";
-
-// src/primitives/chart/index.tsx
-import dayjs from "dayjs";
-import { useLabels, useSdkUiConfig } from "@agg-market/hooks";
-import { useEffect, useMemo, useState } from "react";
-import { Liveline } from "liveline";
-import { jsx, jsxs } from "react/jsx-runtime";
-var normalizeSeries = (series) => {
-  return series.map((seriesItem) => {
-    const pointsByTime = /* @__PURE__ */ new Map();
-    seriesItem.points.forEach((point) => {
-      if (!Number.isFinite(point.time) || !Number.isFinite(point.value)) {
-        return;
-      }
-      pointsByTime.set(Math.floor(point.time), point.value);
-    });
-    const sortedPoints = [...pointsByTime.entries()].sort((left, right) => left[0] - right[0]).map(([time, value]) => ({
-      time,
-      value
-    }));
-    return __spreadProps(__spreadValues({}, seriesItem), {
-      points: sortedPoints
-    });
-  }).filter((seriesItem) => seriesItem.points.length > 0);
-};
-var defaultValueFormatter = (value) => {
-  return `${Math.round(value)}%`;
-};
-var resolveTimeFormatter = (windowSeconds) => {
-  return (timestamp) => {
-    if (!Number.isFinite(timestamp))
-      return "";
-    if (windowSeconds <= 48 * 60 * 60) {
-      return dayjs.unix(timestamp).format("HH:mm");
-    }
-    if (windowSeconds <= 14 * 24 * 60 * 60) {
-      return dayjs.unix(timestamp).format("MMM D HH:mm");
-    }
-    return dayjs.unix(timestamp).format("MMM D");
-  };
-};
-var toLivelinePoints = (points) => {
-  return points.map((point) => ({
-    time: point.time,
-    value: point.value
-  }));
-};
-var resolveWindowSeconds = (normalizedSeries) => {
-  const timestamps = normalizedSeries.flatMap(
-    (seriesItem) => seriesItem.points.map((point) => point.time)
-  );
-  if (timestamps.length <= 1)
-    return 30;
-  const minTimestamp = Math.min(...timestamps);
-  const maxTimestamp = Math.max(...timestamps);
-  const span = maxTimestamp - minTimestamp;
-  if (!Number.isFinite(span) || span <= 0)
-    return 30;
-  return Math.max(1, Math.floor(span));
-};
-var resolveLatestValue = (points) => {
-  const latestPoint = points[points.length - 1];
-  if (!latestPoint)
-    return 0;
-  return latestPoint.value;
-};
-var resolveActiveSeriesId = (series, activeSeriesId) => {
-  var _a, _b;
-  if (activeSeriesId) {
-    const matchingSeries = series.find((seriesItem) => seriesItem.id === activeSeriesId);
-    if (matchingSeries) {
-      return matchingSeries.id;
-    }
-  }
-  return (_b = (_a = series[0]) == null ? void 0 : _a.id) != null ? _b : "";
-};
-var formatDefaultSeriesLabel = (seriesItem) => {
-  return seriesItem.id.charAt(0).toUpperCase() + seriesItem.id.slice(1);
-};
-var renderDefaultSeriesControls = ({
-  series,
-  activeSeriesId,
-  handleSeriesChange,
-  defaultSeriesSwitchClassName,
-  seriesSwitchAriaLabel,
-  formatSeriesOptionAriaLabel
-}) => {
-  return /* @__PURE__ */ jsx(
-    SwitchButton,
-    {
-      ariaLabel: seriesSwitchAriaLabel,
-      className: defaultSeriesSwitchClassName,
-      options: series.map((seriesItem) => ({
-        value: seriesItem.id,
-        label: formatDefaultSeriesLabel(seriesItem),
-        ariaLabel: formatSeriesOptionAriaLabel(formatDefaultSeriesLabel(seriesItem))
-      })),
-      value: activeSeriesId,
-      onValueChange: handleSeriesChange
-    }
-  );
-};
-var resolveSelectedSeries = (series, activeSeriesId) => {
-  const availableSeriesIds = new Set(series.map((seriesItem) => seriesItem.id));
-  if (!availableSeriesIds.has(activeSeriesId)) {
-    return series[0];
-  }
-  return series.find((seriesItem) => seriesItem.id === activeSeriesId);
-};
-var LineChart = ({
-  series,
-  height = 280,
-  width,
-  classNames,
-  isLoading = false,
-  showSeriesControls = true,
-  renderSeriesControls
-}) => {
-  var _a, _b;
-  const labels = useLabels();
-  const { theme } = useSdkUiConfig();
-  const normalizedSeries = useMemo(() => {
-    return normalizeSeries(series);
-  }, [series]);
-  const [activeSeriesId, setActiveSeriesId] = useState(
-    () => resolveActiveSeriesId(normalizedSeries, null)
-  );
-  useEffect(() => {
-    setActiveSeriesId(
-      (currentActiveSeriesId) => resolveActiveSeriesId(normalizedSeries, currentActiveSeriesId)
-    );
-  }, [normalizedSeries]);
-  const livelineTheme = theme;
-  const handleSeriesChange = (seriesId) => {
-    setActiveSeriesId(seriesId);
-  };
-  const primarySeries = useMemo(() => {
-    return resolveSelectedSeries(normalizedSeries, activeSeriesId);
-  }, [activeSeriesId, normalizedSeries]);
-  const primaryData = useMemo(() => {
-    if (!primarySeries) {
-      return [];
-    }
-    return toLivelinePoints(primarySeries.points);
-  }, [primarySeries]);
-  const primaryValue = useMemo(() => {
-    if (!primarySeries) {
-      return 0;
-    }
-    return resolveLatestValue(primarySeries.points);
-  }, [primarySeries]);
-  const livelineSeries = useMemo(() => {
-    return normalizedSeries.map((seriesItem) => ({
-      id: seriesItem.id,
-      color: seriesItem.color,
-      data: toLivelinePoints(seriesItem.points),
-      value: resolveLatestValue(seriesItem.points)
-    }));
-  }, [normalizedSeries]);
-  const windowSeconds = useMemo(() => {
-    return resolveWindowSeconds(normalizedSeries);
-  }, [normalizedSeries]);
-  const timeFormatter = useMemo(() => {
-    return resolveTimeFormatter(windowSeconds);
-  }, [windowSeconds]);
-  const seriesControls = showSeriesControls && normalizedSeries.length > 0 ? (_a = renderSeriesControls == null ? void 0 : renderSeriesControls({
-    series: normalizedSeries,
-    activeSeriesId,
-    handleSeriesChange
-  })) != null ? _a : normalizedSeries.length > 1 ? renderDefaultSeriesControls({
-    series: normalizedSeries,
-    activeSeriesId,
-    handleSeriesChange,
-    defaultSeriesSwitchClassName: classNames == null ? void 0 : classNames.defaultSeriesSwitch,
-    seriesSwitchAriaLabel: labels.common.lineChartSeriesSwitchAria,
-    formatSeriesOptionAriaLabel: labels.common.lineChartSeriesOptionAria
-  }) : null : null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("group/agg-chart", "w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
-    !isLoading && seriesControls ? /* @__PURE__ */ jsx("div", { className: cn("mb-3", classNames == null ? void 0 : classNames.controls), children: seriesControls }) : null,
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "overflow-hidden [&>div:not(.agg-livechart):first-of-type]:hidden!",
-          classNames == null ? void 0 : classNames.chartViewport
-        ),
-        style: { height },
-        role: "img",
-        "aria-label": labels.common.lineChartAria,
-        children: /* @__PURE__ */ jsx(
-          Liveline,
-          {
-            className: cn("h-full w-full agg-livechart", classNames == null ? void 0 : classNames.liveline),
-            data: primaryData,
-            value: primaryValue,
-            series: livelineSeries,
-            color: (_b = primarySeries == null ? void 0 : primarySeries.color) != null ? _b : "var(--agg-color-primary)",
-            theme: livelineTheme,
-            grid: true,
-            momentum: false,
-            pulse: false,
-            window: windowSeconds,
-            formatValue: defaultValueFormatter,
-            formatTime: timeFormatter,
-            padding: {
-              top: 12,
-              right: 80,
-              bottom: 28,
-              left: 12
-            },
-            loading: isLoading
-          }
-        )
-      }
-    )
-  ] });
-};
-LineChart.displayName = "LineChart";
-
-export {
-  LineChart
-};