@agg-build/ui 2.7.3 → 3.0.0

package/dist/index.mjs

@@ -5,13 +5,14 @@ import {
   DefaultAvatar,
   EventMarketPage,
   HomePage,
+  ManageBalancesModal,
   USER_PROFILE_TAB_ACTIVITY,
   USER_PROFILE_TAB_OPEN_ORDERS,
   USER_PROFILE_TAB_POSITIONS,
   UserProfilePage,
   buildAggTxExplorerHref,
   useHomePageModals
-} from "./chunk-MZBYIXYA.mjs";
+} from "./chunk-R362GNI2.mjs";
 import {
   EventList,
   EventListItem,
@@ -28,7 +29,7 @@ import {
   orderbookRowLimitDefault,
   resolveEventDetailsSyncKey,
   useCenterOrderbookSpread
-} from "./chunk-7DM45TMO.mjs";
+} from "./chunk-MKU5Q6PN.mjs";
 import {
   CARD_NETWORK_OPTIONS,
   DepositModal,
@@ -38,7 +39,7 @@ import {
   buildTerminalSummary,
   clearPendingCardSession,
   getPendingCardSession
-} from "./chunk-EDQ64EKO.mjs";
+} from "./chunk-JTSLZARU.mjs";
 import {
   AggNotificationEventsProvider,
   DEPOSIT_MODAL_OPEN_EVENT,
@@ -54,7 +55,7 @@ import {
   requestAggWithdrawModalOpen,
   useClaimWinnings,
   useResolvedMarketClaim
-} from "./chunk-O27JUYCF.mjs";
+} from "./chunk-XIDQ2A6W.mjs";
 import {
   SETTLEMENT_SECTION_ID,
   Settlement,
@@ -75,7 +76,7 @@ import {
   resolveOrderBookRows,
   resolveUnifiedOrderBookEntries,
   useEventTradingContext
-} from "./chunk-JQKJDSTW.mjs";
+} from "./chunk-VR5ZRDQT.mjs";
 import {
   ConnectAccountsStep,
   ConnectKalshiModal,
@@ -84,7 +85,7 @@ import {
   HowItWorksStep,
   OnboardingModal,
   ProfileSetupStep
-} from "./chunk-AHQA3B7D.mjs";
+} from "./chunk-KX3TQ7WC.mjs";
 import {
   AGG_DEFAULT_URL,
   AGG_DOCS_URL,
@@ -206,7 +207,7 @@ import {
   useOptionalToast,
   useToast,
   venueLogoNames
-} from "./chunk-FMYYPNZZ.mjs";
+} from "./chunk-KO6VTRV6.mjs";
 
 // src/notifications/agg-toast-provider.tsx
 import { jsx } from "react/jsx-runtime";
