@rpg-engine/long-bow 0.6.38 → 0.6.39

package/dist/components/Image/ZoomableImage.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ZoomableImage: React.FC<{
+    src: string;
+    alt: string;
+}>;

package/dist/components/Stepper.d.ts

@@ -13,6 +13,9 @@ interface IStepperProps {
     };
     onError?: (message: string) => void;
     useSideArrows?: boolean;
+    styles?: {
+        stepperProgressColor?: string;
+    };
 }
 export declare const Stepper: React.FC<IStepperProps>;
 export {};

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

@@ -32739,7 +32739,8 @@ var Stepper = function Stepper(_ref) {
     finalCTAButton = _ref.finalCTAButton,
     onError = _ref.onError,
     _ref$useSideArrows = _ref.useSideArrows,
-    useSideArrows = _ref$useSideArrows === void 0 ? false : _ref$useSideArrows;
+    useSideArrows = _ref$useSideArrows === void 0 ? false : _ref$useSideArrows,
+    styles = _ref.styles;
   var _useState = React.useState(0),
     currentStep = _useState[0],
     setCurrentStep = _useState[1];
@@ -32822,6 +32823,7 @@ var Stepper = function Stepper(_ref) {
     return React__default.createElement(ProgressIndicator, {
       key: i,
       isActive: i <= currentStep,
+      stepperProgressColor: styles == null ? void 0 : styles.stepperProgressColor,
       onClick: function onClick() {
         return onStepChange(i);
       }
@@ -32863,8 +32865,9 @@ var ProgressIndicator = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Stepper__ProgressIndicator",
   componentId: "sc-13obf1-6"
 })(["width:20px;height:20px;background-color:", ";margin:0 5px;transition:background-color 0.3s;opacity:", ";border:1px solid ", ";cursor:pointer;clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);box-shadow:", ";border-radius:0;"], function (_ref3) {
-  var isActive = _ref3.isActive;
-  return isActive ? uiColors.orange : uiColors.lightGray;
+  var isActive = _ref3.isActive,
+    stepperProgressColor = _ref3.stepperProgressColor;
+  return isActive ? stepperProgressColor || uiColors.orange : uiColors.lightGray;
 }, function (_ref4) {
   var isActive = _ref4.isActive;
   return isActive ? 1 : 0.25;
@@ -33221,6 +33224,52 @@ var Container$x = /*#__PURE__*/styled__default.div.withConfig({
   return props.maxLines;
 });
 
+var ZoomableImage = function ZoomableImage(_ref) {
+  var src = _ref.src,
+    alt = _ref.alt;
+  var _useState = React.useState(false),
+    isHovered = _useState[0],
+    setIsHovered = _useState[1];
+  var _useState2 = React.useState({
+      x: 50,
+      y: 50
+    }),
+    zoomPosition = _useState2[0],
+    setZoomPosition = _useState2[1];
+  var handleMouseMove = function handleMouseMove(e) {
+    var _e$currentTarget$getB = e.currentTarget.getBoundingClientRect(),
+      left = _e$currentTarget$getB.left,
+      top = _e$currentTarget$getB.top,
+      width = _e$currentTarget$getB.width,
+      height = _e$currentTarget$getB.height;
+    var x = (e.clientX - left) / width * 100;
+    var y = (e.clientY - top) / height * 100;
+    setZoomPosition({
+      x: x,
+      y: y
+    });
+  };
+  return React__default.createElement("img", {
+    src: src,
+    alt: alt,
+    onMouseMove: handleMouseMove,
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    },
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      transform: isHovered ? 'scale(1.5)' : 'scale(1)',
+      transformOrigin: zoomPosition.x + "% " + zoomPosition.y + "%",
+      transition: 'transform 0.3s ease'
+    }
+  });
+};
+
 var TutorialStepper = /*#__PURE__*/React__default.memo(function (_ref) {
   var lessons = _ref.lessons,
     onLessonFinish = _ref.onLessonFinish,
@@ -33233,22 +33282,22 @@ var TutorialStepper = /*#__PURE__*/React__default.memo(function (_ref) {
           className: "lesson-container"
         }, React__default.createElement(LessonTitle, {
           className: "lesson-title"
-        }, lesson.title), lesson.image && React__default.createElement(LessonImage, {
+        }, lesson.title), lesson.image && React__default.createElement(LessonImageWrapper, {
+          className: "lesson-image-wrapper"
+        }, React__default.createElement(LessonImage, {
           className: "lesson-image",
           style: imageStyle
         }, lesson.imageUrl ? React__default.createElement("a", {
           href: lesson.imageUrl,
           target: "_blank",
           rel: "noopener noreferrer"
-        }, React__default.createElement("img", {
+        }, React__default.createElement(ZoomableImage, {
           src: lesson.image,
-          alt: lesson.title || 'Tutorial image',
-          loading: "lazy"
-        })) : React__default.createElement("img", {
+          alt: lesson.title || 'Tutorial image'
+        })) : React__default.createElement(ZoomableImage, {
           src: lesson.image,
-          alt: lesson.title || 'Tutorial image',
-          loading: "lazy"
-        })), React__default.createElement(LessonFooter, {
+          alt: lesson.title || 'Tutorial image'
+        }))), React__default.createElement(LessonFooter, {
           className: "lesson-footer"
         }, lesson.body && React__default.createElement(LessonBody, {
           className: "lesson-body",
@@ -33271,30 +33320,34 @@ var TutorialStepper = /*#__PURE__*/React__default.memo(function (_ref) {
     useSideArrows: true
   }));
 });
+var LessonImageWrapper = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TutorialStepper__LessonImageWrapper",
+  componentId: "sc-7tgzv2-0"
+})(["width:100%;max-width:500px;margin:1rem auto;aspect-ratio:16 / 9;overflow:hidden;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,0.1);"]);
+var LessonImage = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TutorialStepper__LessonImage",
+  componentId: "sc-7tgzv2-1"
+})(["width:100%;height:100%;position:relative;"]);
+var LessonContainer = /*#__PURE__*/styled__default.div.withConfig({
+  displayName: "TutorialStepper__LessonContainer",
+  componentId: "sc-7tgzv2-2"
+})(["display:flex;flex-direction:column;justify-content:flex-start;min-height:200px;padding:1rem;padding-top:0;p{font-size:0.7rem !important;}"]);
 var LessonBody = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__LessonBody",
