@rpg-engine/long-bow 0.6.5 → 0.6.7

package/dist/index.d.ts

@@ -24,6 +24,8 @@ export * from './components/Leaderboard/Leaderboard';
 export * from './components/ListMenu';
 export * from './components/Marketplace/Marketplace';
 export * from './components/Marketplace/MarketplaceRows';
+export * from './components/Multitab/TabBody';
+export * from './components/Multitab/TabsContainer';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/NPCMultiDialog';
 export * from './components/NPCDialog/QuestionDialog/QuestionDialog';

package/dist/long-bow.cjs.development.js

@@ -17512,6 +17512,100 @@ var PagerContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-h904b1-0"
 })(["display:flex;justify-content:space-between;align-items:center;width:calc(100% - 30px);"]);
 
+var TabBody = function TabBody(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    styles = _ref.styles;
+  return React__default.createElement(Container$o, {
+    styles: styles,
+    "data-tab-id": id
+  }, children);
+};
+var Container$o = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TabBody__Container",
+  componentId: "sc-196oof2-0"
+})(["width:100%;height:", ";overflow-y:auto;"], function (props) {
+  var _props$styles;
+  return ((_props$styles = props.styles) == null ? void 0 : _props$styles.height) || 'auto';
+});
+
+var Tab$1 = function Tab(_ref) {
+  var active = _ref.active,
+    label = _ref.label,
+    onPointerDown = _ref.onPointerDown,
+    type = _ref.type;
+  return React__default.createElement(CustomTab, {
+    activeTab: active,
+    onPointerDown: onPointerDown,
+    className: type
+  }, React__default.createElement("p", null, label));
+};
+var CustomTab = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Tab__CustomTab",
+  componentId: "sc-qw5dfu-0"
+})(["width:120px;color:white;font-size:0.8rem;&.gray{border-left:0.25rem solid rgba(0,0,0,0.25);border-right:0.25rem solid rgba(0,0,0,0.25);border-top:0.25rem solid rgba(0,0,0,0.25);border-bottom:", ";background:", ";}&.brown{border-left:0.25rem solid #996d55;border-right:0.25rem solid #996d55;border-top:0.25rem solid #996d55;border-bottom:", ";background:", ";}margin-right:10px;p{text-align:center;font-size:0.6rem;opacity:", ";}border-radius:5px 5px 0 0;position:relative;top:0.3rem;"], function (props) {
+  return props.activeTab ? '' : '0.25rem solid rgba(0, 0, 0, 0.25)';
+}, function (props) {
+  return props.activeTab ? '#4E4A4E' : '#2b292b';
+}, function (props) {
+  return props.activeTab ? '' : '0.25rem solid #996d55';
+}, function (props) {
+  return props.activeTab ? '#BF886A' : '#B67051';
+}, function (props) {
+  return props.activeTab ? '1' : '0.5';
+});
+
+(function (MultitabType) {
+  MultitabType["Brown"] = "brown";
+  MultitabType["Gray"] = "gray";
+})(exports.MultitabType || (exports.MultitabType = {}));
+var TabsContainer = function TabsContainer(_ref) {
+  var children = _ref.children,
+    onCloseButton = _ref.onCloseButton,
+    tabs = _ref.tabs,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? exports.MultitabType.Brown : _ref$type;
+  var _useState = React.useState(tabs[0].id),
+    selectedTab = _useState[0],
+    setSelectedTab = _useState[1]; //by default the first one
+  var onRenderTabs = function onRenderTabs() {
+    return tabs.map(function (tab, index) {
+      return React__default.createElement(Tab$1, {
+        type: type,
+        active: selectedTab === tab.id,
+        label: tab.label,
+        key: tab.label + "_" + index,
+        onPointerDown: function onPointerDown() {
+          return setSelectedTab(tab.id);
+        }
+      });
+    });
+  };
+  var onGetContainerType = function onGetContainerType() {
+    switch (type) {
+      case exports.MultitabType.Brown:
+        return exports.RPGUIContainerTypes.FramedGold;
+      case exports.MultitabType.Gray:
+        return exports.RPGUIContainerTypes.Framed;
+      default:
+        return exports.RPGUIContainerTypes.Framed;
+    }
+  };
+  return React__default.createElement(DraggableContainer, {
+    onCloseButton: onCloseButton,
+    type: onGetContainerType()
+  }, onRenderTabs(), React__default.createElement(BodyContainer, {
+    selectedTab: selectedTab,
+    className: type
+  }, children));
+};
+var BodyContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TabsContainer__BodyContainer",
+  componentId: "sc-s81iap-0"
+})(["display:flex;width:100%;height:100%;justify-content:space-between;& > *:not([data-tab-id=", "]){display:none;}&.brown{border:0.25rem solid #996D55;background-color:#BF886A;}&.gray{border:0.25rem solid rgba(0,0,0,0.25);background-color:#4E4A4E;}border-radius:5px;padding:0.5rem;"], function (props) {
+  return props.selectedTab;
+});
+
 var PartyCreate = function PartyCreate(_ref) {
   var onClose = _ref.onClose,
     onCreate = _ref.onCreate;
@@ -17965,7 +18059,7 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React__default.createElement(Container$o, {
+  return React__default.createElement(Container$p, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -17995,7 +18089,7 @@ var TextOverlay$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$o = /*#__PURE__*/styled__default.div.withConfig({
+var Container$p = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", " @media (max-width:950px){transform:scale(", ");}"], function (props) {
@@ -18177,9 +18271,9 @@ var NoQuestContainer = /*#__PURE__*/styled__default.div.withConfig({
 
 var RPGUIScrollbar = function RPGUIScrollbar(_ref) {
   var children = _ref.children;
-  return React__default.createElement(Container$p, null, children);
+  return React__default.createElement(Container$q, null, children);
 };
-var Container$p = /*#__PURE__*/styled__default.div.withConfig({
+var Container$q = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "RPGUIScrollbar__Container",
   componentId: "sc-p3msmb-0"
 })([".rpgui-content ::-webkit-scrollbar,.rpgui-content::-webkit-scrollbar{width:25px !important;}.rpgui-content ::-webkit-scrollbar-track,.rpgui-content::-webkit-scrollbar-track{background-size:25px 60px !important;}"]);
@@ -18365,7 +18459,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
-  return React__default.createElement(Container$q, {
+  return React__default.createElement(Container$r, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -18374,7 +18468,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$q = /*#__PURE__*/styled__default.div.withConfig({
+var Container$r = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -18668,7 +18762,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React__default.createElement(Container$r, null, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$9, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
+  return React__default.createElement(Container$s, null, React__default.createElement(Header$1, null, React__default.createElement("div", null, React__default.createElement(Title$9, null, name), React__default.createElement(Type$1, null, magicWords))), React__default.createElement(Statistic$1, null, React__default.createElement("div", {
     className: "label"
   }, "Casting Type:"), React__default.createElement("div", {
     className: "value"
@@ -18694,7 +18788,7 @@ var SpellInfo = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React__default.createElement(Description$2, null, description));
 };
-var Container$r = /*#__PURE__*/styled__default.div.withConfig({
+var Container$s = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
@@ -18748,7 +18842,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$s, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$t, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -18773,7 +18867,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$s = /*#__PURE__*/styled__default.div.withConfig({
+var Container$t = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "MobileSpellTooltip__Container",
   componentId: "sc-6p7uvr-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
@@ -18814,13 +18908,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$t, {
+  return React__default.createElement(ModalPortal, null, React__default.createElement(Container$u, {
     ref: ref
   }, React__default.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$t = /*#__PURE__*/styled__default.div.withConfig({
+var Container$u = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "SpellTooltip__Container",
   componentId: "sc-1go0gwg-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -18880,7 +18974,7 @@ var Spell = function Spell(_ref) {
   var IMAGE_SCALE = 2;
   return React__default.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React__default.createElement(Container$u, {
+  }, React__default.createElement(Container$v, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -18899,7 +18993,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$u = /*#__PURE__*/styled__default.button.withConfig({
+var Container$v = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -18978,7 +19072,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React__default.createElement(Container$v, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
+  }, React__default.createElement(Container$w, null, React__default.createElement(Title$b, null, "Learned Spells"), React__default.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -19014,7 +19108,7 @@ var Title$b = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$v = /*#__PURE__*/styled__default.div.withConfig({
+var Container$w = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -19426,11 +19520,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React__default.createElement(Container$w, {
+  return React__default.createElement(Container$x, {
     maxLines: maxLines
   }, children);
 };
-var Container$w = /*#__PURE__*/styled__default.div.withConfig({
+var Container$x = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
@@ -19576,6 +19670,8 @@ exports.SkillsContainer = SkillsContainer;
 exports.Spellbook = Spellbook;
 exports.SpriteFromAtlas = SpriteFromAtlas;
 exports.Stepper = Stepper;
+exports.TabBody = TabBody;
+exports.TabsContainer = TabsContainer;
 exports.TextArea = TextArea;
 exports.TimeWidget = TimeWidget;
 exports.TradingMenu = TradingMenu;