@agg-market/ui 0.0.1

package/dist/chunk-4XWCYUV3.mjs

@@ -0,0 +1,355 @@
+import {
+  defaultTradingDisclaimer,
+  getTradingDateLabel,
+  getTradingVenueLabel
+} from "./chunk-4GSXVVSA.mjs";
+import {
+  Tabs
+} from "./chunk-VLIJ7PQK.mjs";
+import {
+  Skeleton,
+  skeletonViews
+} from "./chunk-P674XRDY.mjs";
+import {
+  VenueLogo
+} from "./chunk-4ADCXJE6.mjs";
+import {
+  Icon
+} from "./chunk-DA6KZWSK.mjs";
+import {
+  Button
+} from "./chunk-GPBLZGJ2.mjs";
+import {
+  Card
+} from "./chunk-P5PFQX75.mjs";
+import {
+  cn,
+  getMotionClassName
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/trading/place-order/index.tsx
+import { useEffect, useMemo, useState } from "react";
+import { useLabels, useSdkUiConfig } from "@agg/hooks";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var WarningFilledIcon = ({ className }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: cn("text-agg-warning", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M8 1.33301L15.3333 14.6663H0.666656L8 1.33301Z", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 5.33301V8.66634", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.1667", r: "0.833333", fill: "white" })
+      ]
+    }
+  );
+};
+var ErrorFilledIcon = ({ className }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      className: cn("text-agg-error", className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "8", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("path", { d: "M8 4.16699V8.50033", stroke: "white", strokeWidth: "1.4", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.167", r: "0.833333", fill: "white" })
+      ]
+    }
+  );
+};
+var getPlaceOrderContainerClassName = () => {
+  return "overflow-hidden rounded-agg-xl border border-agg-border bg-agg-secondary shadow-none hover:shadow-none";
+};
+var getRoutingCardClassName = (isHighlighted) => {
+  if (!isHighlighted) {
+    return "border-agg-border bg-agg-secondary";
+  }
+  return "border-agg-trade-highlight-border bg-agg-trade-highlight-surface";
+};
+var getResultValueClassName = (tone) => {
+  if (tone === "default")
+    return "text-agg-foreground";
+  return "text-agg-success";
+};
+var getStatusContent = ({
+  placement,
+  status,
+  onStatusAction
+}) => {
+  if (!status || status.placement !== placement)
+    return null;
+  if (status.tone === "warning") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+      /* @__PURE__ */ jsx(WarningFilledIcon, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-agg-lg bg-agg-status-error-surface px-3 py-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ jsx(ErrorFilledIcon, { className: "h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 text-agg-sm leading-agg-5 text-agg-foreground", children: status.message })
+    ] }),
+    status.actionLabel ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "shrink-0 text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
+        "aria-label": status.actionLabel,
+        onClick: onStatusAction,
+        children: status.actionLabel
+      }
+    ) : null
+  ] });
+};
+var PlaceOrder = ({
+  title,
+  marketDate,
+  marketImageUrl,
+  activeTab,
+  buyLabel,
+  sellLabel,
+  outcomes,
+  selectedOutcomeId,
+  primaryMetric,
+  routing,
+  result,
+  actionLabel,
+  disclaimer = defaultTradingDisclaimer,
+  isDismissible = false,
+  isLoading = false,
+  status,
+  className,
+  isPrimaryActionDisabled = false,
+  isPrimaryActionLoading = false,
+  onClose,
+  onOutcomeChange,
+  onPrimaryAction,
+  onStatusAction,
+  onTabChange
+}) => {
+  const { enableAnimations } = useSdkUiConfig();
+  const labels = useLabels();
+  const resolvedDisclaimer = disclaimer === defaultTradingDisclaimer ? labels.trading.disclaimer : disclaimer;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ariaLabel: labels.common.loading,
+        className,
+        view: skeletonViews.placeOrder
+      }
+    );
+  }
+  const [internalTab, setInternalTab] = useState(activeTab);
+  const [internalOutcomeId, setInternalOutcomeId] = useState(selectedOutcomeId);
+  useEffect(() => {
+    setInternalTab(activeTab);
+  }, [activeTab]);
+  useEffect(() => {
+    setInternalOutcomeId(selectedOutcomeId);
+  }, [selectedOutcomeId]);
+  const resolvedTab = onTabChange ? activeTab : internalTab;
+  const resolvedOutcomeId = onOutcomeChange ? selectedOutcomeId : internalOutcomeId;
+  const hasHighlightedRouting = routing.tone === "highlighted";
+  const dateLabel = getTradingDateLabel(marketDate);
+  const tabItems = useMemo(() => {
+    return [
+      { value: "buy", label: buyLabel },
+      { value: "sell", label: sellLabel }
+    ];
+  }, [buyLabel, sellLabel]);
+  const handleTabChange = (nextTab) => {
+    if (!onTabChange) {
+      setInternalTab(nextTab);
+    }
+    onTabChange == null ? void 0 : onTabChange(nextTab);
+  };
+  const handleOutcomeChange = (nextOutcomeId) => {
+    if (!onOutcomeChange) {
+      setInternalOutcomeId(nextOutcomeId);
+    }
+    onOutcomeChange == null ? void 0 : onOutcomeChange(nextOutcomeId);
+  };
+  const actionButton = /* @__PURE__ */ jsx(
+    Button,
+    {
+      size: "xxl",
+      className: "w-full",
+      disabled: isPrimaryActionDisabled,
+      isLoading: isPrimaryActionLoading,
+      "aria-label": actionLabel,
+      onClick: onPrimaryAction,
+      children: actionLabel
+    }
+  );
+  const contentBody = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          marketImageUrl ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: marketImageUrl,
+              alt: "",
+              className: "h-12 w-12 shrink-0 rounded-agg-lg object-cover"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx("p", { className: "min-w-0 text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: title })
+        ] }),
+        isDismissible ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": labels.common.close,
+            className: "shrink-0 text-agg-foreground",
+            onClick: onClose,
+            children: /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: "close",
+                size: "m",
+                className: "h-6 w-6 text-agg-foreground",
+                color: "currentColor"
+              }
+            )
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-agg-base leading-agg-6 text-agg-foreground", children: dateLabel })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Tabs,
+      {
+        ariaLabel: labels.common.tabsAria,
+        items: tabItems,
+        value: resolvedTab,
+        onChange: handleTabChange,
+        variant: "underline",
+        size: "s",
+        overflowBehavior: "scroll",
+        className: "w-full"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex w-full gap-2", children: outcomes.map((outcome) => {
+        const isActive = outcome.id === resolvedOutcomeId;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(
+              "flex-1 rounded-agg-full px-6 py-2.5 text-agg-base leading-agg-6",
+              getMotionClassName(enableAnimations, "transition-colors"),
+              isActive ? "bg-agg-success font-agg-bold text-agg-on-primary" : "bg-agg-secondary-hover font-agg-normal text-agg-foreground"
+            ),
+            "aria-pressed": isActive,
+            "aria-label": `${outcome.label} ${outcome.priceLabel}`,
+            onClick: () => handleOutcomeChange(outcome.id),
+            children: `${outcome.label} ${outcome.priceLabel}`
+          },
+          outcome.id
+        );
+      }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: primaryMetric.label }),
+          /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: primaryMetric.hint })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-agg-3xl font-agg-bold leading-agg-9 text-agg-foreground", children: primaryMetric.value })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative overflow-hidden rounded-agg-lg border p-3",
+            getRoutingCardClassName(hasHighlightedRouting)
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "pointer-events-none absolute inset-x-0 bottom-0 h-11 bg-gradient-to-b from-transparent to-agg-trade-highlight-glow",
+                  hasHighlightedRouting ? "opacity-100" : "opacity-0"
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col gap-3", children: [
+              routing.rows.map((row, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(
+                      VenueLogo,
+                      {
+                        venue: row.venue,
+                        size: "s",
+                        ariaLabel: getTradingVenueLabel(row.venue)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-agg-base leading-agg-6 text-agg-foreground", children: row.label })
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { className: "shrink-0 text-agg-base leading-agg-6 text-agg-foreground", children: row.priceLabel })
+                ] }),
+                index < routing.rows.length - 1 ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "h-px w-full",
+                      hasHighlightedRouting ? "bg-agg-trade-highlight-border" : "bg-agg-separator"
+                    )
+                  }
+                ) : null
+              ] }, `${row.venue}-${row.label}`)),
+              routing.highlightLabel ? /* @__PURE__ */ jsx("p", { className: "text-center text-agg-sm font-agg-bold leading-agg-5 uppercase text-agg-trade-highlight-accent", children: routing.highlightLabel }) : null
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: routing.helperLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-agg-base font-agg-bold leading-agg-6 text-agg-foreground", children: result.label }),
+        /* @__PURE__ */ jsx("p", { className: "text-agg-sm leading-agg-5 text-agg-muted-foreground", children: result.hint })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn(
+            "text-agg-3xl font-agg-bold leading-agg-9",
+            getResultValueClassName(result.tone)
+          ),
+          children: result.value
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      getStatusContent({
+        placement: "above-action",
+        status,
+        onStatusAction
+      }),
+      actionButton,
+      getStatusContent({
+        placement: "below-action",
+        status,
+        onStatusAction
+      })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "text-center text-agg-xs leading-agg-4 text-agg-muted-foreground", children: resolvedDisclaimer })
+  ] });
+  return /* @__PURE__ */ jsx(Card, { className: cn(getPlaceOrderContainerClassName(), className), children: contentBody });
+};
+PlaceOrder.displayName = "PlaceOrder";
+
+export {
+  PlaceOrder
+};