@rpg-engine/long-bow 0.8.229 → 0.8.231

package/dist/long-bow.esm.js

@@ -3732,26 +3732,35 @@ var ItemTooltip = function ItemTooltip(_ref) {
     atlasJSON = _ref.atlasJSON,
     equipmentSet = _ref.equipmentSet;
   var ref = useRef(null);
+  var rafId = useRef(null);
   useEffect(function () {
     var current = ref.current;
     if (current) {
       var handleMouseMove = function handleMouseMove(event) {
+        if (rafId.current !== null) return;
         var clientX = event.clientX,
           clientY = event.clientY;
-        // Adjust the position of the tooltip based on the mouse position
-        var rect = current.getBoundingClientRect();
-        var tooltipWidth = rect.width;
-        var tooltipHeight = rect.height;
-        var isOffScreenRight = clientX + tooltipWidth + offset > window.innerWidth;
-        var isOffScreenBottom = clientY + tooltipHeight + offset > window.innerHeight;
-        var x = isOffScreenRight ? clientX - tooltipWidth - offset : clientX + offset;
-        var y = isOffScreenBottom ? clientY - tooltipHeight - offset : clientY + offset;
-        current.style.transform = "translate(" + x + "px, " + y + "px)";
-        current.style.opacity = '1';
+        rafId.current = requestAnimationFrame(function () {
+          rafId.current = null;
+          // Adjust the position of the tooltip based on the mouse position
+          var rect = current.getBoundingClientRect();
+          var tooltipWidth = rect.width;
+          var tooltipHeight = rect.height;
+          var isOffScreenRight = clientX + tooltipWidth + offset > window.innerWidth;
+          var isOffScreenBottom = clientY + tooltipHeight + offset > window.innerHeight;
+          var x = isOffScreenRight ? clientX - tooltipWidth - offset : clientX + offset;
+          var y = isOffScreenBottom ? clientY - tooltipHeight - offset : clientY + offset;
+          current.style.transform = "translate(" + x + "px, " + y + "px)";
+          current.style.opacity = '1';
+        });
       };
       window.addEventListener('mousemove', handleMouseMove);
       return function () {
         window.removeEventListener('mousemove', handleMouseMove);
+        if (rafId.current !== null) {
+          cancelAnimationFrame(rafId.current);
+          rafId.current = null;
+        }
       };
     }
     return;
@@ -5357,6 +5366,7 @@ var SimpleTooltip = function SimpleTooltip(_ref) {
   var tooltipRef = useRef(null);
   var triggerRef = useRef(null);
   var timeoutRef = useRef();
+  var rafId = useRef(null);
   var calculatePosition = function calculatePosition() {
     if (!triggerRef.current || !tooltipRef.current) return;
     var triggerRect = triggerRef.current.getBoundingClientRect();
@@ -5408,15 +5418,21 @@ var SimpleTooltip = function SimpleTooltip(_ref) {
   };
   useEffect(function () {
     var handleMouseMove = function handleMouseMove(event) {
-      if (visible && tooltipRef.current && triggerRef.current) {
-        var tooltipRect = tooltipRef.current.getBoundingClientRect();
-        var triggerRect = triggerRef.current.getBoundingClientRect();
-        var isOutsideTooltip = event.clientX < tooltipRect.left || event.clientX > tooltipRect.right || event.clientY < tooltipRect.top || event.clientY > tooltipRect.bottom;
-        var isOutsideTrigger = event.clientX < triggerRect.left || event.clientX > triggerRect.right || event.clientY < triggerRect.top || event.clientY > triggerRect.bottom;
-        if (isOutsideTooltip && isOutsideTrigger) {
-          hideTooltip();
+      if (rafId.current !== null) return;
+      var clientX = event.clientX,
+        clientY = event.clientY;
+      rafId.current = requestAnimationFrame(function () {
+        rafId.current = null;
+        if (visible && tooltipRef.current && triggerRef.current) {
+          var tooltipRect = tooltipRef.current.getBoundingClientRect();
+          var triggerRect = triggerRef.current.getBoundingClientRect();
+          var isOutsideTooltip = clientX < tooltipRect.left || clientX > tooltipRect.right || clientY < tooltipRect.top || clientY > tooltipRect.bottom;
+          var isOutsideTrigger = clientX < triggerRect.left || clientX > triggerRect.right || clientY < triggerRect.top || clientY > triggerRect.bottom;
+          if (isOutsideTooltip && isOutsideTrigger) {
+            hideTooltip();
+          }
         }
-      }
+      });
     };
     var handleScroll = function handleScroll() {
       if (visible) {
@@ -5435,6 +5451,10 @@ var SimpleTooltip = function SimpleTooltip(_ref) {
       document.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('scroll', handleScroll);
       window.removeEventListener('resize', handleResize);
+      if (rafId.current !== null) {
+        cancelAnimationFrame(rafId.current);
+        rafId.current = null;
+      }
       clearTimeout(timeoutRef.current);
     };
   }, [visible]);
@@ -15843,6 +15863,84 @@ var InputRadio = function InputRadio(_ref) {
   }));
 };
 
+/**
+ * Dark RPG-themed radio-style card.
+ * Matches the aesthetic of MarketplaceSettingsPanel OptionCard.
+ * Uses !important overrides to survive RPGUI global CSS.
+ */
+var RadioSelectCard = function RadioSelectCard(_ref) {
+  var label = _ref.label,
+    description = _ref.description,
+    badge = _ref.badge,
+    icon = _ref.icon,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    onClick = _ref.onClick,
+    testId = _ref['data-testid'];
+  return React.createElement(Card, {
+    "$active": active,
+    onClick: onClick,
+    "data-testid": testId,
+    type: "button"
+  }, icon && React.createElement(IconWrap, null, icon), React.createElement(Body, null, React.createElement(Label$7, {
+    "$active": active
+  }, label), description && React.createElement(Description$5, null, description)), badge && React.createElement(Badge, {
+    "$active": active
+  }, badge));
+};
+// ─── Styled Components ────────────────────────────────────────────────────────
+var Card = /*#__PURE__*/styled.button.withConfig({
+  displayName: "RadioSelectCard__Card",
+  componentId: "sc-12jrcz1-0"
+})(["display:flex !important;flex-direction:row !important;align-items:center !important;gap:0.6rem !important;width:100% !important;padding:0.75rem 0.9rem !important;background:", " !important;border:2px solid ", " !important;border-radius:6px !important;cursor:pointer !important;text-align:left !important;transition:border-color 0.15s ease,background 0.15s ease,box-shadow 0.15s ease !important;font-family:inherit !important;box-sizing:border-box !important;&:hover{border-color:", " !important;background:", " !important;box-shadow:", " !important;}&:active{background:rgba(0,0,0,0.5) !important;}"], function (_ref2) {
+  var $active = _ref2.$active;
+  return $active ? 'rgba(245, 158, 11, 0.12)' : 'rgba(0, 0, 0, 0.25)';
+}, function (_ref3) {
+  var $active = _ref3.$active;
+  return $active ? '#f59e0b' : 'rgba(255, 255, 255, 0.08)';
+}, function (_ref4) {
+  var $active = _ref4.$active;
+  return $active ? '#f59e0b' : 'rgba(255, 255, 255, 0.3)';
+}, function (_ref5) {
+  var $active = _ref5.$active;
+  return $active ? 'rgba(245, 158, 11, 0.18)' : 'rgba(255, 255, 255, 0.04)';
+}, function (_ref6) {
+  var $active = _ref6.$active;
+  return $active ? '0 0 14px rgba(245, 158, 11, 0.3)' : '0 0 8px rgba(255, 255, 255, 0.05)';
+});
+var IconWrap = /*#__PURE__*/styled.span.withConfig({
+  displayName: "RadioSelectCard__IconWrap",
+  componentId: "sc-12jrcz1-1"
+})(["font-size:1.4rem !important;line-height:1 !important;flex-shrink:0 !important;"]);
+var Body = /*#__PURE__*/styled.div.withConfig({
+  displayName: "RadioSelectCard__Body",
+  componentId: "sc-12jrcz1-2"
+})(["flex:1 !important;min-width:0 !important;display:flex !important;flex-direction:column !important;gap:0.2rem !important;"]);
+var Label$7 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "RadioSelectCard__Label",
+  componentId: "sc-12jrcz1-3"
+})(["font-size:0.72rem !important;font-weight:bold !important;color:", " !important;text-transform:uppercase !important;letter-spacing:0.8px !important;line-height:1.2 !important;"], function (_ref7) {
+  var $active = _ref7.$active;
+  return $active ? '#f59e0b' : 'rgba(255, 255, 255, 0.9)';
+});
+var Description$5 = /*#__PURE__*/styled.span.withConfig({
+  displayName: "RadioSelectCard__Description",
+  componentId: "sc-12jrcz1-4"
+})(["font-size:0.62rem !important;color:rgba(255,255,255,0.45) !important;line-height:1.4 !important;"]);
+var Badge = /*#__PURE__*/styled.span.withConfig({
+  displayName: "RadioSelectCard__Badge",
+  componentId: "sc-12jrcz1-5"
+})(["flex-shrink:0 !important;padding:0.15rem 0.45rem !important;background:", " !important;border:1px solid ", " !important;border-radius:20px !important;font-size:0.55rem !important;font-weight:bold !important;letter-spacing:0.5px !important;text-transform:uppercase !important;color:", " !important;white-space:nowrap !important;"], function (_ref8) {
+  var $active = _ref8.$active;
+  return $active ? 'rgba(245, 158, 11, 0.2)' : 'rgba(255, 255, 255, 0.06)';
+}, function (_ref9) {
+  var $active = _ref9.$active;
+  return $active ? 'rgba(245, 158, 11, 0.5)' : 'rgba(255, 255, 255, 0.12)';
+}, function (_ref10) {
+  var $active = _ref10.$active;
+  return $active ? '#f59e0b' : 'rgba(255, 255, 255, 0.45)';
+});
+
 /**
  * A selectable row with an amber radio circle indicator.
  * Used for single-select option lists throughout the Marketplace UI.
@@ -16362,7 +16460,7 @@ var SkillInfoModal = function SkillInfoModal(_ref) {
     "$color": info.color
   }, info.name), React.createElement(CloseButton$g, {
     onPointerDown: onClose
-  }, React.createElement(FaTimes, null))), React.createElement(Section$4, null, React.createElement(Label$7, null, "What it does"), React.createElement(Text$1, null, info.description)), React.createElement(Section$4, null, React.createElement(Label$7, null, "How to train"), React.createElement(Text$1, null, info.howToTrain)), info.notes && React.createElement(Section$4, null, React.createElement(Label$7, null, "Notes"), React.createElement(Text$1, null, info.notes)))));
+  }, React.createElement(FaTimes, null))), React.createElement(Section$4, null, React.createElement(Label$8, null, "What it does"), React.createElement(Text$1, null, info.description)), React.createElement(Section$4, null, React.createElement(Label$8, null, "How to train"), React.createElement(Text$1, null, info.howToTrain)), info.notes && React.createElement(Section$4, null, React.createElement(Label$8, null, "Notes"), React.createElement(Text$1, null, info.notes)))));
 };
 var Overlay$9 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillInfoModal__Overlay",
@@ -16395,7 +16493,7 @@ var Section$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillInfoModal__Section",
   componentId: "sc-pqkzdj-6"
 })(["display:flex;flex-direction:column;gap:6px;"]);
-var Label$7 = /*#__PURE__*/styled.span.withConfig({
+var Label$8 = /*#__PURE__*/styled.span.withConfig({
   displayName: "SkillInfoModal__Label",
   componentId: "sc-pqkzdj-7"
 })(["font-size:0.5rem;font-weight:bold;text-transform:uppercase;letter-spacing:0.05em;color:rgba(255,255,255,0.45);"]);
@@ -16732,7 +16830,7 @@ var SpellInfo$1 = function SpellInfo(_ref) {
     className: "label"
   }, "Required Item:"), React.createElement("div", {
     className: "value"
-  }, requiredItem))), React.createElement(Description$5, null, description));
+  }, requiredItem))), React.createElement(Description$6, null, description));
 };
 var Container$G = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Container",
