@agg-market/ui 0.0.1

package/dist/chunk-44UEI6KD.mjs

@@ -0,0 +1,280 @@
+import {
+  EventList
+} from "./chunk-H4LELROL.mjs";
+import {
+  Tabs
+} from "./chunk-VLIJ7PQK.mjs";
+import {
+  Icon
+} from "./chunk-DA6KZWSK.mjs";
+import {
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/pages/home/index.tsx
+import { useEffect, useMemo, useState } from "react";
+import { useCategories, useLabels } from "@agg/hooks";
+
+// src/pages/home/home.constants.ts
+var ALL_CATEGORIES_TAB_VALUE = "trending";
+var DEFAULT_CATEGORIES_LIMIT = 100;
+var DEFAULT_ALL_CATEGORY_TAB_LABEL = "Trending";
+var CATEGORY_TAB_NAME_ORDER = [
+  "crypto",
+  "economy",
+  "entertainment",
+  "finance",
+  "geopolitics",
+  "health",
+  "mentions",
+  "politics",
+  "science",
+  "sports",
+  "technology",
+  "weather",
+  "world"
+];
+var getDefaultHomePageTabs = (allCategoryTabLabel) => {
+  return [
+    {
+      value: ALL_CATEGORIES_TAB_VALUE,
+      label: allCategoryTabLabel,
+      iconName: "arrow-trend-up"
+    },
+    { value: "crypto", label: "crypto", categoryIds: ["crypto"] },
+    { value: "economy", label: "economy", categoryIds: ["economy"] },
+    {
+      value: "entertainment",
+      label: "entertainment",
+      categoryIds: ["entertainment"]
+    },
+    { value: "finance", label: "finance", categoryIds: ["finance"] },
+    {
+      value: "geopolitics",
+      label: "geopolitics",
+      categoryIds: ["geopolitics"]
+    },
+    { value: "health", label: "health", categoryIds: ["health"] },
+    { value: "mentions", label: "mentions", categoryIds: ["mentions"] },
+    { value: "politics", label: "politics", categoryIds: ["politics"] },
+    { value: "science", label: "science", categoryIds: ["science"] },
+    { value: "sports", label: "sports", categoryIds: ["sports"] },
+    { value: "technology", label: "technology", categoryIds: ["technology"] },
+    { value: "weather", label: "weather", categoryIds: ["weather"] },
+    { value: "world", label: "world", categoryIds: ["world"] }
+  ];
+};
+var getDefaultEventSectionItems = (labels) => {
+  return [
+    {
+      id: "top-markets",
+      title: labels.home.topMarkets,
+      maxItemsPerRow: 3,
+      limit: 3,
+      maxVisibleItems: 3
+    },
+    {
+      id: "new-markets",
+      title: labels.home.newMarkets,
+      maxItemsPerRow: 3,
+      limit: 3,
+      maxVisibleItems: 3
+    }
+  ];
+};
+
+// src/pages/home/home.utils.ts
+var categoryOrderMap = CATEGORY_TAB_NAME_ORDER.reduce(
+  (accumulator, name, index) => {
+    accumulator.set(name, index);
+    return accumulator;
+  },
+  /* @__PURE__ */ new Map()
+);
+var normalizeCategoryName = (name) => {
+  return name.trim().toLowerCase();
+};
+var resolveCategoryTabs = (categories, allCategoryTabLabel) => {
+  const sortedCategories = [...categories].sort((left, right) => {
+    const leftName = normalizeCategoryName(left.name);
+    const rightName = normalizeCategoryName(right.name);
+    const leftOrder = categoryOrderMap.get(leftName);
+    const rightOrder = categoryOrderMap.get(rightName);
+    if (leftOrder != null && rightOrder != null) {
+      return leftOrder - rightOrder;
+    }
+    if (leftOrder != null)
+      return -1;
+    if (rightOrder != null)
+      return 1;
+    return leftName.localeCompare(rightName);
+  });
+  const seenCategoryIds = /* @__PURE__ */ new Set();
+  const tabs = [
+    {
+      value: ALL_CATEGORIES_TAB_VALUE,
+      label: allCategoryTabLabel,
+      iconName: "arrow-trend-up"
+    }
+  ];
+  for (const category of sortedCategories) {
+    if (seenCategoryIds.has(category.id))
+      continue;
+    seenCategoryIds.add(category.id);
+    tabs.push({
+      value: category.id,
+      label: normalizeCategoryName(category.name),
+      categoryIds: [category.id]
+    });
+  }
+  return tabs;
+};
+var resolveInitialTabValue = (tabs, defaultActiveTab) => {
+  var _a, _b;
+  if (defaultActiveTab) {
+    const hasDefaultTab = tabs.some((tab) => tab.value === defaultActiveTab);
+    if (hasDefaultTab)
+      return defaultActiveTab;
+  }
+  return (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "trending";
+};
+
+// src/pages/home/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var HomePage = ({
+  tabs,
+  defaultActiveTab,
+  onTabChange,
+  eventSectionItems,
+  classNames,
+  useCategoriesTabs = true,
+  categoriesLimit = DEFAULT_CATEGORIES_LIMIT,
+  allCategoryTabLabel = DEFAULT_ALL_CATEGORY_TAB_LABEL
+}) => {
+  const labels = useLabels();
+  const hasCustomTabs = !!tabs && tabs.length > 0;
+  const shouldUseCategoriesTabs = !hasCustomTabs && useCategoriesTabs;
+  const resolvedAllCategoryTabLabel = allCategoryTabLabel === DEFAULT_ALL_CATEGORY_TAB_LABEL ? labels.home.trending : allCategoryTabLabel;
+  const { categories } = useCategories({
+    limit: categoriesLimit,
+    enabled: shouldUseCategoriesTabs
+  });
+  const categoryTabs = useMemo(() => {
+    return resolveCategoryTabs(categories, resolvedAllCategoryTabLabel);
+  }, [categories, resolvedAllCategoryTabLabel]);
+  const resolvedTabs = useMemo(() => {
+    if (hasCustomTabs && tabs)
+      return tabs;
+    if (shouldUseCategoriesTabs)
+      return categoryTabs;
+    return getDefaultHomePageTabs(resolvedAllCategoryTabLabel);
+  }, [categoryTabs, hasCustomTabs, resolvedAllCategoryTabLabel, shouldUseCategoriesTabs, tabs]);
+  const resolvedEventSectionItems = eventSectionItems && eventSectionItems.length > 0 ? eventSectionItems : getDefaultEventSectionItems(labels);
+  const [activeTabValue, setActiveTabValue] = useState(() => {
+    return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
+  });
+  useEffect(() => {
+    setActiveTabValue((currentValue) => {
+      const hasCurrentValue = resolvedTabs.some((tab) => tab.value === currentValue);
+      if (hasCurrentValue)
+        return currentValue;
+      return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
+    });
+  }, [defaultActiveTab, resolvedTabs]);
+  const tabsItems = useMemo(() => {
+    return resolvedTabs.map((tab) => {
+      const isActive = tab.value === activeTabValue;
+      return {
+        value: tab.value,
+        label: tab.label,
+        icon: tab.iconName ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: tab.iconName,
+            size: "m",
+            color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
+          }
+        ) : void 0,
+        disabled: tab.disabled
+      };
+    });
+  }, [activeTabValue, resolvedTabs]);
+  const activeTab = useMemo(() => {
+    return resolvedTabs.find((tab) => tab.value === activeTabValue);
+  }, [activeTabValue, resolvedTabs]);
+  const resolvedSectionItems = useMemo(() => {
+    var _a, _b, _c, _d, _e;
+    if (activeTabValue === ALL_CATEGORIES_TAB_VALUE) {
+      return resolvedEventSectionItems;
+    }
+    const maxItemsPerRow = (_b = (_a = resolvedEventSectionItems[0]) == null ? void 0 : _a.maxItemsPerRow) != null ? _b : 3;
+    const showVenueLogo = (_c = resolvedEventSectionItems[0]) == null ? void 0 : _c.showVenueLogo;
+    const firstSectionLimit = (_d = resolvedEventSectionItems[0]) == null ? void 0 : _d.limit;
+    const limit = firstSectionLimit && Number.isFinite(firstSectionLimit) ? Math.max(9, Math.floor(firstSectionLimit)) : 9;
+    return [
+      {
+        id: `${activeTabValue}-markets`,
+        title: (_e = activeTab == null ? void 0 : activeTab.label) != null ? _e : activeTabValue,
+        maxItemsPerRow,
+        limit,
+        maxVisibleItems: void 0,
+        showVenueLogo,
+        search: activeTab == null ? void 0 : activeTab.search,
+        categoryIds: activeTab == null ? void 0 : activeTab.categoryIds
+      }
+    ];
+  }, [activeTab, activeTabValue, resolvedEventSectionItems]);
+  const handleTabChange = (value) => {
+    setActiveTabValue(value);
+    onTabChange == null ? void 0 : onTabChange(value);
+  };
+  return /* @__PURE__ */ jsxs("section", { className: cn("flex w-full flex-col", classNames == null ? void 0 : classNames.root), children: [
+    /* @__PURE__ */ jsx(
+      "header",
+      {
+        className: cn("w-full bg-agg-secondary border-b border-agg-separator", classNames == null ? void 0 : classNames.header),
+        children: /* @__PURE__ */ jsx(
+          Tabs,
+          {
+            ariaLabel: labels.home.categoryTabsAria,
+            variant: "underline",
+            className: cn("w-full px-4 md:px-10", classNames == null ? void 0 : classNames.tabs),
+            items: tabsItems,
+            value: activeTabValue,
+            onChange: handleTabChange
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "main",
+      {
+        className: cn(
+          "flex w-full flex-col gap-4 md:gap-10 px-4 md:px-10 py-4 md:py-8",
+          classNames == null ? void 0 : classNames.sections
+        ),
+        children: resolvedSectionItems.map((eventSectionItem) => {
+          var _a, _b, _c;
+          return /* @__PURE__ */ jsx(
+            EventList,
+            {
+              title: eventSectionItem.title,
+              maxItemsPerRow: eventSectionItem.maxItemsPerRow,
+              limit: eventSectionItem.limit,
+              maxVisibleItems: eventSectionItem.maxVisibleItems,
+              showVenueLogo: eventSectionItem.showVenueLogo,
+              search: (_b = eventSectionItem.search) != null ? _b : activeTab == null ? void 0 : activeTab.search,
+              categoryIds: (_c = eventSectionItem.categoryIds) != null ? _c : activeTab == null ? void 0 : activeTab.categoryIds
+            },
+            (_a = eventSectionItem.id) != null ? _a : eventSectionItem.title
+          );
+        })
+      }
+    )
+  ] });
+};
+HomePage.displayName = "HomePage";
+
+export {
+  HomePage
+};

package/dist/chunk-4ADCXJE6.mjs

@@ -0,0 +1,297 @@
+import {
+  getIconA11yProps
+} from "./chunk-BNDFQPHF.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/primitives/venue-logo/index.tsx
+import { useLabels } from "@agg/hooks";
+
+// src/primitives/venue-logo/logo-props.ts
+var DEFAULT_MONOCHROME_COLOR = "#000000";
+var resolveLogoPrimaryColor = ({
+  brandColor,
+  isColor = true,
+  color
+}) => {
+  if (typeof color === "string" && color.trim())
+    return color;
+  if (!isColor)
+    return DEFAULT_MONOCHROME_COLOR;
+  return brandColor;
+};
+
+// src/primitives/venue-logo/svg/logo-kalshi.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var KALSHI_GREEN = "#18C590";
+var LogoKalshiIcon = (_a) => {
+  var _b = _a, {
+    title,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const primaryColor = resolveLogoPrimaryColor({
+    brandColor: KALSHI_GREEN,
+    isColor,
+    color
+  });
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
+        /* @__PURE__ */ jsx("path", { d: "M20 10H36V90H20V10Z", fill: primaryColor }),
+        /* @__PURE__ */ jsx("path", { d: "M44 50L74 10H92L62 50L92 90H74L44 50Z", fill: primaryColor })
+      ]
+    })
+  );
+};
+LogoKalshiIcon.displayName = "LogoKalshiIcon";
+
+// src/primitives/venue-logo/svg/logo-opinion.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var OPINION_BLACK = "#000000";
+var OPINION_WHITE = "#FFFFFF";
+var LogoOpinionIcon = (_a) => {
+  var _b = _a, {
+    title,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const primaryColor = resolveLogoPrimaryColor({
+    brandColor: OPINION_BLACK,
+    isColor,
+    color
+  });
+  const accentColor = (color == null ? void 0 : color.trim()) ? primaryColor : OPINION_WHITE;
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ jsx2("title", { children: title }) : null,
+        /* @__PURE__ */ jsx2("circle", { cx: "50", cy: "50", r: "40", fill: primaryColor }),
+        /* @__PURE__ */ jsx2(
+          "rect",
+          {
+            x: "21",
+            y: "18",
+            width: "8",
+            height: "64",
+            rx: "4",
+            transform: "rotate(-7 21 18)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "rect",
+          {
+            x: "37",
+            y: "12",
+            width: "8",
+            height: "76",
+            rx: "4",
+            transform: "rotate(-4 37 12)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "rect",
+          {
+            x: "53",
+            y: "12",
+            width: "8",
+            height: "76",
+            rx: "4",
+            transform: "rotate(-4 53 12)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "rect",
+          {
+            x: "69",
+            y: "18",
+            width: "8",
+            height: "64",
+            rx: "4",
+            transform: "rotate(-7 69 18)",
+            fill: accentColor
+          }
+        ),
+        /* @__PURE__ */ jsx2("rect", { x: "12", y: "44", width: "76", height: "12", fill: primaryColor })
+      ]
+    })
+  );
+};
+LogoOpinionIcon.displayName = "LogoOpinionIcon";
+
+// src/primitives/venue-logo/svg/logo-polymarket.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var POLYMARKET_BLUE = "#3861FB";
+var LogoPolymarketIcon = (_a) => {
+  var _b = _a, {
+    title,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const primaryColor = resolveLogoPrimaryColor({
+    brandColor: POLYMARKET_BLUE,
+    isColor,
+    color
+  });
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ jsx3("title", { children: title }) : null,
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: "M18 10L78 2V98L18 88V10Z",
+            stroke: primaryColor,
+            strokeWidth: "8",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx3("path", { d: "M18 32L78 44", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx3("path", { d: "M18 58L78 70", stroke: primaryColor, strokeWidth: "8", strokeLinecap: "round" })
+      ]
+    })
+  );
+};
+LogoPolymarketIcon.displayName = "LogoPolymarketIcon";
+
+// src/primitives/venue-logo/svg/logo-probable.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var PROBABLE_ORANGE = "#F85B22";
+var LogoProbableIcon = (_a) => {
+  var _b = _a, {
+    title,
+    className,
+    isColor = true,
+    color
+  } = _b, props = __objRest(_b, [
+    "title",
+    "className",
+    "isColor",
+    "color"
+  ]);
+  const primaryColor = resolveLogoPrimaryColor({
+    brandColor: PROBABLE_ORANGE,
+    isColor,
+    color
+  });
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 100 100",
+      className,
+      fill: "none"
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ jsx4("title", { children: title }) : null,
+        /* @__PURE__ */ jsx4("rect", { x: "20", y: "16", width: "60", height: "12", fill: primaryColor }),
+        /* @__PURE__ */ jsx4("rect", { x: "18", y: "36", width: "64", height: "46", rx: "23", fill: primaryColor }),
+        /* @__PURE__ */ jsx4(
+          "rect",
+          {
+            x: "32",
+            y: "50",
+            width: "40",
+            height: "18",
+            rx: "9",
+            fill: isColor && !color ? "white" : primaryColor
+          }
+        ),
+        /* @__PURE__ */ jsx4("circle", { cx: "61", cy: "59", r: "7", fill: primaryColor })
+      ]
+    })
+  );
+};
+LogoProbableIcon.displayName = "LogoProbableIcon";
+
+// src/primitives/venue-logo/venue-logo.constants.ts
+var venueLogoRegistry = {
+  kalshi: LogoKalshiIcon,
+  polymarket: LogoPolymarketIcon,
+  opinion: LogoOpinionIcon,
+  probable: LogoProbableIcon
+};
+var venueLogoNames = Object.keys(venueLogoRegistry);
+var sizeClasses = {
+  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"
+};
+
+// src/primitives/venue-logo/index.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var VenueLogo = ({
+  venue,
+  isColor = true,
+  isMonochromatic = false,
+  color,
+  size = "m",
+  className,
+  ariaLabel,
+  title
+}) => {
+  const labels = useLabels();
+  const Component = venueLogoRegistry[venue];
+  const sizeClass = sizeClasses[size];
+  const resolvedIsColor = isMonochromatic ? false : isColor;
+  return /* @__PURE__ */ jsx5(
+    Component,
+    {
+      className: cn("shrink-0", sizeClass, className),
+      isColor: resolvedIsColor,
+      color,
+      "aria-label": ariaLabel != null ? ariaLabel : labels.venues[venue],
+      title
+    }
+  );
+};
+VenueLogo.displayName = "VenueLogo";
+
+export {
+  venueLogoNames,
+  VenueLogo
+};

