@rpg-engine/long-bow 0.6.61 → 0.6.63

package/dist/components/TableTab/TableTab.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface TabItem {
+    id: string;
+    title: string;
+    content: React.ReactNode;
+}
+export interface TableTabProps {
+    tabs: TabItem[];
+    activeColor?: string;
+    activeTextColor: string;
+    inactiveColor?: string;
+    borderColor?: string;
+    hoverColor?: string;
+}
+export declare const TableTab: React.FC<TableTabProps>;
+export {};

package/dist/index.d.ts

@@ -45,6 +45,7 @@ export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
 export * from './components/Spellbook/Spellbook';
 export * from './components/Stepper';
+export * from './components/TableTab/TableTab';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';

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

@@ -26985,7 +26985,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
     };
   }, []);
   return React__default.createElement(Draggable, {
-    cancel: ".container-close," + cancelDrag,
+    cancel: ".container-close,input,button," + cancelDrag,
     disabled: dragDisabled,
     onDrag: function onDrag(_e, data) {
       if (onPositionChange) {
@@ -32883,6 +32883,68 @@ var ProgressIndicator = /*#__PURE__*/styled__default.div.withConfig({
   return isActive ? '0 0 0 1px black, 1px 1px 0 1px black, 2px 2px 0 1px black, -1px -1px 0 1px black' : '0 0 0 1px black, 1px 1px 0 1px gray, 2px 2px 0 1px gray, -1px -1px 0 1px gray';
 });
 
+var TableTab = function TableTab(_ref) {
+  var _tabs$find;
+  var tabs = _ref.tabs,
+    _ref$activeColor = _ref.activeColor,
+    activeColor = _ref$activeColor === void 0 ? '#fef08a' : _ref$activeColor,
+    _ref$activeTextColor = _ref.activeTextColor,
+    activeTextColor = _ref$activeTextColor === void 0 ? '#000000' : _ref$activeTextColor,
+    _ref$inactiveColor = _ref.inactiveColor,
+    inactiveColor = _ref$inactiveColor === void 0 ? '#6b7280' : _ref$inactiveColor,
+    _ref$borderColor = _ref.borderColor,
+    borderColor = _ref$borderColor === void 0 ? '#f59e0b' : _ref$borderColor,
+    _ref$hoverColor = _ref.hoverColor,
+    hoverColor = _ref$hoverColor === void 0 ? '#fef3c7' : _ref$hoverColor;
+  var _useState = React.useState(tabs[0].id),
+    activeTab = _useState[0],
+    setActiveTab = _useState[1];
+  return React__default.createElement(TableWrapper$1, null, React__default.createElement(TabHeader, {
+    borderColor: borderColor
+  }, tabs.map(function (tab) {
+    return React__default.createElement(TabButton, {
+      key: tab.id,
+      active: activeTab === tab.id,
+      activeColor: activeColor,
+      activeTextColor: activeTextColor,
+      inactiveColor: inactiveColor,
+      borderColor: borderColor,
+      hoverColor: hoverColor,
+      onClick: function onClick() {
+        return setActiveTab(tab.id);
+      }
+    }, tab.title);
+  })), React__default.createElement(ContentWrapper, null, (_tabs$find = tabs.find(function (tab) {
+    return tab.id === activeTab;
+  })) == null ? void 0 : _tabs$find.content));
+};
+var TableWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TableTab__TableWrapper",
+  componentId: "sc-m1diiu-0"
+})(["width:100%;"]);
+var TabHeader = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TableTab__TabHeader",
+  componentId: "sc-m1diiu-1"
+})(["display:flex;border-bottom:1px solid ", ";"], function (props) {
+  return props.borderColor;
+});
+var TabButton = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "TableTab__TabButton",
+  componentId: "sc-m1diiu-2"
+})(["flex:1;padding:0.5rem 1rem;font-size:0.875rem;font-weight:500;border-right:1px solid ", ";background-color:", ";color:", ";&:last-child{border-right:none;}&:hover{background-color:", ";}"], function (props) {
+  return props.borderColor;
+}, function (props) {
+  return props.active ? props.activeColor : 'transparent';
+}, function (props) {
+  return props.active ? props.activeTextColor : props.inactiveColor;
+}, function (props) {
+  return props.active ? props.activeColor : props.hoverColor;
+});
+var ContentWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TableTab__ContentWrapper",
+  componentId: "sc-m1diiu-3"
+})(["padding:1rem;"]);
+
 var TextArea = function TextArea(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return React__default.createElement("textarea", Object.assign({}, props));
@@ -33424,6 +33486,7 @@ exports.Spellbook = Spellbook;
 exports.SpriteFromAtlas = SpriteFromAtlas;
 exports.Stepper = Stepper;
 exports.TabBody = TabBody;
+exports.TableTab = TableTab;
 exports.TabsContainer = TabsContainer;
 exports.TextArea = TextArea;
 exports.TimeWidget = TimeWidget;