@@ -16746,7 +16844,7 @@ var Type$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Type",
   componentId: "sc-4hbw3q-2"
 })(["font-size:", ";margin-top:0.2rem;color:", ";"], uiFonts.size.small, uiColors.lightGray);
-var Description$5 = /*#__PURE__*/styled.div.withConfig({
+var Description$6 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Description",
   componentId: "sc-4hbw3q-3"
 })(["margin-top:1.5rem;font-size:", ";color:", ";font-style:italic;"], uiFonts.size.small, uiColors.lightGray);
@@ -16979,7 +17077,7 @@ var Spell = function Spell(_ref) {
     centered: true
   })), React.createElement(Info, null, React.createElement(Title$k, null, React.createElement("span", null, name), React.createElement("span", {
     className: "spell"
-  }, "(", magicWords, ")")), React.createElement(Description$6, null, description)), React.createElement(Divider$2, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
+  }, "(", magicWords, ")")), React.createElement(Description$7, null, description)), React.createElement(Divider$2, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
     className: "mana"
   }, manaCost))));
 };
@@ -17002,7 +17100,7 @@ var Title$k = /*#__PURE__*/styled.p.withConfig({
   displayName: "Spell__Title",
   componentId: "sc-j96fa2-3"
 })(["display:flex;flex-wrap:wrap;align-items:center;margin-bottom:5px;margin:0;span{font-size:", " !important;font-weight:bold !important;color:", " !important;margin-right:0.5rem;}.spell{font-size:", " !important;font-weight:normal !important;color:", " !important;}"], uiFonts.size.medium, uiColors.yellow, uiFonts.size.small, uiColors.lightGray);
