@agg-market/ui 6.0.0 → 7.0.0

package/dist/chunk-OAJBTVZT.mjs

@@ -0,0 +1,119 @@
+import {
+  Icon,
+  cn
+} from "./chunk-MUB7NYWZ.mjs";
+
+// src/primitives/inline-alert/index.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var toneIconName = {
+  error: "error-filled",
+  warning: "warning-filled"
+};
+var toneIconClassName = {
+  error: "text-agg-error",
+  warning: "text-agg-warning"
+};
+var surfaceClassNames = {
+  error: "rounded-agg-lg bg-agg-status-error-surface px-3 py-2.5",
+  warning: "rounded-agg-lg border border-agg-separator bg-agg-secondary-hover px-3 py-2.5"
+};
+var liveRegionConfig = {
+  error: {
+    role: "alert",
+    ariaLive: "assertive"
+  },
+  warning: {
+    role: "status",
+    ariaLive: "polite"
+  }
+};
+var resolveVariant = ({
+  tone,
+  variant
+}) => {
+  if (variant)
+    return variant;
+  return tone === "error" ? "surface" : "plain";
+};
+var InlineAlert = ({
+  tone = "error",
+  variant,
+  title,
+  message,
+  actionLabel,
+  onAction,
+  className,
+  "aria-label": ariaLabel
+}) => {
+  const resolvedVariant = resolveVariant({
+    tone,
+    variant
+  });
+  const hasAction = !!actionLabel && !!onAction;
+  const { ariaLive, role } = liveRegionConfig[tone];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full gap-3",
+        resolvedVariant === "plain" ? "items-center justify-center" : "items-start",
+        resolvedVariant === "surface" ? surfaceClassNames[tone] : null,
+        className
+      ),
+      role,
+      "aria-live": ariaLive,
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: toneIconName[tone],
+            className: cn("h-4 w-4 shrink-0", toneIconClassName[tone]),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "min-w-0",
+              resolvedVariant === "plain" && !hasAction ? "flex-none text-center" : "flex-1"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex flex-col",
+                  title ? "gap-1" : null,
+                  resolvedVariant === "plain" && !hasAction ? "items-center" : null
+                ),
+                children: [
+                  title ? /* @__PURE__ */ jsx("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: title }) : null,
+                  /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: message })
+                ]
+              }
+            )
+          }
+        ),
+        hasAction ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "shrink-0 text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary-hover focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary"
+            ),
+            "aria-label": actionLabel,
+            onClick: onAction,
+            children: actionLabel
+          }
+        ) : null
+      ]
+    }
+  );
+};
+InlineAlert.displayName = "InlineAlert";
+
+export {
+  InlineAlert
+};

package/dist/{chunk-JE3Z52FD.mjs → chunk-OVQVAUAI.mjs}

@@ -1,15 +1,16 @@
 import {
   SearchEmptyIcon,
   Typography
-} from "./chunk-CN7GI2RJ.mjs";
+} from "./chunk-ZYUJ7YEJ.mjs";
 import {
   Icon,
   VenueLogo,
   __spreadProps,
   __spreadValues,
   cn,
-  getMotionClassName
-} from "./chunk-HI4EEDN5.mjs";
+  getMotionClassName,
+  iconSizeClasses
+} from "./chunk-MUB7NYWZ.mjs";
 
 // src/primitives/hello-world.tsx
 import { useHello } from "@agg-market/hooks";
@@ -29,10 +30,83 @@ function HelloWorld() {
 }
 HelloWorld.displayName = "HelloWorld";
 
+// src/primitives/loading-icon/index.tsx
+import { useLabels, useSdkUiConfig } from "@agg-market/hooks";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var LoadingIcon = ({
+  size = "medium",
+  className,
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  const { enableAnimations } = useSdkUiConfig();
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.common.loading,
+      className: cn(
+        "group/agg-loading-icon",
+        "inline-grid place-items-center text-agg-primary will-change-transform",
+        className
+      ),
+      children: /* @__PURE__ */ jsx2("span", { className: "inline-grid place-items-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 44 44", className: cn("block", iconSizeClasses[size]), children: /* @__PURE__ */ jsxs2("g", { children: [
+        enableAnimations ? /* @__PURE__ */ jsx2(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            attributeType: "XML",
+            type: "rotate",
+            from: "0 22 22",
+            to: "360 22 22",
+            dur: "1.4s",
+            repeatCount: "indefinite"
+          }
+        ) : null,
+        /* @__PURE__ */ jsx2(
+          "circle",
+          {
+            cx: "22",
+            cy: "22",
+            r: "16",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "6",
+            strokeLinecap: "round",
+            strokeDasharray: "60 100",
+            strokeDashoffset: "0",
+            children: enableAnimations ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx2(
+                "animate",
+                {
+                  attributeName: "stroke-dasharray",
+                  values: "1 100;60 100;1 100",
+                  dur: "1.2s",
+                  repeatCount: "indefinite"
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "animate",
+                {
+                  attributeName: "stroke-dashoffset",
+                  values: "0;-25;-100",
+                  dur: "1.2s",
+                  repeatCount: "indefinite"
+                }
+              )
+            ] }) : null
+          }
+        )
+      ] }) }) })
+    }
+  );
+};
+LoadingIcon.displayName = "LoadingIcon";
+
 // src/primitives/number-value.tsx
 import { useMemo } from "react";
