@agg-build/ui 2.7.3 → 3.0.0

package/dist/{chunk-EDQ64EKO.mjs → chunk-JTSLZARU.mjs}

@@ -2,7 +2,7 @@
 import {
   ConnectKalshiModal,
   dispatchAggDepositNotification
-} from "./chunk-AHQA3B7D.mjs";
+} from "./chunk-KX3TQ7WC.mjs";
 import {
   BoltIcon,
   Button,
@@ -35,7 +35,7 @@ import {
   shortenAddress,
   useOptionalToast,
   venueLogoLabels
-} from "./chunk-FMYYPNZZ.mjs";
+} from "./chunk-KO6VTRV6.mjs";
 
 // src/deposit/index.tsx
 import { useAggAuthState, useAggUiConfig, useDepositAddresses, useLabels as useLabels11 } from "@agg-build/hooks";
@@ -2491,7 +2491,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",
@@ -2938,6 +2938,7 @@ var ProfileModal = ({
   const { user } = useAggAuthState2();
   const toastCtx = useOptionalToast();
   const [activeTab, setActiveTab] = useState4(PROFILE_TAB_KEYS.PROFILE_ACCOUNTS);
+  const profileTabItems = useMemo3(() => getProfileTabItems(), []);
   const resolvedInitialUsername = (_a = username != null ? username : user == null ? void 0 : user.username) != null ? _a : "";
   const [draftUsername, setDraftUsername] = useState4(resolvedInitialUsername);
   const [draftAvatarFile, setDraftAvatarFile] = useState4();
@@ -3324,7 +3325,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__ */ jsx20(Icon, { name: tab.icon, size: "small" })
@@ -3348,7 +3349,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__ */ jsxs20(
                     "button",

package/dist/{chunk-FMYYPNZZ.mjs → chunk-KO6VTRV6.mjs}

@@ -8528,7 +8528,13 @@ NumberValue.displayName = "NumberValue";
 
 // src/primitives/select/index.tsx
 import { useLabels as useLabels14, useSdkUiConfig as useSdkUiConfig14 } from "@agg-build/hooks";
-import { useCallback as useCallback4, useEffect as useEffect7, useLayoutEffect as useLayoutEffect2, useRef as useRef7, useState as useState8 } from "react";
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect7,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef7,
+  useState as useState8
+} from "react";
 import { createPortal } from "react-dom";
 
 // src/primitives/select/select.constants.ts
@@ -8565,7 +8571,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 = useLabels14();
@@ -8576,17 +8586,30 @@ var Select = ({
   const isDisabled = resolveIsSelectDisabled({ disabled, items });
   const selectedItem = resolveSelectedItem(items, value);
   const [isOpen, setIsOpen] = useState8(false);
-  const [menuRect, setMenuRect] = useState8(
-    null
-  );
+  const [menuRect, setMenuRect] = useState8(null);
   const containerRef = useRef7(null);
   const portalRef = useRef7(null);
-  const handleClose = useCallback4(() => setIsOpen(false), []);
+  const closeTimerRef = useRef7(null);
+  const openedByHoverRef = useRef7(false);
+  const handleClose = useCallback4(() => {
+    setIsOpen(false);
+    openedByHoverRef.current = false;
+  }, []);
   const updateMenuRect = useCallback4(() => {
     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]);
+  useEffect7(() => {
+    return () => {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    };
   }, []);
   useLayoutEffect2(() => {
     if (!isOpen) {
@@ -8624,7 +8647,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__ */ jsx129(
     "div",
     {
@@ -8635,16 +8684,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;
@@ -8658,9 +8711,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
             ),
@@ -8672,6 +8726,13 @@ var Select = ({
               handleClose();
             },
             children: [
+              isInline && isSelected ? /* @__PURE__ */ jsx129(
+                "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__ */ jsx129(
                 "span",
                 {
@@ -8701,7 +8762,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__ */ jsxs122(
           "button",
@@ -8713,19 +8778,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__ */ jsx129("span", { className: "h-4 w-4 shrink-0 [&_svg]:h-full [&_svg]:w-full", children: selectedItem.icon }) : (selectedItem == null ? void 0 : selectedItem.iconUrl) ? /* @__PURE__ */ jsx129(
                 RemoteImage,
@@ -8739,14 +8804,23 @@ var Select = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx129("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__ */ jsx129(
-          Icon,
+        /* @__PURE__ */ jsx129(
+          "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__ */ jsx129(
+              Icon,
+              {
+                name: isOpen ? "chevron-up" : "chevron-down-thin",
+                size: "small",
+                color: "currentColor"
+              }
+            )
           }
-        ) }),
+        ),
         isOpen && typeof document !== "undefined" && listbox ? createPortal(listbox, resolveSelectPortalContainer(containerRef.current)) : null
       ]
     }

package/dist/{chunk-AHQA3B7D.mjs → chunk-KX3TQ7WC.mjs}

@@ -18,7 +18,7 @@ import {
   __spreadProps,
   __spreadValues,
   cn
-} from "./chunk-FMYYPNZZ.mjs";
+} from "./chunk-KO6VTRV6.mjs";
 
 // src/geo-block-banner/index.tsx
 import { useLabels } from "@agg-build/hooks";

package/dist/{chunk-7DM45TMO.mjs → chunk-MKU5Q6PN.mjs}

@@ -24,7 +24,7 @@ import {
   resolveUnifiedOrderBookEntries,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-JQKJDSTW.mjs";
+} from "./chunk-VR5ZRDQT.mjs";
 import {
   AutocompleteSelect,
   Badge,
@@ -76,7 +76,7 @@ import {
   sortCategoriesForNavigation,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-FMYYPNZZ.mjs";
+} from "./chunk-KO6VTRV6.mjs";
 
 // src/events/item/index.tsx
 import {
@@ -2349,7 +2349,7 @@ var EventListItemDetailsGraphSection = ({
   }, [chartOutcomeLabel, (_d = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _d.label]);
   const {
     chart: { selectedChartTimeRange },
-    formatting: { formatPercent },
+    formatting: { formatPercent, formatPrice },
     general: { theme }
   } = useSdkUiConfig2();
   const isDarkTheme = theme === "dark";
@@ -2624,8 +2624,8 @@ var EventListItemDetailsGraphSection = ({
                     });
                     return {
                       value: outcome.id,
-                      label: `${(_d3 = outcome.title) != null ? _d3 : outcome.label} ${formatProbabilityCents(price)}`,
-                      ariaLabel: `${(_e2 = outcome.title) != null ? _e2 : outcome.label} ${formatProbabilityCents(price)}`
+                      label: `${(_d3 = outcome.title) != null ? _d3 : outcome.label} ${formatProbabilityCents(price, formatPrice)}`,
+                      ariaLabel: `${(_e2 = outcome.title) != null ? _e2 : outcome.label} ${formatProbabilityCents(price, formatPrice)}`
                     };
                   })
                 }
@@ -3225,6 +3225,7 @@ var OrderbookRow = ({
   entry,
   formatNumber,
   formatCurrency,
+  formatPrice,
   enableAnimations,
   showBadge,
   badgeLabel
@@ -3293,7 +3294,7 @@ var OrderbookRow = ({
             "w-9 min-w-9 md:min-w-10 md:w-10 text-agg-sm font-agg-bold leading-agg-5",
             priceClassName
           ),
-          children: formatProbabilityCents(entry.row.price)
+          children: formatProbabilityCents(entry.row.price, formatPrice)
         }
       ),
       /* @__PURE__ */ jsx6(OrderbookVenueLogos, { venues })
@@ -3315,7 +3316,10 @@ var Orderbook = ({
   className
 }) => {
   var _a, _b, _c, _d, _e;
-  const { enableWebsocketsLogs } = useAggUiConfig();
+  const {
+    enableWebsocketsLogs,
+    formatting: { formatPrice }
+  } = useAggUiConfig();
   const labels = __spreadValues(__spreadValues({}, orderbookDefaultLabels), labelsProp);
   const scrollContainerRef = useRef5(null);
   const spreadRowRef = useRef5(null);
@@ -3380,6 +3384,7 @@ var Orderbook = ({
                 entry,
                 formatNumber,
                 formatCurrency,
+                formatPrice,
                 enableAnimations,
                 showBadge: index === askEntries.length - 1,
                 badgeLabel: labels.asks
@@ -3392,7 +3397,7 @@ var Orderbook = ({
                 ref: spreadRowRef,
                 className: "agg-orderbook-spread flex items-center border-y border-agg-separator h-9 px-5 py-2 gap-3 md:gap-10",
                 role: "separator",
-                "aria-label": `${labels.midPrice}: ${formatProbabilityCents((_b = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _b : null)}, ${labels.spread}: ${formatProbabilityCents((_c = spreadEntry == null ? void 0 : spreadEntry.spread) != null ? _c : null)}`,
+                "aria-label": `${labels.midPrice}: ${formatProbabilityCents((_b = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _b : null, formatPrice)}, ${labels.spread}: ${formatProbabilityCents((_c = spreadEntry == null ? void 0 : spreadEntry.spread) != null ? _c : null)}`,
                 children: [
                   /* @__PURE__ */ jsxs5(
                     Typography,
@@ -3402,7 +3407,7 @@ var Orderbook = ({
                       children: [
                         "Last: ",
                         labels.lastOutcome ? `${labels.lastOutcome} ` : "",
-                        formatProbabilityCents((_d = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _d : null)
+                        formatProbabilityCents((_d = spreadEntry == null ? void 0 : spreadEntry.midPrice) != null ? _d : null, formatPrice)
                       ]
                     }
                   ),
@@ -3429,6 +3434,7 @@ var Orderbook = ({
                 entry,
                 formatNumber,
                 formatCurrency,
+                formatPrice,
                 enableAnimations,
                 showBadge: index === 0,
                 badgeLabel: labels.bids
@@ -3599,6 +3605,7 @@ var buildVenueMarketIdByVenue = (venueMarkets) => {
 };
 
 // src/events/market-details/market-details-outcome-button.tsx
+import { useAggUiConfig as useAggUiConfig2 } from "@agg-build/hooks";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var marketDetailsOutcomeButtonToneClasses = {
   positive: {
@@ -3649,6 +3656,7 @@ var OutcomePriceContent = ({
   value,
   textClassName
 }) => {
+  const { formatPrice } = useAggUiConfig2().formatting;
   if (isLoading) {
     return /* @__PURE__ */ jsx8(
       "span",
@@ -3667,7 +3675,7 @@ var OutcomePriceContent = ({
       as: "span",
       variant: isSelected ? "body-strong" : "body",
       className: cn("shrink-0 whitespace-nowrap", textClassName),
-      children: formatProbabilityCents(value)
+      children: formatProbabilityCents(value, formatPrice)
     }
   );
 };
@@ -3786,7 +3794,7 @@ var MarketDetailsGraphPanel = ({
   var _a, _b, _c;
   const config = useSdkUiConfig3();
   const {
-    formatting: { formatPercent, formatCompactCurrency },
+    formatting: { formatPercent, formatCompactCurrency, formatPrice },
     general: { theme }
   } = config;
   const isDarkTheme = theme === "dark";
@@ -4000,8 +4008,8 @@ var MarketDetailsGraphPanel = ({
                   const price = outcome.probability;
                   return {
                     value: outcome.id,
-                    label: `${(_a3 = outcome == null ? void 0 : outcome.title) != null ? _a3 : outcome.label} ${formatProbabilityCents(price)}`,
-                    ariaLabel: `${(_b3 = outcome == null ? void 0 : outcome.title) != null ? _b3 : outcome.label} ${formatProbabilityCents(price)}`
+                    label: `${(_a3 = outcome == null ? void 0 : outcome.title) != null ? _a3 : outcome.label} ${formatProbabilityCents(price, formatPrice)}`,
+                    ariaLabel: `${(_b3 = outcome == null ? void 0 : outcome.title) != null ? _b3 : outcome.label} ${formatProbabilityCents(price, formatPrice)}`
                   };
                 })
               }