@agg-market/ui 0.0.1

package/dist/chunk-DBD5GHHD.mjs

@@ -0,0 +1,147 @@
+import {
+  defaultSettlementDifferencesTitle,
+  defaultSettlementSectionLabel,
+  getTradingVenueLabel
+} from "./chunk-4GSXVVSA.mjs";
+import {
+  Skeleton,
+  skeletonViews
+} from "./chunk-P674XRDY.mjs";
+import {
+  VenueLogo
+} from "./chunk-4ADCXJE6.mjs";
+import {
+  Icon
+} from "./chunk-DA6KZWSK.mjs";
+import {
+  Card
+} from "./chunk-P5PFQX75.mjs";
+import {
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/trading/settlement/index.tsx
+import { useEffect, useState } from "react";
+import { useLabels } from "@agg/hooks";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var getSettlementHeaderClassName = () => {
+  return "flex items-center justify-between gap-4";
+};
+var Settlement = ({
+  sectionLabel = defaultSettlementSectionLabel,
+  question,
+  differencesTitle = defaultSettlementDifferencesTitle,
+  differences,
+  venues,
+  defaultExpandedVenue,
+  expandedVenue,
+  isLoading = false,
+  onExpandedVenueChange,
+  onShowMore,
+  className
+}) => {
+  var _a, _b;
+  const labels = useLabels();
+  const resolvedSectionLabel = sectionLabel === defaultSettlementSectionLabel ? labels.trading.settlementSection : sectionLabel;
+  const resolvedDifferencesTitle = differencesTitle === defaultSettlementDifferencesTitle ? labels.trading.settlementDifferencesTitle : differencesTitle;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ariaLabel: labels.trading.settlementLoading,
+        className,
+        view: skeletonViews.settlement
+      }
+    );
+  }
+  const [internalExpandedVenue, setInternalExpandedVenue] = (
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useState((_b = defaultExpandedVenue != null ? defaultExpandedVenue : (_a = venues[0]) == null ? void 0 : _a.venue) != null ? _b : null)
+  );
+  useEffect(() => {
+    if (expandedVenue === void 0)
+      return;
+    setInternalExpandedVenue(expandedVenue);
+  }, [expandedVenue]);
+  const resolvedExpandedVenue = expandedVenue === void 0 ? internalExpandedVenue : expandedVenue;
+  const handleVenueClick = (venue) => {
+    const nextVenue = resolvedExpandedVenue === venue ? null : venue;
+    if (expandedVenue === void 0) {
+      setInternalExpandedVenue(nextVenue);
+    }
+    onExpandedVenueChange == null ? void 0 : onExpandedVenueChange(nextVenue);
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "gap-5 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: getSettlementHeaderClassName(), children: [
+          /* @__PURE__ */ jsx("p", { className: "text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground", children: resolvedSectionLabel }),
+          /* @__PURE__ */ jsx("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: question })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: resolvedDifferencesTitle }),
+          /* @__PURE__ */ jsx("ul", { className: "list-disc pl-5 text-agg-sm leading-agg-5 text-agg-foreground", children: differences.map((difference) => /* @__PURE__ */ jsx("li", { children: difference }, difference)) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-px w-full bg-agg-separator" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: venues.map((venue) => {
+          const venueLabel = getTradingVenueLabel(venue.venue, venue.label);
+          const isExpanded = resolvedExpandedVenue === venue.venue;
+          return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", isExpanded ? "gap-2" : "gap-0"), children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "flex items-center gap-2 text-left",
+                "aria-expanded": isExpanded,
+                "aria-label": labels.trading.settlementDetailsAria(venueLabel),
+                onClick: () => handleVenueClick(venue.venue),
+                children: [
+                  /* @__PURE__ */ jsx(VenueLogo, { venue: venue.venue, size: "s", ariaLabel: venueLabel }),
+                  /* @__PURE__ */ jsx("span", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: venueLabel }),
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: isExpanded ? "chevron-up" : "chevron-down",
+                      size: "s",
+                      className: "text-agg-foreground",
+                      color: "currentColor"
+                    }
+                  )
+                ]
+              }
+            ),
+            isExpanded ? /* @__PURE__ */ jsxs("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: [
+              venue.description,
+              venue.showMoreLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                " ",
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "font-agg-normal text-agg-foreground underline-offset-2 hover:underline",
+                    "aria-label": labels.trading.settlementShowMoreAria(
+                      venue.showMoreLabel,
+                      venueLabel
+                    ),
+                    onClick: () => onShowMore == null ? void 0 : onShowMore(venue.venue),
+                    children: venue.showMoreLabel
+                  }
+                )
+              ] }) : null
+            ] }) : null
+          ] }, venue.venue);
+        }) })
+      ]
+    }
+  );
+};
+Settlement.displayName = "Settlement";
+
+export {
+  Settlement
+};

package/dist/chunk-DQ6XFBYJ.mjs

