@agg-market/ui 7.0.0 → 9.0.0

package/dist/chunk-ZYUJ7YEJ.mjs

@@ -1,645 +0,0 @@
-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
-};