@agg-market/ui 6.0.0 → 8.0.0

package/README.md

@@ -1,6 +1,21 @@
 # @agg-market/ui
 
-Pre-built React components for the [AGG](https://agg.market) prediction market aggregator. Drop-in trading UI powered by [`@agg-market/hooks`](https://www.npmjs.com/package/@agg-market/hooks).
+Pre-built React components for the [AGG](https://agg.market) prediction market aggregator.
+
+`@agg-market/ui` now focuses on generic UI primitives, trading surfaces, and page-level components.
+Auth adapters and the connect/sign-in UX live in
+[`@agg-market/auth`](https://www.npmjs.com/package/@agg-market/auth).
+
+## Auth migration
+
+If you previously imported `ConnectButton` from `@agg-market/ui`, move that integration to
+`@agg-market/auth`:
+
+```tsx
+import { AggAuthProvider, ConnectButton, createEmailAuthMethod } from "@agg-market/auth";
+```
+
+`@agg-market/ui` no longer ships wallet-specific auth logic or wallet peer dependencies.
 
 ## Install
 
@@ -66,7 +81,6 @@ import { Button } from "@agg-market/ui";
 | Import path                 | Component         | Description              |
 | --------------------------- | ----------------- | ------------------------ |
 | `@agg-market/ui/primitives` | `Button`          | Base button              |
-| `@agg-market/ui/auth`       | `ConnectButton`   | Wallet connection        |
 | `@agg-market/ui/primitives` | `Card`            | Content card             |
 | `@agg-market/ui/primitives` | `Chart`           | Price chart              |
 | `@agg-market/ui/primitives` | `Skeleton`        | Loading placeholder      |
@@ -97,6 +111,7 @@ import { Button } from "@agg-market/ui";
 | ---------------------------------------------------------------------- | -------------------------------------- |
 | [`@agg-market/sdk`](https://www.npmjs.com/package/@agg-market/sdk)     | Vanilla TypeScript client              |
 | [`@agg-market/hooks`](https://www.npmjs.com/package/@agg-market/hooks) | React hooks for auth and data fetching |
+| [`@agg-market/auth`](https://www.npmjs.com/package/@agg-market/auth)   | Auth adapters and connect/sign-in UI   |
 
 ## License
 

package/dist/{chunk-G6YKGVQR.mjs → chunk-JE4MV5RL.mjs}

@@ -1,19 +1,19 @@
 import {
+  Button,
   Card,
+  Icon,
+  InlineAlert,
+  RemoteImage,
   Skeleton,
   Tabs,
-  skeletonViews
-} from "./chunk-UBBOLLOS.mjs";
-import {
-  Button,
-  Icon,
   VenueLogo,
   __spreadProps,
   __spreadValues,
   cn,
   formatUsd,
-  getMotionClassName
-} from "./chunk-HI4EEDN5.mjs";
+  getMotionClassName,
+  skeletonViews
+} from "./chunk-WKY3IN52.mjs";
 
 // src/trading/utils.ts
 import { resolveAggUiLabels } from "@agg-market/hooks";
@@ -66,38 +66,6 @@ var getTradingSlippageLabel = (value) => {
 import { useEffect, useMemo, useState } from "react";
 import { useLabels, useSdkUiConfig } from "@agg-market/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";
 };
@@ -140,27 +108,17 @@ var getStatusContent = ({
   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__ */ jsx(InlineAlert, { tone: "warning", message: 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
-  ] });
+  return /* @__PURE__ */ jsx(
+    InlineAlert,
+    {
+      tone: "error",
+      message: status.message,
+      actionLabel: status.actionLabel,
+      onAction: status.actionLabel ? onStatusAction : void 0
+    }
+  );
 };
 var PlaceOrder = ({
   title,
@@ -248,7 +206,7 @@ var PlaceOrder = ({
       /* @__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",
+            RemoteImage,
             {
               src: marketImageUrl,
               alt: "",

package/dist/{chunk-2ICOSP7N.mjs → chunk-KRCRD4AJ.mjs}

@@ -3,27 +3,24 @@ import {
   EventListItemDetails,
   MarketDetails,
   isErrorWithStatus
-} from "./chunk-LMOJKJOY.mjs";
-import {
-  StateMessage,
-  Typography
-} from "./chunk-CN7GI2RJ.mjs";
+} from "./chunk-TLFRGJ5B.mjs";
 import {
   PlaceOrder,
   Settlement
-} from "./chunk-G6YKGVQR.mjs";
-import {
-  Card,
-  Tabs
-} from "./chunk-UBBOLLOS.mjs";
+} from "./chunk-JE4MV5RL.mjs";
 import {
   Button,
+  Card,
   Icon,
+  RemoteImage,
+  StateMessage,
+  Tabs,
+  Typography,
   VenueLogo,
   __spreadProps,
   __spreadValues,
   cn
-} from "./chunk-HI4EEDN5.mjs";
+} from "./chunk-WKY3IN52.mjs";
 
 // src/pages/home/index.tsx
 import { useEffect, useMemo, useState } from "react";
@@ -720,7 +717,7 @@ var ActivityRow = ({ activity, onClick }) => {
           /* @__PURE__ */ jsx5(VenueLogo, { venue: activity.venue, size: "small", className: "shrink-0" }),
           /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
             /* @__PURE__ */ jsx5(
-              "img",
+              RemoteImage,
               {
                 src: activity.thumbnailSrc,
                 alt: "",
@@ -832,7 +829,7 @@ var PositionRow = ({ position, onClick }) => {
           /* @__PURE__ */ jsx7(VenueLogo, { venue: position.venue, size: "small", className: "shrink-0" }),
           /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
             /* @__PURE__ */ jsx7(
-              "img",
+              RemoteImage,
               {
                 src: position.thumbnailSrc,
                 alt: "",
@@ -1059,7 +1056,7 @@ var UserInfoCard = ({
       ),
       children: /* @__PURE__ */ jsxs10("div", { className: "flex w-full items-start gap-5", children: [
         /* @__PURE__ */ jsx10("div", { className: "shrink-0", children: user.avatarUrl ? /* @__PURE__ */ jsx10(
-          "img",
+          RemoteImage,
           {
             src: user.avatarUrl,
             alt: user.username,

package/dist/{chunk-5ZKPBMRK.mjs → chunk-SBLIHCN2.mjs}

@@ -1,9 +1,3 @@
-import {
-  Modal
-} from "./chunk-ADGL6RFX.mjs";
-import {
-  Select
-} from "./chunk-MHCHR65A.mjs";
 import {
   BankIcon,
   BestPricesIcon,
@@ -19,8 +13,11 @@ import {
   ExternalLinkIcon,
   Icon,
   LinkAccountsIcon,
+  Modal,
   PlaySquareIcon,
   ProfileIcon,
+  RemoteImage,
+  Select,
   StayInControlIcon,
   VenueLogo,
   WalletIcon,
@@ -31,7 +28,7 @@ import {
   formatAmountDisplay,
   formatCompactUsd,
   venueLogoLabels
-} from "./chunk-HI4EEDN5.mjs";
+} from "./chunk-WKY3IN52.mjs";
 
 // src/deposit/index.tsx
 import { useState as useState3 } from "react";
@@ -51,9 +48,9 @@ var VenueRow = ({ venue, onSelect }) => {
     {
       className: cn(
         "flex items-center gap-3 sm:gap-4",
-        "rounded-xl border border-separator",
+        "rounded-xl border border-agg-separator",
         "p-3 sm:p-4",
-        "hover:bg-secondary-hover transition-colors cursor-pointer"
+        "hover:bg-agg-secondary-hover transition-colors cursor-pointer"
       ),
       role: "button",
       tabIndex: 0,
@@ -121,9 +118,9 @@ var DepositMethodCard = ({
   {
     className: cn(
       "flex items-center gap-3 sm:gap-4",
-      "rounded-xl border border-separator",
+      "rounded-xl border border-agg-separator",
       "p-3 sm:p-4",
-      "hover:bg-secondary-hover transition-colors cursor-pointer"
+      "hover:bg-agg-secondary-hover transition-colors cursor-pointer"
     ),
     role: "button",
     tabIndex: 0,
@@ -135,7 +132,7 @@ var DepositMethodCard = ({
       }
     },
     children: [
-      /* @__PURE__ */ jsx2("div", { className: "shrink-0 flex items-center justify-center h-10 w-10 rounded-lg bg-secondary-hover", children: icon }),
+      /* @__PURE__ */ jsx2("div", { className: "shrink-0 flex items-center justify-center h-10 w-10 rounded-lg bg-agg-secondary-hover", children: icon }),
       /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0", children: [
         /* @__PURE__ */ jsx2("p", { className: "agg-type-body-strong text-agg-foreground", children: title }),
         /* @__PURE__ */ jsx2("p", { className: "agg-type-label text-agg-muted-foreground", children: description })
@@ -296,9 +293,9 @@ var CardDepositStep = ({
         {
           className: cn(
             "flex items-center gap-3",
-            "rounded-xl border border-separator",
+            "rounded-xl border border-agg-separator",
             "p-3 sm:p-4",
-            "hover:bg-secondary-hover transition-colors cursor-pointer"
+            "hover:bg-agg-secondary-hover transition-colors cursor-pointer"
           ),
           role: "button",
           tabIndex: 0,
@@ -467,7 +464,7 @@ var CryptoTransferStep = ({
             {
               className: cn(
                 "flex items-center gap-2",
-                "rounded border border-separator bg-secondary",
+                "rounded border border-agg-separator bg-agg-secondary",
                 "h-10 px-3"
               ),
               children: [
@@ -499,7 +496,7 @@ var KalshiStepCard = ({
   title,
   description,
   children
-}) => /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2 rounded-xl bg-secondary-hover p-4", children: [
+}) => /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2 rounded-xl bg-agg-secondary-hover p-4", children: [
   /* @__PURE__ */ jsxs5("p", { className: "agg-type-caption-caps text-agg-muted-foreground", children: [
     "Step ",
     step
@@ -689,10 +686,10 @@ var VenueRow2 = ({ venue, onSelect }) => {
     {
       className: cn(
         "flex items-center gap-3 sm:gap-4",
-        "rounded-xl border border-separator",
+        "rounded-xl border border-agg-separator",
         "p-3 sm:p-4",
         "transition-colors",
-        isDisabled ? "opacity-50 cursor-not-allowed" : "hover:bg-secondary-hover cursor-pointer"
+        isDisabled ? "opacity-50 cursor-not-allowed" : "hover:bg-agg-secondary-hover cursor-pointer"
       ),
       role: "button",
       tabIndex: isDisabled ? -1 : 0,
@@ -756,9 +753,9 @@ var WithdrawMethodCard = ({
   {
     className: cn(
       "flex items-center gap-3 sm:gap-4",
-      "rounded-xl border border-separator",
+      "rounded-xl border border-agg-separator",
       "p-3 sm:p-4",
-      "hover:bg-secondary-hover transition-colors cursor-pointer"
+      "hover:bg-agg-secondary-hover transition-colors cursor-pointer"
     ),
     role: "button",
     tabIndex: 0,
@@ -770,7 +767,7 @@ var WithdrawMethodCard = ({
       }
     },
     children: [
-      /* @__PURE__ */ jsx8("div", { className: "shrink-0 flex items-center justify-center h-10 w-10 rounded-lg bg-secondary-hover", children: icon }),
+      /* @__PURE__ */ jsx8("div", { className: "shrink-0 flex items-center justify-center h-10 w-10 rounded-lg bg-agg-secondary-hover", children: icon }),
       /* @__PURE__ */ jsxs8("div", { className: "flex-1 min-w-0", children: [
         /* @__PURE__ */ jsx8("p", { className: "agg-type-body-strong text-agg-foreground", children: title }),
         /* @__PURE__ */ jsx8("p", { className: "agg-type-label text-agg-muted-foreground", children: description })
@@ -955,7 +952,7 @@ var KalshiStepCard2 = ({
   title,
   description,
   children
-}) => /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2 rounded-xl bg-secondary-hover p-4", children: [
+}) => /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2 rounded-xl bg-agg-secondary-hover p-4", children: [
   /* @__PURE__ */ jsxs10("p", { className: "agg-type-caption-caps text-agg-muted-foreground", children: [
     "Step ",
     step
@@ -1277,7 +1274,7 @@ var ProfileSetupStep = ({ onContinue }) => {
             ),
             "aria-label": labels.onboarding.profileSetup.uploadProfilePictureAria,
             children: avatarPreview ? /* @__PURE__ */ jsx13(
-              "img",
+              RemoteImage,
               {
                 src: avatarPreview,
                 alt: labels.onboarding.profileSetup.profilePreviewAlt,
@@ -2002,7 +1999,7 @@ var AboutTab = ({
           ),
           "aria-label": labels.onboarding.profileSetup.uploadProfilePictureAria,
           children: resolvedPreview ? /* @__PURE__ */ jsx18(
-            "img",
+            RemoteImage,
             {
               src: resolvedPreview,
               alt: labels.onboarding.profileSetup.profilePreviewAlt,