@agg-market/ui 4.0.0 → 6.0.0

package/dist/{chunk-5K7VXAYM.mjs → chunk-ADGL6RFX.mjs}

@@ -1,11 +1,9 @@
-import {
-  CloseIcon
-} from "./chunk-NDG43KGL.mjs";
 import {
   AGG_ROOT_CLASS_NAME,
+  CloseIcon,
   cn,
   getMotionClassName
-} from "./chunk-GJ4U5NCE.mjs";
+} from "./chunk-HI4EEDN5.mjs";
 
 // src/primitives/modal/index.tsx
 import * as Dialog from "@radix-ui/react-dialog";

package/dist/chunk-BXW3VIKV.mjs

@@ -0,0 +1,90 @@
+// src/trading/types.ts
+import { z } from "zod";
+var tradingVenueSchema = z.enum(["polymarket", "kalshi", "opinion", "probable"]);
+var settlementVenueSchema = z.object({
+  venue: tradingVenueSchema,
+  label: z.string().optional(),
+  description: z.string().min(1),
+  showMoreLabel: z.string().optional()
+});
+var settlementViewModelSchema = z.object({
+  sectionLabel: z.string().min(1),
+  question: z.string().min(1),
+  differencesTitle: z.string().min(1),
+  differences: z.array(z.string().min(1)).min(1),
+  venues: z.array(settlementVenueSchema).min(1),
+  defaultExpandedVenue: tradingVenueSchema.nullable().optional()
+});
+var placeOrderTabSchema = z.enum(["buy", "sell"]);
+var placeOrderStatusToneSchema = z.enum(["warning", "error"]);
+var placeOrderStatusPlacementSchema = z.enum(["above-action", "below-action"]);
+var placeOrderRoutingToneSchema = z.enum(["default", "highlighted"]);
+var placeOrderResultToneSchema = z.enum(["default", "success"]);
+var placeOrderOutcomeSchema = z.object({
+  id: z.string().min(1),
+  label: z.string().min(1),
+  priceLabel: z.string().min(1)
+});
+var placeOrderMetricSchema = z.object({
+  label: z.string().min(1),
+  hint: z.string().min(1),
+  value: z.string().min(1)
+});
+var placeOrderRoutingRowSchema = z.object({
+  venue: tradingVenueSchema,
+  label: z.string().min(1),
+  priceLabel: z.string().min(1)
+});
+var placeOrderRoutingSchema = z.object({
+  tone: placeOrderRoutingToneSchema,
+  rows: z.array(placeOrderRoutingRowSchema).min(1),
+  helperLabel: z.string().min(1),
+  highlightLabel: z.string().optional()
+});
+var placeOrderResultSchema = z.object({
+  label: z.string().min(1),
+  hint: z.string().min(1),
+  value: z.string().min(1),
+  tone: placeOrderResultToneSchema
+});
+var placeOrderStatusSchema = z.object({
+  tone: placeOrderStatusToneSchema,
+  message: z.string().min(1),
+  actionLabel: z.string().optional(),
+  placement: placeOrderStatusPlacementSchema
+});
+var placeOrderViewModelSchema = z.object({
+  title: z.string().min(1),
+  marketDate: z.union([z.string(), z.date()]),
+  marketImageUrl: z.string().url().optional(),
+  activeTab: placeOrderTabSchema,
+  buyLabel: z.string().min(1),
+  sellLabel: z.string().min(1),
+  outcomes: z.array(placeOrderOutcomeSchema).min(2),
+  selectedOutcomeId: z.string().min(1),
+  primaryMetric: placeOrderMetricSchema,
+  routing: placeOrderRoutingSchema,
+  result: placeOrderResultSchema,
+  actionLabel: z.string().min(1),
+  disclaimer: z.string().min(1),
+  isDismissible: z.boolean().optional(),
+  status: placeOrderStatusSchema.optional()
+});
+
+export {
+  tradingVenueSchema,
+  settlementVenueSchema,
+  settlementViewModelSchema,
+  placeOrderTabSchema,
+  placeOrderStatusToneSchema,
+  placeOrderStatusPlacementSchema,
+  placeOrderRoutingToneSchema,
+  placeOrderResultToneSchema,
+  placeOrderOutcomeSchema,
+  placeOrderMetricSchema,
+  placeOrderRoutingRowSchema,
+  placeOrderRoutingSchema,
+  placeOrderResultSchema,
+  placeOrderStatusSchema,
+  placeOrderViewModelSchema
+};

