@agg-market/ui 5.0.0 → 7.0.0

package/dist/chunk-ZYUJ7YEJ.mjs

@@ -0,0 +1,645 @@
+import {
+  Button,
+  WarningIcon,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn,
+  getIconA11yProps,
+  getMotionClassName
+} from "./chunk-MUB7NYWZ.mjs";
+
+// src/primitives/switch-button/index.tsx
+import { useEffect, useMemo, useState } from "react";
+import { useSdkUiConfig } from "@agg-market/hooks";
+import { jsx, jsxs } from "react/jsx-runtime";
+var resolveActiveIndex = (options, value) => {
+  const activeIndex = options.findIndex((option) => option.value === value);
+  if (activeIndex >= 0)
+    return activeIndex;
+  return 0;
+};
+var resolveNextEnabledIndex = (options, currentIndex, direction) => {
+  if (options.length <= 1)
+    return currentIndex;
+  const step = direction === "next" ? 1 : -1;
+  for (let offset = 1; offset <= options.length; offset += 1) {
+    const candidateIndex = (currentIndex + step * offset + options.length) % options.length;
+    const candidate = options[candidateIndex];
+    if (candidate && !candidate.disabled) {
+      return candidateIndex;
+    }
+  }
+  return currentIndex;
+};
+var SwitchButton = ({
+  options,
+  value,
+  onValueChange,
+  ariaLabel,
+  className
+}) => {
+  const { enableAnimations } = useSdkUiConfig();
+  const activeIndex = useMemo(() => {
+    return resolveActiveIndex(options, value);
+  }, [options, value]);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [lastAnimatedIndex, setLastAnimatedIndex] = useState(activeIndex);
+  useEffect(() => {
+    if (lastAnimatedIndex === activeIndex) {
+      return;
+    }
+    setLastAnimatedIndex(activeIndex);
+    if (!enableAnimations) {
+      setIsAnimating(false);
+      return;
+    }
+    setIsAnimating(true);
+    const timeoutId = window.setTimeout(() => {
+      setIsAnimating(false);
+    }, 350);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [activeIndex, enableAnimations, lastAnimatedIndex]);
+  if (options.length === 0) {
+    return null;
+  }
+  const handleKeyDown = (event, optionIndex) => {
+    if ((event == null ? void 0 : event.key) !== "ArrowLeft" && (event == null ? void 0 : event.key) !== "ArrowRight") {
+      return;
+    }
+    event.preventDefault();
+    const nextOptionIndex = resolveNextEnabledIndex(
+      options,
+      optionIndex,
+      event.key === "ArrowRight" ? "next" : "previous"
+    );
+    const nextOption = options[nextOptionIndex];
+    if (!nextOption || nextOption.disabled) {
+      return;
+    }
+    onValueChange(nextOption.value);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group/agg-switch",
+        "inline-flex min-w-0 rounded-agg-full bg-agg-secondary-hover font-agg-sans",
+        getMotionClassName(enableAnimations, "transition-background duration-200 ease-in-out"),
+        "cursor-pointer hover:bg-agg-tertiary",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative grid min-w-0 flex-1 items-center",
+          style: {
+            gridTemplateColumns: `repeat(${options.length}, minmax(0, 1fr))`
+          },
+          role: "tablist",
+          "aria-label": ariaLabel,
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "pointer-events-none absolute inset-y-0 left-0 rounded-agg-full border-2 border-agg-primary bg-agg-secondary",
+                  getMotionClassName(
+                    enableAnimations,
+                    "transition-transform duration-500 ease-[cubic-bezier(0.77,0,0.175,1)]"
+                  )
+                ),
+                style: {
+                  width: `${100 / options.length}%`,
+                  transform: `translateX(${activeIndex * 100}%) scaleX(${isAnimating ? 1.08 : 1})`
+                },
+                "aria-hidden": "true"
+              }
+            ),
+            options.map((option, optionIndex) => {
+              var _a;
+              const isActive = optionIndex === activeIndex;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": isActive,
+                  "aria-label": (_a = option.ariaLabel) != null ? _a : void 0,
+                  tabIndex: isActive ? 0 : -1,
+                  disabled: option.disabled,
+                  className: cn(
+                    "relative z-10 min-w-0 rounded-agg-full px-5 py-1.5 font-agg-sans text-agg-base leading-agg-6 text-agg-foreground",
+                    getMotionClassName(
+                      enableAnimations,
+                      "transition-[colors] duration-200 ease-in-out"
+                    ),
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary-hover",
+                    "cursor-pointer disabled:cursor-not-allowed disabled:text-agg-muted-foreground",
+                    isActive ? "font-agg-bold" : "font-agg-normal"
+                  ),
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (option.disabled || isActive)
+                      return;
+                    onValueChange(option.value);
+                  },
+                  onKeyDown: (event) => {
+                    handleKeyDown(event, optionIndex);
+                  },
+                  children: option.label
+                },
+                option.value
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+};
+SwitchButton.displayName = "SwitchButton";
+
+// src/primitives/typography/typography.constants.ts
+var typographyVariants = [
+  "display",
+  "heading",
+  "title",
+  "title-strong",
+  "body-large",
+  "body-large-strong",
+  "body",
+  "body-strong",
+  "label",
+  "label-strong",
+  "label-caps",
+  "caption",
+  "caption-strong",
+  "caption-caps",
+  "overline"
+];
+var typographyVariantClasses = {
+  display: cn("agg-type-display"),
+  heading: cn("agg-type-heading"),
+  title: cn("agg-type-title"),
+  "title-strong": cn("agg-type-title-strong"),
+  "body-large": cn("agg-type-body-large"),
+  "body-large-strong": cn("agg-type-body-large-strong"),
+  body: cn("agg-type-body"),
+  "body-strong": cn("agg-type-body-strong"),
+  label: cn("agg-type-label"),
+  "label-strong": cn("agg-type-label-strong"),
+  "label-caps": cn("agg-type-label-caps"),
+  caption: cn("agg-type-caption"),
+  "caption-strong": cn("agg-type-caption-strong"),
+  "caption-caps": cn("agg-type-caption-caps"),
+  overline: cn("agg-type-overline")
+};
+
+// src/primitives/typography/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Typography = ({
+  as: Component = "p",
+  variant = "body",
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ jsx2(
+    Component,
+    {
+      className: cn(
+        "group/agg-typography",
+        "text-agg-foreground",
+        typographyVariantClasses[variant],
+        className
+      ),
+      children
+    }
+  );
+};
+Typography.displayName = "Typography";
+
+// src/primitives/chart/index.tsx
+import dayjs from "dayjs";
+import { useLabels, useSdkUiConfig as useSdkUiConfig2 } from "@agg-market/hooks";
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import { Liveline } from "liveline";
+import { jsx as jsx3, jsxs as jsxs2 } 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;
+      }
+      const normalizedTime = Math.floor(point.time);
+      const normalizedPoint = {
+        time: normalizedTime,
+        value: point.value,
+        open: Number.isFinite(point.open) ? point.open : void 0,
+        high: Number.isFinite(point.high) ? point.high : void 0,
+        low: Number.isFinite(point.low) ? point.low : void 0,
+        close: Number.isFinite(point.close) ? point.close : void 0
+      };
+      pointsByTime.set(normalizedTime, normalizedPoint);
+    });
+    const sortedPoints = [...pointsByTime.entries()].sort((left, right) => left[0] - right[0]).map(([, point]) => point);
+    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 toLivelineCandles = (points) => {
+  return points.map((point) => {
+    var _a, _b, _c, _d;
+    const open = (_a = point.open) != null ? _a : point.value;
+    const close = (_b = point.close) != null ? _b : point.value;
+    const high = (_c = point.high) != null ? _c : Math.max(open, close, point.value);
+    const low = (_d = point.low) != null ? _d : Math.min(open, close, point.value);
+    if (!Number.isFinite(point.time) || !Number.isFinite(open) || !Number.isFinite(high) || !Number.isFinite(low) || !Number.isFinite(close)) {
+      return null;
+    }
+    return {
+      time: point.time,
+      open,
+      high: Math.max(open, close, high),
+      low: Math.min(open, close, low),
+      close
+    };
+  }).filter((point) => point != null);
+};
+var resolveCandleWidthSeconds = (points) => {
+  if (points.length <= 1) {
+    return void 0;
+  }
+  let minimumIntervalSeconds = null;
+  for (let index = 1; index < points.length; index += 1) {
+    const currentPoint = points[index];
+    const previousPoint = points[index - 1];
+    const intervalSeconds = currentPoint.time - previousPoint.time;
+    if (!Number.isFinite(intervalSeconds) || intervalSeconds <= 0) {
+      continue;
+    }
+    minimumIntervalSeconds = minimumIntervalSeconds == null ? intervalSeconds : Math.min(minimumIntervalSeconds, intervalSeconds);
+  }
+  if (minimumIntervalSeconds == null) {
+    return void 0;
+  }
+  return Math.max(60, Math.floor(minimumIntervalSeconds));
+};
+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__ */ jsx3(
+    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,
+  chartType = "line",
+  showSeriesControls = true,
+  renderSeriesControls
+}) => {
+  var _a, _b;
+  const labels = useLabels();
+  const { theme } = useSdkUiConfig2();
+  const normalizedSeries = useMemo2(() => {
+    return normalizeSeries(series);
+  }, [series]);
+  const [activeSeriesId, setActiveSeriesId] = useState2(
+    () => resolveActiveSeriesId(normalizedSeries, null)
+  );
+  useEffect2(() => {
+    setActiveSeriesId(
+      (currentActiveSeriesId) => resolveActiveSeriesId(normalizedSeries, currentActiveSeriesId)
+    );
+  }, [normalizedSeries]);
+  const livelineTheme = theme;
+  const handleSeriesChange = (seriesId) => {
+    setActiveSeriesId(seriesId);
+  };
+  const primarySeries = useMemo2(() => {
+    return resolveSelectedSeries(normalizedSeries, activeSeriesId);
+  }, [activeSeriesId, normalizedSeries]);
+  const primaryData = useMemo2(() => {
+    if (!primarySeries) {
+      return [];
+    }
+    return toLivelinePoints(primarySeries.points);
+  }, [primarySeries]);
+  const primaryCandles = useMemo2(() => {
+    if (!primarySeries) {
+      return [];
+    }
+    return toLivelineCandles(primarySeries.points);
+  }, [primarySeries]);
+  const primaryValue = useMemo2(() => {
+    if (!primarySeries) {
+      return 0;
+    }
+    return resolveLatestValue(primarySeries.points);
+  }, [primarySeries]);
+  const candleWidth = useMemo2(() => {
+    if (!primarySeries) {
+      return void 0;
+    }
+    return resolveCandleWidthSeconds(primarySeries.points);
+  }, [primarySeries]);
+  const livelineSeries = useMemo2(() => {
+    return normalizedSeries.map((seriesItem) => ({
+      id: seriesItem.id,
+      color: seriesItem.color,
+      data: toLivelinePoints(seriesItem.points),
+      value: resolveLatestValue(seriesItem.points)
+    }));
+  }, [normalizedSeries]);
+  const windowSeconds = useMemo2(() => {
+    return resolveWindowSeconds(normalizedSeries);
+  }, [normalizedSeries]);
+  const timeFormatter = useMemo2(() => {
+    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__ */ jsxs2("div", { className: cn("group/agg-chart", "w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
+    !isLoading && seriesControls ? /* @__PURE__ */ jsx3("div", { className: cn("mb-3", classNames == null ? void 0 : classNames.controls), children: seriesControls }) : null,
+    /* @__PURE__ */ jsx3(
+      "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": chartType === "candlestick" ? labels.common.candlestickChartAria : labels.common.lineChartAria,
+        children: /* @__PURE__ */ jsx3(
+          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,
+            mode: chartType === "candlestick" ? "candle" : "line",
+            candles: chartType === "candlestick" ? primaryCandles : void 0,
+            candleWidth: chartType === "candlestick" ? candleWidth : void 0,
+            formatValue: defaultValueFormatter,
+            formatTime: timeFormatter,
+            padding: {
+              top: 12,
+              right: 80,
+              bottom: 28,
+              left: 12
+            },
+            loading: isLoading
+          }
+        )
+      }
+    )
+  ] });
+};
+LineChart.displayName = "LineChart";
+
+// src/primitives/badge/badge.constants.ts
+var badgeSizes = ["small", "medium", "large"];
+var badgeSizeClasses = {
+  small: cn("py-1.5 px-4 gap-1.5", "agg-type-label"),
+  medium: cn("py-1.5 px-4 gap-2", "agg-type-body"),
+  large: cn("py-2.5 px-6 gap-2", "agg-type-body")
+};
+var baseBadgeClasses = cn(
+  "inline-flex items-center justify-center rounded-agg-full font-agg-sans",
+  "bg-agg-secondary-hover text-agg-foreground whitespace-nowrap font-agg-normal"
+);
+
+// src/primitives/badge/index.tsx
+import { useSdkUiConfig as useSdkUiConfig3 } from "@agg-market/hooks";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function Badge({
+  text,
+  prefix,
+  suffix,
+  size = "medium",
+  classNames,
+  onClick,
+  isActive = false
+}) {
+  const { enableAnimations } = useSdkUiConfig3();
+  const resolvedText = `${text}`;
+  const resolvedAriaLabel = resolvedText.length > 0 ? resolvedText : void 0;
+  return /* @__PURE__ */ jsxs3(
+    "span",
+    __spreadProps(__spreadValues({
+      "aria-label": resolvedAriaLabel,
+      className: cn(
+        "group/agg-badge",
+        baseBadgeClasses,
+        badgeSizeClasses[size],
+        onClick ? "cursor-pointer hover:bg-agg-tertiary disabled:cursor-not-allowed" : "",
+        getMotionClassName(
+          enableAnimations,
+          "transition-[border-color,background-color] duration-200 ease-in-out"
+        ),
+        isActive ? "border-agg-primary bg-agg-secondary! font-agg-bold!" : "border-transparent font-agg-normal",
+        classNames == null ? void 0 : classNames.root
+      )
+    }, onClick && { onClick }), {
+      children: [
+        prefix ? /* @__PURE__ */ jsx4("span", { className: classNames == null ? void 0 : classNames.prefix, children: prefix }) : null,
+        /* @__PURE__ */ jsx4("span", { className: cn("truncate", classNames == null ? void 0 : classNames.text), children: text }),
+        suffix ? /* @__PURE__ */ jsx4("span", { className: classNames == null ? void 0 : classNames.suffix, children: suffix }) : null
+      ]
+    })
+  );
+}
+Badge.displayName = "Badge";
+
+// src/primitives/search/search-empty-icon.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var SearchEmptyIcon = (_a) => {
+  var _b = _a, { title, className } = _b, props = __objRest(_b, ["title", "className"]);
+  return /* @__PURE__ */ jsxs4(
+    "svg",
+    __spreadProps(__spreadValues(__spreadValues({
+      viewBox: "0 0 40 40",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    }, getIconA11yProps(title)), props), {
+      children: [
+        title ? /* @__PURE__ */ jsx5("title", { children: title }) : null,
+        /* @__PURE__ */ jsx5("circle", { cx: "19.9987", cy: "20.0013", r: "9.2", stroke: "currentColor", strokeWidth: "1.6" }),
+        /* @__PURE__ */ jsx5(
+          "ellipse",
+          {
+            cx: "19.9987",
+            cy: "20.0012",
+            rx: "17.2",
+            ry: "6.6",
+            transform: "rotate(-35 19.9987 20.0012)",
+            stroke: "currentColor",
+            strokeWidth: "1.6"
+          }
+        )
+      ]
+    })
+  );
+};
+SearchEmptyIcon.displayName = "SearchEmptyIcon";
+
+// src/primitives/state-message/index.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var iconClassName = "h-9 w-9 text-agg-muted-foreground";
+var StateMessage = ({
+  ariaLabel,
+  tone = "empty",
+  title,
+  description,
+  actionLabel,
+  onAction,
+  className
+}) => {
+  const icon = tone === "warning" ? /* @__PURE__ */ jsx6(WarningIcon, { className: iconClassName, "aria-hidden": true }) : /* @__PURE__ */ jsx6(SearchEmptyIcon, { className: iconClassName, "aria-hidden": true });
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: cn(
+        "flex min-h-[240px] w-full flex-col items-center justify-center px-5 py-10 text-center md:px-10",
+        className
+      ),
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxs5("div", { className: "flex max-w-[360px] flex-col items-center gap-6", children: [
+        icon,
+        /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx6(Typography, { variant: "body-large-strong", children: title }),
+          description ? /* @__PURE__ */ jsx6(Typography, { variant: "body", className: "whitespace-pre-line text-agg-muted-foreground", children: description }) : null
+        ] }),
+        actionLabel && onAction ? /* @__PURE__ */ jsx6(
+          Button,
+          {
+            variant: "tertiary",
+            size: "large",
+            className: "text-agg-base leading-agg-6",
+            "aria-label": actionLabel,
+            onClick: onAction,
+            children: actionLabel
+          }
+        ) : null
+      ] })
+    }
+  );
+};
+StateMessage.displayName = "StateMessage";
+
+export {
+  SwitchButton,
+  typographyVariants,
+  Typography,
+  LineChart,
+  badgeSizes,
+  Badge,
+  SearchEmptyIcon,
+  StateMessage
+};

package/dist/events.d.mts

@@ -0,0 +1 @@
+export * from "./types/events/index";

package/dist/events.d.ts

@@ -0,0 +1 @@
+export * from "./types/events/index";