package/dist/chunk-4GSXVVSA.mjs

@@ -0,0 +1,64 @@
+import {
+  formatUsd
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/trading/utils.ts
+import { resolveAggUiLabels } from "@agg/hooks";
+import dayjs from "dayjs";
+var defaultLabels = resolveAggUiLabels("en-US");
+var defaultSettlementSectionLabel = defaultLabels.trading.settlementSection;
+var defaultSettlementDifferencesTitle = defaultLabels.trading.settlementDifferencesTitle;
+var defaultTradingDisclaimer = defaultLabels.trading.disclaimer;
+var getTradingDateLabel = (value) => {
+  const parsedValue = dayjs(value);
+  if (!parsedValue.isValid()) {
+    return typeof value === "string" ? value : "";
+  }
+  return parsedValue.format("MMM D, YYYY");
+};
+var getTradingVenueLabel = (venue, label) => {
+  if (label)
+    return label;
+  return defaultLabels.venues[venue];
+};
+var getTradingValueLabel = ({
+  amount,
+  minimumFractionDigits = 0,
+  maximumFractionDigits = 2
+}) => {
+  return amount.toLocaleString("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits,
+    maximumFractionDigits
+  });
+};
+var getTradingPriceLabel = (value) => {
+  return `${Math.round(value * 100)}\xA2`;
+};
+var getTradingAveragePriceLabel = (value) => {
+  return defaultLabels.trading.averagePrice(value);
+};
+var getTradingBalanceLabel = (value) => {
+  return defaultLabels.trading.balance(formatUsd(value));
+};
+var getTradingSharesLabel = (value) => {
+  return defaultLabels.trading.shares(value);
+};
+var getTradingSlippageLabel = (value) => {
+  return defaultLabels.trading.slippage(value);
+};
+
+export {
+  defaultSettlementSectionLabel,
+  defaultSettlementDifferencesTitle,
+  defaultTradingDisclaimer,
+  getTradingDateLabel,
+  getTradingVenueLabel,
+  getTradingValueLabel,
+  getTradingPriceLabel,
+  getTradingAveragePriceLabel,
+  getTradingBalanceLabel,
+  getTradingSharesLabel,
+  getTradingSlippageLabel
+};