@@ -1049,6 +1050,7 @@ export {
   LinkAccountsIcon,
   LoadingIcon,
   LockIcon,
+  ManageBalancesModal,
   MarketDetails,
   MarketDetailsList,
   Modal,

package/dist/modals.js

@@ -4362,7 +4362,11 @@ var Select = ({
   triggerClassName,
   contentClassName,
   itemClassName,
-  disabled = SELECT_DEFAULT_IS_DISABLED
+  disabled = SELECT_DEFAULT_IS_DISABLED,
+  variant = "default",
+  openOnHover = false,
+  contentAlign = "start",
+  contentSideOffset = 8
 }) => {
   var _a;
   const labels = (0, import_hooks13.useLabels)();
@@ -4373,17 +4377,30 @@ var Select = ({
   const isDisabled = resolveIsSelectDisabled({ disabled, items });
   const selectedItem = resolveSelectedItem(items, value);
   const [isOpen, setIsOpen] = (0, import_react2.useState)(false);
-  const [menuRect, setMenuRect] = (0, import_react2.useState)(
-    null
-  );
+  const [menuRect, setMenuRect] = (0, import_react2.useState)(null);
   const containerRef = (0, import_react2.useRef)(null);
   const portalRef = (0, import_react2.useRef)(null);
-  const handleClose = (0, import_react2.useCallback)(() => setIsOpen(false), []);
+  const closeTimerRef = (0, import_react2.useRef)(null);
+  const openedByHoverRef = (0, import_react2.useRef)(false);
+  const handleClose = (0, import_react2.useCallback)(() => {
+    setIsOpen(false);
+    openedByHoverRef.current = false;
+  }, []);
   const updateMenuRect = (0, import_react2.useCallback)(() => {
     const el = containerRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
-    setMenuRect({ top: r.bottom + 8, left: r.left, width: r.width });
+    setMenuRect({
+      top: r.bottom + contentSideOffset,
+      left: r.left,
+      right: r.right,
+      width: r.width
+    });
+  }, [contentSideOffset]);
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
   }, []);
   (0, import_react2.useLayoutEffect)(() => {
     if (!isOpen) {
@@ -4421,7 +4438,33 @@ var Select = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, handleClose]);
-  const triggerRadiusClass = triggerClassName != null ? triggerClassName : "rounded-agg-md";
+  const handlePointerEnter = (event) => {
+    if (!openOnHover || isDisabled || event.pointerType === "touch") return;
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    if (isOpen) return;
+    openedByHoverRef.current = true;
+    setIsOpen(true);
+  };
+  const handlePointerLeave = (event) => {
+    if (!openOnHover || event.pointerType === "touch") return;
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = setTimeout(() => {
+      handleClose();
+      closeTimerRef.current = null;
+    }, 120);
+  };
+  const handleTriggerClick = () => {
+    if (openedByHoverRef.current && isOpen) {
+      openedByHoverRef.current = false;
+      return;
+    }
+    setIsOpen((previousValue) => !previousValue);
+  };
+  const isInline = variant === "inline";
+  const triggerRadiusClass = triggerClassName != null ? triggerClassName : isInline ? "rounded-agg-sm" : "rounded-agg-md";
   const listbox = menuRect ? /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
     "div",
     {
@@ -4432,16 +4475,20 @@ var Select = ({
       style: {
         position: "fixed",
         top: menuRect.top,
-        left: menuRect.left,
+        left: contentAlign === "start" ? menuRect.left : void 0,
+        right: contentAlign === "end" ? window.innerWidth - menuRect.right : void 0,
         width: menuRect.width,
         zIndex: SELECT_DROPDOWN_Z
       },
       className: cn(
         AGG_ROOT_CLASS_NAME,
         rootClassName,
-        "agg-select-content pointer-events-auto max-h-[min(20rem,calc(100vh-4rem))] overflow-y-auto rounded-[12px] border border-agg-separator bg-agg-secondary p-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)] flex flex-col gap-1",
+        "agg-select-content pointer-events-auto max-h-[min(20rem,calc(100vh-4rem))] overflow-y-auto border border-agg-separator bg-agg-secondary flex flex-col",
+        isInline ? "min-w-[120px] gap-0 rounded-agg-lg py-1 shadow-[0_8px_16px_rgba(0,0,0,0.12)]" : "gap-1 rounded-[12px] p-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)]",
         contentClassName
       ),
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
       children: items.map((item) => {
         const isSelected = item.value === value;
         const isHidden = item.hidden === true;
@@ -4455,9 +4502,10 @@ var Select = ({
             disabled: item.disabled,
             className: cn(
               "agg-select-item",
-              "relative flex w-full items-center gap-3 rounded-[6px] pl-3 pr-5 py-3 text-left text-agg-sm leading-agg-5 outline-none",
+              "relative flex w-full items-center text-left text-agg-sm leading-agg-5 outline-none",
+              isInline ? "gap-2 px-4 py-2" : "gap-3 rounded-[6px] py-3 pl-3 pr-5",
               "hover:bg-agg-secondary-hover focus-visible:bg-agg-secondary-hover",
-              isSelected ? "bg-agg-primary/10 font-agg-normal text-agg-primary" : "font-agg-normal text-agg-foreground",
+              isSelected ? isInline ? "font-agg-bold text-agg-foreground" : "bg-agg-primary/10 font-agg-normal text-agg-primary" : "font-agg-normal text-agg-foreground",
               item.disabled && "cursor-not-allowed opacity-60",
               itemClassName
             ),
@@ -4469,6 +4517,13 @@ var Select = ({
               handleClose();
             },
             children: [
+              isInline && isSelected ? /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+                "span",
+                {
+                  className: "agg-select-item-indicator absolute bottom-2 left-0 top-2 w-1 bg-agg-primary",
+                  "aria-hidden": true
+                }
+              ) : null,
               item.icon ? /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
                 "span",
                 {
@@ -4498,7 +4553,11 @@ var Select = ({
     "div",
     {
       ref: containerRef,
-      className: cn("group/agg-select", "relative inline-flex w-full", className),
+      className: cn(
+        "group/agg-select relative inline-flex",
+        isInline ? "w-auto" : "w-full",
+        className
+      ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
           "button",
@@ -4510,19 +4569,19 @@ var Select = ({
             disabled: isDisabled,
             className: cn(
               "agg-select-trigger",
-              "flex h-10 w-full items-center gap-2 rounded-[8px] border border-agg-separator bg-agg-secondary px-3 py-[9px] pr-10 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground outline-none",
-              "flex items-center gap-2 text-left",
+              "flex cursor-pointer items-center gap-2 font-agg-sans text-agg-foreground outline-none disabled:cursor-not-allowed disabled:opacity-60",
+              isInline ? "h-auto w-auto bg-transparent px-2 py-1 pr-8 text-left text-agg-base leading-agg-6" : "h-10 w-full border border-agg-separator bg-agg-secondary px-3 py-[9px] pr-10 text-left text-agg-sm leading-agg-5",
               triggerRadiusClass,
-              getMotionClassName(
+              !isInline && getMotionClassName(
                 enableAnimations,
                 "transition-[border-color,box-shadow] duration-200 ease-in-out"
               ),
-              isOpen && "border-2 border-agg-primary px-[11px] py-2 ring-0",
-              "hover:border-agg-primary",
-              "focus:border-agg-primary focus:ring-0",
-              "disabled:cursor-not-allowed disabled:opacity-60"
+              !isInline && isOpen && "border-2 border-agg-primary px-[11px] py-2 ring-0",
+              !isInline && "hover:border-agg-primary focus:border-agg-primary focus:ring-0"
             ),
-            onClick: () => setIsOpen((previousValue) => !previousValue),
+            onClick: handleTriggerClick,
+            onPointerEnter: handlePointerEnter,
+            onPointerLeave: handlePointerLeave,
             children: [
               (selectedItem == null ? void 0 : selectedItem.icon) ? /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "h-4 w-4 shrink-0 [&_svg]:h-full [&_svg]:w-full", children: selectedItem.icon }) : (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
                 RemoteImage,
@@ -4536,14 +4595,23 @@ var Select = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { className: "agg-select-chevron pointer-events-none absolute inset-y-0 right-3 inline-flex items-center justify-center text-agg-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
-          Icon,
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+          "span",
           {
-            name: isOpen ? "chevron-up" : "chevron-down-thin",
-            size: "small",
-            color: "currentColor"
+            className: cn(
+              "agg-select-chevron pointer-events-none absolute inset-y-0 inline-flex items-center justify-center",
+              isInline ? "right-2 text-agg-foreground" : "right-3 text-agg-muted-foreground"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+              Icon,
+              {
+                name: isOpen ? "chevron-up" : "chevron-down-thin",
+                size: "small",
+                color: "currentColor"
+              }
+            )
           }
-        ) }),
+        ),
         isOpen && typeof document !== "undefined" && listbox ? (0, import_react_dom.createPortal)(listbox, resolveSelectPortalContainer(containerRef.current)) : null
       ]
     }
@@ -8642,7 +8710,7 @@ var PROFILE_TAB_KEYS = {
   PROFILE_ACCOUNTS: "profile-accounts",
   TRADING_ACCESS: "trading-access"
 };
-var PROFILE_TAB_ITEMS = [
+var getProfileTabItems = () => [
   {
     value: PROFILE_TAB_KEYS.PROFILE_ACCOUNTS,
     label: "Profile & accounts",
@@ -9083,6 +9151,7 @@ var ProfileModal = ({
   const { user } = (0, import_hooks40.useAggAuthState)();
   const toastCtx = useOptionalToast();
   const [activeTab, setActiveTab] = (0, import_react19.useState)(PROFILE_TAB_KEYS.PROFILE_ACCOUNTS);
+  const profileTabItems = (0, import_react19.useMemo)(() => getProfileTabItems(), []);
   const resolvedInitialUsername = (_a = username != null ? username : user == null ? void 0 : user.username) != null ? _a : "";
   const [draftUsername, setDraftUsername] = (0, import_react19.useState)(resolvedInitialUsername);
   const [draftAvatarFile, setDraftAvatarFile] = (0, import_react19.useState)();
@@ -9469,7 +9538,7 @@ var ProfileModal = ({
               className: "w-full [&>div]:w-full",
               variant: "underline",
               classNames: { tabList: "w-full" },
-              items: PROFILE_TAB_ITEMS.map((tab) => ({
+              items: profileTabItems.map((tab) => ({
                 value: tab.value,
                 label: tab.label,
                 icon: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Icon, { name: tab.icon, size: "small" })
@@ -9493,7 +9562,7 @@ var ProfileModal = ({
                 ),
                 role: "tablist",
                 "aria-label": "Profile sections",
-                children: PROFILE_TAB_ITEMS.map((tab) => {
+                children: profileTabItems.map((tab) => {
                   const isActive = activeTab === tab.value;
                   return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
                     "button",

package/dist/modals.mjs

@@ -8,7 +8,7 @@ import {
   buildTerminalSummary,
   clearPendingCardSession,
   getPendingCardSession
-} from "./chunk-EDQ64EKO.mjs";
+} from "./chunk-JTSLZARU.mjs";
 import {
   ConnectAccountsStep,
   ConnectKalshiModal,
@@ -17,8 +17,8 @@ import {
   HowItWorksStep,
   OnboardingModal,
   ProfileSetupStep
-} from "./chunk-AHQA3B7D.mjs";
-import "./chunk-FMYYPNZZ.mjs";
+} from "./chunk-KX3TQ7WC.mjs";
+import "./chunk-KO6VTRV6.mjs";
 export {
   CARD_NETWORK_OPTIONS,
   ConnectAccountsStep,