-import { useSdkUiConfig } from "@agg-market/hooks";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { useSdkUiConfig as useSdkUiConfig2 } from "@agg-market/hooks";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var NumberValue = ({
   value,
   format = "number",
@@ -40,7 +114,7 @@ var NumberValue = ({
   className,
   ariaLabel
 }) => {
-  const config = useSdkUiConfig();
+  const config = useSdkUiConfig2();
   const formatted = useMemo(() => {
     if (value == null)
       return fallback;
@@ -60,13 +134,13 @@ var NumberValue = ({
     }
     return config.formatNumber(value);
   }, [config, fallback, format, value]);
-  return /* @__PURE__ */ jsx2("span", { className: cn("font-agg-sans", className), "aria-label": ariaLabel, children: formatted });
+  return /* @__PURE__ */ jsx3("span", { className: cn("font-agg-sans", className), "aria-label": ariaLabel, children: formatted });
 };
 NumberValue.displayName = "NumberValue";
 
 // src/primitives/search/index.tsx
 import { useMemo as useMemo2 } from "react";
-import { useLabels, useSdkUiConfig as useSdkUiConfig2 } from "@agg-market/hooks";
+import { useLabels as useLabels2, useSdkUiConfig as useSdkUiConfig3 } from "@agg-market/hooks";
 
 // src/primitives/search/search.types.ts
 import { z } from "zod";
@@ -92,7 +166,7 @@ var searchResultItemSchema = z.object({
 var searchResultItemsSchema = z.array(searchResultItemSchema);
 
 // src/primitives/search/index.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var SearchResultRow = ({
   item,
   resultAria,
@@ -103,7 +177,7 @@ var SearchResultRow = ({
   const handleResultClick = () => {
     onSelect == null ? void 0 : onSelect(item);
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "button",
     {
       type: "button",
@@ -119,8 +193,8 @@ var SearchResultRow = ({
       onClick: handleResultClick,
       "aria-label": resultAria(item.title),
       children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          /* @__PURE__ */ jsx4(
             "img",
             {
               src: item.thumbnailSrc,
@@ -131,7 +205,7 @@ var SearchResultRow = ({
               )
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "p",
             {
               className: cn(
@@ -142,10 +216,10 @@ var SearchResultRow = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs2("div", { className: cn("flex w-[200px] shrink-0 items-center gap-2", classNames == null ? void 0 : classNames.resultMeta), children: [
-          /* @__PURE__ */ jsx3(VenueLogo, { venue: item.venue, size: "small" }),
-          /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
-            /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs3("div", { className: cn("flex w-[200px] shrink-0 items-center gap-2", classNames == null ? void 0 : classNames.resultMeta), children: [
+          /* @__PURE__ */ jsx4(VenueLogo, { venue: item.venue, size: "small" }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx4(
               "p",
               {
                 className: cn(
@@ -155,7 +229,7 @@ var SearchResultRow = ({
                 children: item.valueLabel
               }
             ),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               "p",
               {
                 className: cn(
@@ -167,7 +241,7 @@ var SearchResultRow = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           Icon,
           {
             name: "chevron-right",
@@ -195,8 +269,8 @@ var Search = ({
   classNames,
   inputProps
 }) => {
-  const labels = useLabels();
-  const { enableAnimations } = useSdkUiConfig2();
+  const labels = useLabels2();
+  const { enableAnimations } = useSdkUiConfig3();
   const validatedResults = useMemo2(() => {
     return getValidatedResults(results);
   }, [results]);
@@ -208,8 +282,8 @@ var Search = ({
   const handleInputChange = (event) => {
     onValueChange(event.target.value);
   };
-  return /* @__PURE__ */ jsxs2("div", { className: cn("group/agg-search", "flex w-full flex-col gap-1", classNames == null ? void 0 : classNames.root), children: [
-    /* @__PURE__ */ jsx3("label", { className: "w-full", children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3("div", { className: cn("group/agg-search", "flex w-full flex-col gap-1", classNames == null ? void 0 : classNames.root), children: [
+    /* @__PURE__ */ jsx4("label", { className: "w-full", children: /* @__PURE__ */ jsxs3(
       "div",
       {
         className: cn(
@@ -223,7 +297,7 @@ var Search = ({
           classNames == null ? void 0 : classNames.inputContainer
         ),
         children: [
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             Icon,
             {
               name: "search",
@@ -231,7 +305,7 @@ var Search = ({
               className: cn("text-agg-muted-foreground", classNames == null ? void 0 : classNames.searchIcon)
             }
           ),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4(
             "input",
             __spreadProps(__spreadValues({}, inputProps), {
               type: "text",
@@ -252,25 +326,25 @@ var Search = ({
         ]
       }
     ) }),
-    shouldRenderResults ? /* @__PURE__ */ jsx3(
+    shouldRenderResults ? /* @__PURE__ */ jsx4(
       "div",
       {
         className: cn(
           "w-full overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary py-2 shadow-[0px_8px_16px_0px_rgba(0,0,0,0.1)]",
           classNames == null ? void 0 : classNames.dropdown
         ),
-        children: /* @__PURE__ */ jsx3(
+        children: /* @__PURE__ */ jsx4(
           "ul",
           {
             className: cn("m-0 flex list-none flex-col p-0", classNames == null ? void 0 : classNames.resultsList),
             role: "listbox",
             "aria-label": labels.search.resultsAria,
-            children: validatedResults.map((item, index) => /* @__PURE__ */ jsx3(
+            children: validatedResults.map((item, index) => /* @__PURE__ */ jsx4(
               "li",
               {
                 role: "presentation",
                 className: cn(index > 0 && "border-t border-agg-separator", classNames == null ? void 0 : classNames.resultItem),
-                children: /* @__PURE__ */ jsx3(
+                children: /* @__PURE__ */ jsx4(
                   SearchResultRow,
                   {
                     item,
@@ -286,29 +360,29 @@ var Search = ({
         )
       }
     ) : null,
-    shouldRenderNoResults ? /* @__PURE__ */ jsx3(
+    shouldRenderNoResults ? /* @__PURE__ */ jsx4(
       "div",
       {
         className: cn(
           "w-full overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary py-10 shadow-[0px_8px_16px_0px_rgba(0,0,0,0.1)]",
           classNames == null ? void 0 : classNames.emptyState
         ),
-        children: /* @__PURE__ */ jsxs2(
+        children: /* @__PURE__ */ jsxs3(
           "div",
           {
             className: cn("flex flex-col items-center gap-5", classNames == null ? void 0 : classNames.emptyStateContent),
             role: "status",
             "aria-live": "polite",
             children: [
-              /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsx4(
                 SearchEmptyIcon,
                 {
                   className: cn("h-10 w-10 text-agg-muted-foreground", classNames == null ? void 0 : classNames.emptyStateIcon),
                   "aria-hidden": true
                 }
               ),
-              /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center gap-1 text-center", children: [
-                /* @__PURE__ */ jsx3(
+              /* @__PURE__ */ jsxs3("div", { className: "flex flex-col items-center gap-1 text-center", children: [
+                /* @__PURE__ */ jsx4(
                   "p",
                   {
                     className: cn(
@@ -318,7 +392,7 @@ var Search = ({
                     children: labels.search.noResultsTitle
                   }
                 ),
-                /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx4(
                   "p",
                   {
                     className: cn(
@@ -340,6 +414,7 @@ Search.displayName = "Search";
 
 export {
   HelloWorld,
+  LoadingIcon,
   NumberValue,
   Search
 };

package/dist/{chunk-CN7GI2RJ.mjs → chunk-ZYUJ7YEJ.mjs}

@@ -7,7 +7,7 @@ import {
   cn,
   getIconA11yProps,
   getMotionClassName
-} from "./chunk-HI4EEDN5.mjs";
+} from "./chunk-MUB7NYWZ.mjs";
 
 // src/primitives/switch-button/index.tsx
 import { useEffect, useMemo, useState } from "react";
@@ -69,7 +69,7 @@ var SwitchButton = ({
     if ((event == null ? void 0 : event.key) !== "ArrowLeft" && (event == null ? void 0 : event.key) !== "ArrowRight") {
       return;
     }
-    event == null ? void 0 : event.preventDefault();
+    event.preventDefault();
     const nextOptionIndex = resolveNextEnabledIndex(
       options,
       optionIndex,
@@ -235,12 +235,18 @@ var normalizeSeries = (series) => {
       if (!Number.isFinite(point.time) || !Number.isFinite(point.value)) {
         return;
       }
-      pointsByTime.set(Math.floor(point.time), point.value);
+      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(([time, value]) => ({
-      time,
-      value
-    }));
+    const sortedPoints = [...pointsByTime.entries()].sort((left, right) => left[0] - right[0]).map(([, point]) => point);
     return __spreadProps(__spreadValues({}, seriesItem), {
       points: sortedPoints
     });
@@ -268,6 +274,44 @@ var toLivelinePoints = (points) => {
     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)
@@ -336,6 +380,7 @@ var LineChart = ({
   width,
   classNames,
   isLoading = false,
+  chartType = "line",
   showSeriesControls = true,
   renderSeriesControls
 }) => {
@@ -366,12 +411,24 @@ var LineChart = ({
     }
     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,
@@ -409,7 +466,7 @@ var LineChart = ({
         ),
         style: { height },
         role: "img",
-        "aria-label": labels.common.lineChartAria,
+        "aria-label": chartType === "candlestick" ? labels.common.candlestickChartAria : labels.common.lineChartAria,
         children: /* @__PURE__ */ jsx3(
           Liveline,
           {
@@ -423,6 +480,9 @@ var LineChart = ({
             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: {