-var Description$6 = /*#__PURE__*/styled.div.withConfig({
+var Description$7 = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spell__Description",
   componentId: "sc-j96fa2-4"
 })(["font-size:", " !important;line-height:1.1 !important;"], uiFonts.size.small);
@@ -39790,7 +39888,7 @@ var StoreRedeemSection = function StoreRedeemSection(_ref) {
       onClick: handleReset
     }))));
   }
-  return React.createElement(Container$O, null, React.createElement(Title$p, null, "Redeem a Voucher Code"), React.createElement(Description$7, null, "Enter your voucher code below to receive Definya Coins."), React.createElement(InputRow, null, React.createElement(CodeInput, {
+  return React.createElement(Container$O, null, React.createElement(Title$p, null, "Redeem a Voucher Code"), React.createElement(Description$8, null, "Enter your voucher code below to receive Definya Coins."), React.createElement(InputRow, null, React.createElement(CodeInput, {
     type: "text",
     value: code,
     onChange: function onChange(e) {
@@ -39821,7 +39919,7 @@ var Title$p = /*#__PURE__*/styled.h3.withConfig({
   displayName: "StoreRedeemSection__Title",
   componentId: "sc-1pzosml-1"
 })(["font-family:'Press Start 2P',cursive;font-size:0.85rem;color:", ";margin:0;text-align:center;"], uiColors.white);
-var Description$7 = /*#__PURE__*/styled.p.withConfig({
+var Description$8 = /*#__PURE__*/styled.p.withConfig({
   displayName: "StoreRedeemSection__Description",
   componentId: "sc-1pzosml-2"
 })(["font-family:'Press Start 2P',cursive;font-size:0.55rem;color:", ";margin:0;text-align:center;line-height:1.6;"], uiColors.lightGray);
@@ -39887,7 +39985,7 @@ var StoreItemDetails = function StoreItemDetails(_ref) {
     alt: item.name
   })), React.createElement(ItemInfo$3, null, React.createElement(ItemName$9, null, item.name), React.createElement(ItemPrice$2, null, currencySymbol, 'priceUSD' in item ? item.priceUSD : (_item$regionalPrice = item.regionalPrice) != null ? _item$regionalPrice : item.price, item.dcPrice ? React.createElement(React.Fragment, null, ' ', "\xB7 ", React.createElement(MMORPGNumber, {
     value: item.dcPrice
-  }), " DC") : ''), React.createElement(Description$8, null, item.description))), React.createElement(Actions$1, null, React.createElement(CTAButton, {
+  }), " DC") : ''), React.createElement(Description$9, null, item.description))), React.createElement(Actions$1, null, React.createElement(CTAButton, {
     icon: React.createElement(ShoppingCart, null),
     label: "Add to Cart",
     onClick: function onClick() {
@@ -39932,7 +40030,7 @@ var ItemPrice$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "StoreItemDetails__ItemPrice",
   componentId: "sc-k3ho5z-8"
 })(["font-family:'Press Start 2P',cursive;font-size:1rem;color:#fef08a;"]);
-var Description$8 = /*#__PURE__*/styled.p.withConfig({
+var Description$9 = /*#__PURE__*/styled.p.withConfig({
   displayName: "StoreItemDetails__Description",
   componentId: "sc-k3ho5z-9"
 })(["margin:0;font-family:'Press Start 2P',cursive;font-size:0.875rem;line-height:1.6;color:#ffffff;"]);
@@ -40845,5 +40943,5 @@ var LessonContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-7tgzv2-7"
 })(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
-export { ActionButtons, AsyncDropdown, BLUEPRINTS_PER_PAGE, BUY_ORDERS_PER_PAGE, BlueprintSearchModal, Button, ButtonTypes, BuyOrderPanel, BuyOrderRow, CTAButton, CartView, CharacterDetailModal, CharacterListingForm, CharacterListingModal, CharacterMarketplacePanel, CharacterMarketplaceRows, CharacterSelection, CharacterSkinSelectionModal, CharacterTradePanel, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, ConfirmModal, CountdownTimer, CraftBook, DCRateStrip, DCWalletContent, DCWalletModal, DailyTasks, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FeaturedBanner, FriendList, GemSelector, GroupedBuyOrderRow, GroupedCharacterMarketplaceRow, GroupedMarketplaceRow, HISTORY_ITEMS_PER_PAGE, HistoryDialog, HistoryPanel, ImageCarousel, ImgSide, InformationCenter, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, LoginStreakPanel, Marketplace, MarketplaceBuyModal, MarketplaceRows, MarketplaceSettingsPanel, MetadataCollector, MultitabType, MyCharacterListingsPanel, NPCDialog, NPCDialogType, NPCMultiDialog, Pagination, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PaymentMethodModal, PlayersRow, ProgressBar$1 as ProgressBar, PropertySelect, PurchaseSuccess, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RadioCircle$2 as RadioCircle, RadioOption$1 as RadioOption, RadioOptionLabel, RadioOptionSub, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, SocialModal, Spellbook, SpriteFromAtlas, Stepper, Store, StoreBadges, StoreRedeemSection, TRANSACTION_TYPE_FILTER_ALL, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer$1 as TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TrustBar, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener, useStoreCart };
+export { ActionButtons, AsyncDropdown, BLUEPRINTS_PER_PAGE, BUY_ORDERS_PER_PAGE, BlueprintSearchModal, Button, ButtonTypes, BuyOrderPanel, BuyOrderRow, CTAButton, CartView, CharacterDetailModal, CharacterListingForm, CharacterListingModal, CharacterMarketplacePanel, CharacterMarketplaceRows, CharacterSelection, CharacterSkinSelectionModal, CharacterTradePanel, Chat, ChatDeprecated, ChatRevamp, CheckButton, CheckItem, CircularController, ConfirmModal, CountdownTimer, CraftBook, DCRateStrip, DCWalletContent, DCWalletModal, DailyTasks, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, EquipmentSlotSpriteByType, ErrorBoundary, FeaturedBanner, FriendList, GemSelector, GroupedBuyOrderRow, GroupedCharacterMarketplaceRow, GroupedMarketplaceRow, HISTORY_ITEMS_PER_PAGE, HistoryDialog, HistoryPanel, ImageCarousel, ImgSide, InformationCenter, Input, InputRadio, InternalTabs, ItemContainer$1 as ItemContainer, ItemPropertySimpleHandler, ItemQuantitySelectorModal, ItemSelector, ItemSlot, JoystickDPad, Leaderboard, ListMenu, LoginStreakPanel, Marketplace, MarketplaceBuyModal, MarketplaceRows, MarketplaceSettingsPanel, MetadataCollector, MultitabType, MyCharacterListingsPanel, NPCDialog, NPCDialogType, NPCMultiDialog, Pagination, PartyCreate, PartyDashboard, PartyInvite, PartyManager, PartyManagerRow, PartyRow, PaymentMethodModal, PlayersRow, ProgressBar$1 as ProgressBar, PropertySelect, PurchaseSuccess, QuantitySelectorModal, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RadioCircle$2 as RadioCircle, RadioOption$1 as RadioOption, RadioOptionLabel, RadioOptionSub, RadioSelectCard, RangeSlider, RangeSliderType, SelectArrow, Shortcuts, SimpleImageCarousel, SkillProgressBar, SkillsContainer, SocialModal, Spellbook, SpriteFromAtlas, Stepper, Store, StoreBadges, StoreRedeemSection, TRANSACTION_TYPE_FILTER_ALL, TabBody, Table, TableCell, TableHeader, TableRow, TabsContainer$1 as TabsContainer, TextArea, TimeWidget, Tooltip, TradingMenu, Truncate, TrustBar, TutorialStepper, UserActionLink, _RPGUI, formatQuestStatus, formatQuestText, getMockedPlayersRowsLeader, getMockedPlayersRowsNotLeader, getQuestStatusColor, mockedPartyManager, mockedPartyRows, mockedPlayersRows, mockedPlayersRows2, useEventListener, useStoreCart };
 //# sourceMappingURL=long-bow.esm.js.map