-  componentId: "sc-7tgzv2-0"
+  componentId: "sc-7tgzv2-3"
 })([""]);
 var Container$y = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__Container",
-  componentId: "sc-7tgzv2-1"
+  componentId: "sc-7tgzv2-4"
 })(["width:80%;max-width:600px;@media (max-width:600px){width:95%;}"]);
 var LessonFooter = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "TutorialStepper__LessonFooter",
-  componentId: "sc-7tgzv2-2"
+  componentId: "sc-7tgzv2-5"
 })(["margin-top:1rem;"]);
-var LessonImage = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "TutorialStepper__LessonImage",
-  componentId: "sc-7tgzv2-3"
-})(["display:flex;justify-content:center;align-items:center;width:100%;height:auto;max-width:500px;margin:auto;img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;}"]);
 var LessonTitle = /*#__PURE__*/styled__default.h1.withConfig({
   displayName: "TutorialStepper__LessonTitle",
-  componentId: "sc-7tgzv2-4"
+  componentId: "sc-7tgzv2-6"
 })(["color:", " !important;font-size:0.8rem !important;"], uiColors.yellow);
-var LessonContainer = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "TutorialStepper__LessonContainer",
-  componentId: "sc-7tgzv2-5"
-})(["display:flex;flex-direction:column;justify-content:space-between;min-height:200px;p{font-size:0.7rem !important;}"]);
 
 exports.AsyncDropdown = AsyncDropdown;
 exports.Button = Button;