@rpg-engine/long-bow 0.5.94 → 0.5.96

package/dist/components/Stepper.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface IStep {
+    component: React.ReactNode;
+    id: number;
+}
+interface IStepperProps {
+    steps: IStep[];
+    finalCTAButton?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export declare const Stepper: React.FC<IStepperProps>;
+export {};

package/dist/index.d.ts

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

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

@@ -18962,6 +18962,69 @@ var SpellList = /*#__PURE__*/styled__default.div.withConfig({
   componentId: "sc-r02nfq-2"
 })(["width:100%;min-height:0;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem;"]);
 
+var Stepper = function Stepper(_ref) {
+  var _steps$currentStep;
+  var steps = _ref.steps,
+    finalCTAButton = _ref.finalCTAButton;
+  var _useState = React.useState(0),
+    currentStep = _useState[0],
+    setCurrentStep = _useState[1];
+  var currentComponent = (_steps$currentStep = steps[currentStep]) == null ? void 0 : _steps$currentStep.component;
+  var totalSteps = steps.length;
+  var onStepChange = function onStepChange(step) {
+    setCurrentStep(step);
+  };
+  return React__default.createElement(StepperContainer, null, React__default.createElement(StepperTop, null, Array.from({
+    length: totalSteps
+  }, function (_, i) {
+    return React__default.createElement(ProgressIndicator, {
+      key: i,
+      isActive: i <= currentStep
+    });
+  })), React__default.createElement(StepperBody, null, currentComponent), React__default.createElement(StepperFooter, null, currentStep > 0 && React__default.createElement(SelectArrow, {
+    direction: "left",
+    onPointerDown: function onPointerDown() {
+      return onStepChange(Math.max(0, currentStep - 1));
+    }
+  }), currentStep < totalSteps - 1 && React__default.createElement(SelectArrow, {
+    direction: "right",
+    onPointerDown: function onPointerDown() {
+      return onStepChange(Math.min(totalSteps - 1, currentStep + 1));
+    }
+  }), currentStep === totalSteps - 1 && finalCTAButton && React__default.createElement(Button, {
+    buttonType: exports.ButtonTypes.RPGUIButton,
+    onPointerDown: function onPointerDown() {
+      return finalCTAButton.onClick;
+    }
+  }, finalCTAButton.label)));
+};
+var StepperContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Stepper__StepperContainer",
+  componentId: "sc-13obf1-0"
+})(["display:flex;flex-direction:column;height:100%;"]);
+var StepperTop = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Stepper__StepperTop",
+  componentId: "sc-13obf1-1"
+})(["flex:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;"]);
+var StepperBody = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Stepper__StepperBody",
+  componentId: "sc-13obf1-2"
+})(["flex:8;"]);
+var StepperFooter = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Stepper__StepperFooter",
+  componentId: "sc-13obf1-3"
+})(["flex:1;display:flex;justify-content:flex-end;"]);
+var ProgressIndicator = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "Stepper__ProgressIndicator",
+  componentId: "sc-13obf1-4"
+})(["width:20px;height:20px;border-radius:50%;background-color:", ";margin:0 5px;transition:background-color 0.3s;opacity:", ";border:1px solid ", ";"], function (_ref2) {
+  var isActive = _ref2.isActive;
+  return isActive ? uiColors.orange : uiColors.lightGray;
+}, function (_ref3) {
+  var isActive = _ref3.isActive;
+  return isActive ? 1 : 0.25;
+}, uiColors.raisinBlack);
+
 var TextArea = function TextArea(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return React__default.createElement("textarea", Object.assign({}, props));
@@ -19448,6 +19511,7 @@ exports.SkillProgressBar = SkillProgressBar;
 exports.SkillsContainer = SkillsContainer;
 exports.Spellbook = Spellbook;
 exports.SpriteFromAtlas = SpriteFromAtlas;
+exports.Stepper = Stepper;
 exports.TextArea = TextArea;
 exports.TimeWidget = TimeWidget;
 exports.TradingMenu = TradingMenu;