@@ -0,0 +1,37 @@
+import {
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/primitives/typography/typography.constants.ts
+var variantClasses = {
+  title: cn("font-agg-sans text-agg-lg leading-agg-7", "font-agg-bold", "text-agg-foreground"),
+  body: cn("font-agg-sans text-agg-base leading-agg-6", "font-agg-normal", "text-agg-foreground"),
+  meta: cn(
+    "font-agg-sans text-agg-sm leading-agg-5",
+    "font-agg-normal",
+    "text-agg-muted-foreground"
+  ),
+  label: cn(
+    "font-agg-sans text-agg-sm leading-agg-5",
+    "font-agg-bold uppercase",
+    "text-agg-foreground"
+  ),
+  value: cn("font-agg-sans text-agg-xl leading-agg-7", "font-agg-normal", "text-agg-foreground"),
+  caption: cn("font-agg-sans text-agg-xs leading-agg-4", "font-agg-normal", "text-agg-foreground")
+};
+
+// src/primitives/typography/index.tsx
+import { jsx } from "react/jsx-runtime";
+var Typography = ({
+  as: Component = "p",
+  variant = "body",
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(Component, { className: cn(variantClasses[variant], "truncate", className), children });
+};
+Typography.displayName = "Typography";
+
+export {
+  Typography
+};

package/dist/chunk-FACIYUNK.mjs

@@ -0,0 +1,217 @@
+import {
+  SwitchButton
+} from "./chunk-TTOR7JCT.mjs";
+import {
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "./chunk-GC3QIIH7.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 defaultTimeFormatter = (timestamp) => {
+  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 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("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: defaultTimeFormatter,
+            padding: {
+              top: 12,
+              right: 80,
+              bottom: 28,
+              left: 12
+            },
+            loading: isLoading
+          }
+        )
+      }
+    )
+  ] });
+};
+LineChart.displayName = "LineChart";
+
+export {
+  LineChart
+};

package/dist/chunk-FUJQIYOF.mjs

@@ -0,0 +1,37 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest
+};

package/dist/chunk-FZTAHWOS.mjs

@@ -0,0 +1,82 @@
+import {
+  iconSizeClasses
+} from "./chunk-C4OI72SM.mjs";
+import {
+  cn
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/primitives/loading-icon/index.tsx
+import { useLabels, useSdkUiConfig } from "@agg-market/hooks";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var LoadingIcon = ({
+  size = "m",
+  className,
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  const { enableAnimations } = useSdkUiConfig();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.common.loading,
+      className: cn(
+        "inline-grid place-items-center text-agg-primary will-change-transform",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: "inline-grid place-items-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 44 44", className: cn("block", iconSizeClasses[size]), children: /* @__PURE__ */ jsxs("g", { children: [
+        enableAnimations ? /* @__PURE__ */ jsx(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            attributeType: "XML",
+            type: "rotate",
+            from: "0 22 22",
+            to: "360 22 22",
+            dur: "1.4s",
+            repeatCount: "indefinite"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "22",
+            cy: "22",
+            r: "16",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "6",
+            strokeLinecap: "round",
+            strokeDasharray: "60 100",
+            strokeDashoffset: "0",
+            children: enableAnimations ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "animate",
+                {
+                  attributeName: "stroke-dasharray",
+                  values: "1 100;60 100;1 100",
+                  dur: "1.2s",
+                  repeatCount: "indefinite"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "animate",
+                {
+                  attributeName: "stroke-dashoffset",
+                  values: "0;-25;-100",
+                  dur: "1.2s",
+                  repeatCount: "indefinite"
+                }
+              )
+            ] }) : null
+          }
+        )
+      ] }) }) })
+    }
+  );
+};
+LoadingIcon.displayName = "LoadingIcon";
+
+export {
+  LoadingIcon
+};

package/dist/chunk-GC3QIIH7.mjs

@@ -0,0 +1,112 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/constants.ts
+var AGG_ROOT_CLASS_NAME = "agg-root";
+
+// src/shared/utils.ts
+var isTruthy = (x) => !!x;
+var cn = (...values) => values.filter(Boolean).join(" ");
+var getMotionClassName = (enabled, ...values) => {
+  if (!enabled)
+    return void 0;
+  return cn(...values);
+};
+var getScrollBehavior = (enabled) => {
+  return enabled ? "smooth" : "auto";
+};
+var isValidDateValue = (value) => {
+  if (value instanceof Date && !Number.isNaN(value.getTime()))
+    return true;
+  return false;
+};
+var toDate = (value) => {
+  if (!value)
+    return null;
+  if (value instanceof Date)
+    return value;
+  const parsed = new Date(value);
+  if (Number.isNaN(parsed.getTime()))
+    return null;
+  return parsed;
+};
+var shortenAddress = (value) => {
+  if (value.length < 10)
+    return value;
+  return `${value.slice(0, 6)}...${value.slice(-5)}`;
+};
+var formatUsd = (value) => {
+  if (!Number.isFinite(value))
+    return "$0";
+  return value.toLocaleString("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2
+  });
+};
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest,
+  __async,
+  AGG_ROOT_CLASS_NAME,
+  isTruthy,
+  cn,
+  getMotionClassName,
+  getScrollBehavior,
+  isValidDateValue,
+  toDate,
+  shortenAddress,
+  formatUsd
+};