package/dist/{chart.js → chunk-CN7GI2RJ.mjs}

@@ -1,74 +1,18 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-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 __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/primitives/chart/index.tsx
-var chart_exports = {};
-__export(chart_exports, {
-  LineChart: () => LineChart
-});
-module.exports = __toCommonJS(chart_exports);
-var import_dayjs = __toESM(require("dayjs"));
-var import_hooks2 = require("@agg-market/hooks");
-var import_react2 = require("react");
-var import_liveline = require("liveline");
+import {
+  Button,
+  WarningIcon,
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn,
+  getIconA11yProps,
+  getMotionClassName
+} from "./chunk-HI4EEDN5.mjs";
 
 // src/primitives/switch-button/index.tsx
-var import_react = require("react");
-var import_hooks = require("@agg-market/hooks");
-
-// src/shared/utils.ts
-var cn = (...values) => values.filter(Boolean).join(" ");
-var getMotionClassName = (enabled, ...values) => {
-  if (!enabled)
-    return void 0;
-  return cn(...values);
-};
-
-// src/primitives/switch-button/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+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)
@@ -95,13 +39,13 @@ var SwitchButton = ({
   ariaLabel,
   className
 }) => {
-  const { enableAnimations } = (0, import_hooks.useSdkUiConfig)();
-  const activeIndex = (0, import_react.useMemo)(() => {
+  const { enableAnimations } = useSdkUiConfig();
+  const activeIndex = useMemo(() => {
     return resolveActiveIndex(options, value);
   }, [options, value]);
-  const [isAnimating, setIsAnimating] = (0, import_react.useState)(false);
-  const [lastAnimatedIndex, setLastAnimatedIndex] = (0, import_react.useState)(activeIndex);
-  (0, import_react.useEffect)(() => {
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [lastAnimatedIndex, setLastAnimatedIndex] = useState(activeIndex);
+  useEffect(() => {
     if (lastAnimatedIndex === activeIndex) {
       return;
     }
@@ -137,7 +81,7 @@ var SwitchButton = ({
     }
     onValueChange(nextOption.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
@@ -147,7 +91,7 @@ var SwitchButton = ({
         "cursor-pointer hover:bg-agg-tertiary",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      children: /* @__PURE__ */ jsxs(
         "div",
         {
           className: "relative grid min-w-0 flex-1 items-center",
@@ -157,7 +101,7 @@ var SwitchButton = ({
           role: "tablist",
           "aria-label": ariaLabel,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ jsx(
               "span",
               {
                 className: cn(
@@ -177,7 +121,7 @@ var SwitchButton = ({
             options.map((option, optionIndex) => {
               var _a;
               const isActive = optionIndex === activeIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              return /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -219,8 +163,71 @@ var SwitchButton = ({
 };
 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
-var import_jsx_runtime2 = require("react/jsx-runtime");
+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();
@@ -247,12 +254,12 @@ var resolveTimeFormatter = (windowSeconds) => {
     if (!Number.isFinite(timestamp))
       return "";
     if (windowSeconds <= 48 * 60 * 60) {
-      return import_dayjs.default.unix(timestamp).format("HH:mm");
+      return dayjs.unix(timestamp).format("HH:mm");
     }
     if (windowSeconds <= 14 * 24 * 60 * 60) {
-      return import_dayjs.default.unix(timestamp).format("MMM D HH:mm");
+      return dayjs.unix(timestamp).format("MMM D HH:mm");
     }
-    return import_dayjs.default.unix(timestamp).format("MMM D");
+    return dayjs.unix(timestamp).format("MMM D");
   };
 };
 var toLivelinePoints = (points) => {
@@ -301,7 +308,7 @@ var renderDefaultSeriesControls = ({
   seriesSwitchAriaLabel,
   formatSeriesOptionAriaLabel
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ jsx3(
     SwitchButton,
     {
       ariaLabel: seriesSwitchAriaLabel,
@@ -333,15 +340,15 @@ var LineChart = ({
   renderSeriesControls
 }) => {
   var _a, _b;
-  const labels = (0, import_hooks2.useLabels)();
-  const { theme } = (0, import_hooks2.useSdkUiConfig)();
-  const normalizedSeries = (0, import_react2.useMemo)(() => {
+  const labels = useLabels();
+  const { theme } = useSdkUiConfig2();
+  const normalizedSeries = useMemo2(() => {
     return normalizeSeries(series);
   }, [series]);
-  const [activeSeriesId, setActiveSeriesId] = (0, import_react2.useState)(
+  const [activeSeriesId, setActiveSeriesId] = useState2(
     () => resolveActiveSeriesId(normalizedSeries, null)
   );
-  (0, import_react2.useEffect)(() => {
+  useEffect2(() => {
     setActiveSeriesId(
       (currentActiveSeriesId) => resolveActiveSeriesId(normalizedSeries, currentActiveSeriesId)
     );
@@ -350,22 +357,22 @@ var LineChart = ({
   const handleSeriesChange = (seriesId) => {
     setActiveSeriesId(seriesId);
   };
-  const primarySeries = (0, import_react2.useMemo)(() => {
+  const primarySeries = useMemo2(() => {
     return resolveSelectedSeries(normalizedSeries, activeSeriesId);
   }, [activeSeriesId, normalizedSeries]);
-  const primaryData = (0, import_react2.useMemo)(() => {
+  const primaryData = useMemo2(() => {
     if (!primarySeries) {
       return [];
     }
     return toLivelinePoints(primarySeries.points);
   }, [primarySeries]);
-  const primaryValue = (0, import_react2.useMemo)(() => {
+  const primaryValue = useMemo2(() => {
     if (!primarySeries) {
       return 0;
     }
     return resolveLatestValue(primarySeries.points);
   }, [primarySeries]);
-  const livelineSeries = (0, import_react2.useMemo)(() => {
+  const livelineSeries = useMemo2(() => {
     return normalizedSeries.map((seriesItem) => ({
       id: seriesItem.id,
       color: seriesItem.color,
@@ -373,10 +380,10 @@ var LineChart = ({
       value: resolveLatestValue(seriesItem.points)
     }));
   }, [normalizedSeries]);
-  const windowSeconds = (0, import_react2.useMemo)(() => {
+  const windowSeconds = useMemo2(() => {
     return resolveWindowSeconds(normalizedSeries);
   }, [normalizedSeries]);
-  const timeFormatter = (0, import_react2.useMemo)(() => {
+  const timeFormatter = useMemo2(() => {
     return resolveTimeFormatter(windowSeconds);
   }, [windowSeconds]);
   const seriesControls = showSeriesControls && normalizedSeries.length > 0 ? (_a = renderSeriesControls == null ? void 0 : renderSeriesControls({
@@ -391,9 +398,9 @@ var LineChart = ({
     seriesSwitchAriaLabel: labels.common.lineChartSeriesSwitchAria,
     formatSeriesOptionAriaLabel: labels.common.lineChartSeriesOptionAria
   }) : null : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("group/agg-chart", "w-full", classNames == null ? void 0 : classNames.root), style: { width }, children: [
-    !isLoading && seriesControls ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("mb-3", classNames == null ? void 0 : classNames.controls), children: seriesControls }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  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(
@@ -403,8 +410,8 @@ var LineChart = ({
         style: { height },
         role: "img",
         "aria-label": labels.common.lineChartAria,
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_liveline.Liveline,
+        children: /* @__PURE__ */ jsx3(
+          Liveline,
           {
             className: cn("h-full w-full agg-livechart", classNames == null ? void 0 : classNames.liveline),
             data: primaryData,
@@ -432,7 +439,147 @@ var LineChart = ({
   ] });
 };
 LineChart.displayName = "LineChart";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  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
+};