@get-set/gs-zoom 0.0.1

package/dist/components/styles/GSZoom.css

@@ -0,0 +1,235 @@
+html.gs-zoom-opened {
+  overflow: hidden !important;
+  touch-action: pan-x pan-y;
+}
+html.gs-zoom-opened body {
+  touch-action: pan-x pan-y;
+}
+
+.gs-zoom-magnifier-instance:hover {
+  cursor: none;
+}
+
+.gs-zoom-magnifier {
+  pointer-events: none;
+  position: fixed;
+  z-index: 9999;
+  border: 4px solid #fff;
+  aspect-ratio: 1;
+  overflow: hidden;
+}
+.gs-zoom-magnifier[data-type=circle] {
+  border-radius: 50%;
+}
+.gs-zoom-magnifier img {
+  position: absolute;
+  transform-origin: top left;
+  max-width: unset !important;
+}
+
+.gs-zoom-container {
+  position: fixed;
+  z-index: 9999999999;
+  width: 100vw;
+  height: 100dvh;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  -webkit-backdrop-filter: blur(50px);
+          backdrop-filter: blur(50px);
+}
+.gs-zoom-container .gs-zoom-autoplayline {
+  position: fixed;
+  height: 4px;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  background-color: red;
+}
+.gs-zoom-container button {
+  cursor: pointer;
+  outline: none !important;
+}
+.gs-zoom-container * {
+  -webkit-user-drag: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.gs-zoom-container .gs-zoom-header {
+  position: fixed;
+  right: 10px;
+  top: 10px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  z-index: 99;
+}
+.gs-zoom-container .gs-zoom-header .gs-zoom-actions {
+  display: flex;
+  align-items: center;
+}
+.gs-zoom-container .gs-zoom-header .gs-zoom-actions .gs-zoom-action {
+  width: 40px;
+  height: 40px;
+  background-color: rgba(35, 35, 35, 0.65);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+.gs-zoom-container .gs-zoom-header .gs-zoom-actions .gs-zoom-action svg {
+  fill: #fff;
+  width: 18px;
+}
+.gs-zoom-container .gs-zoom-img-list {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  width: -moz-max-content;
+  width: max-content;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img {
+  width: 100vw;
+  height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img .gs-zoom-img-touch {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img .gz-zoom-loading-container {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img .gs-zoom-img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img .gs-zoom-img.gs-zoom-is-adjusting {
+  transition: 0.4s ease-in-out !important;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img.gz-zoom-is-loading .gz-zoom-loading-container {
+  display: block;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img.gz-zoom-is-loading .gs-zoom-img {
+  visibility: hidden;
+}
+.gs-zoom-container .gs-zoom-img-list .gs-zoom-main-img .gs-zoom-info-data {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  padding: 20px 20px 90px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+}
+.gs-zoom-container .gs-zoom-additionals {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  overflow-x: hidden;
+  padding: 5px 0;
+  display: flex;
+  justify-content: center;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+  transform-origin: bottom;
+}
+.gs-zoom-container .gs-zoom-additionals .gs-add-list-container {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+.gs-zoom-container .gs-zoom-additionals .gs-add-list-container .gs-add-list {
+  display: flex;
+  gap: 5px;
+  width: -moz-max-content;
+  width: max-content;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+.gs-zoom-container .gs-zoom-additionals .gs-add-list-container .gs-add-list .gs-add-item {
+  width: 80px;
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #000;
+  opacity: 0.5;
+  transition: 0.2s ease-out;
+  transform: scale(0.8);
+  cursor: pointer;
+}
+.gs-zoom-container .gs-zoom-additionals .gs-add-list-container .gs-add-list .gs-add-item:hover, .gs-zoom-container .gs-zoom-additionals .gs-add-list-container .gs-add-list .gs-add-item.active {
+  transform: scale(1);
+  opacity: 1;
+}
+.gs-zoom-container .gs-zoom-additionals .gs-add-list-container .gs-add-list .gs-add-item img {
+  max-width: 100%;
+  max-height: 100%;
+}
+.gs-zoom-container .gs-zoom-additionals.gs-zoom-hidden {
+  z-index: 1;
+  opacity: 0;
+}
+.gs-zoom-container .gs-zoom-additionals.gs-zoom-hidden .gs-add-list {
+  transform: scale(0.9);
+}
+.gs-zoom-container:not(.gs-additional-isdragging) .gs-zoom-additionals .gs-add-list-container .gs-add-list {
+  transition: 0.3s transform ease-in-out;
+}
+.gs-zoom-container .gs-zoom-navigations button {
+  border: none;
+  position: fixed;
+  top: 50%;
+  width: 50px;
+  background-color: rgba(35, 35, 35, 0.65);
+  aspect-ratio: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  color: #fff;
+  transform: translateY(-50%);
+}
+.gs-zoom-container .gs-zoom-navigations button svg {
+  fill: #fff;
+  width: 18px;
+}
+.gs-zoom-container .gs-zoom-navigations .gs-zoom-next {
+  right: 10px;
+}
+.gs-zoom-container .gs-zoom-navigations .gs-zoom-prev {
+  left: 10px;
+}
+.gs-zoom-container .gs-zoom-hide-inzoomed {
+  z-index: 3;
+  opacity: 1;
+  transform: scale(1);
+  transition: 0.3s ease-in-out;
+}
+.gs-zoom-container.gs-zoom-is-zoomed .gs-zoom-hide-inzoomed {
+  z-index: 1;
+  opacity: 0;
+  transform: scale(0.9);
+}
+.gs-zoom-container.gs-zoom-is-zoomed .gs-zoom-hide-inzoomed.gs-zoom-additionals {
+  transform: scale(1);
+}
+.gs-zoom-container.gs-zoom-is-zoomed .gs-zoom-hide-inzoomed.gs-zoom-additionals .gs-add-list {
+  transform: scale(0.9);
+}/*# sourceMappingURL=GSZoom.css.map */

package/dist/components/styles/GSZoom.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["GSZoom.scss","GSZoom.css"],"names":[],"mappings":"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","file":"GSZoom.css"}

package/dist/components/styles/GSZoom.scss

@@ -0,0 +1,254 @@
+html.gs-zoom-opened {
+  overflow: hidden !important;
+  touch-action: pan-x pan-y;
+  body {
+    touch-action: pan-x pan-y;
+  }
+}
+.gs-zoom-magnifier-instance {
+  &:hover {
+    cursor: none;
+  }
+}
+.gs-zoom-magnifier {
+  pointer-events: none;
+  position: fixed;
+  z-index: 9999;
+  border: 4px solid #fff;
+  aspect-ratio: 1;
+  overflow: hidden;
+  &[data-type="circle"] {
+    border-radius: 50%;
+  }
+  img {
+    position: absolute;
+    transform-origin: top left;
+    max-width: unset !important;
+  }
+}
+.gs-zoom-container {
+  position: fixed;
+  z-index: 9999999999;
+  width: 100vw;
+  height: 100dvh;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  backdrop-filter: blur(50px);
+
+  .gs-zoom-autoplayline {
+    position: fixed;
+    height: 4px;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    background-color: red;
+  }
+  button {
+    cursor: pointer;
+    outline: none !important;
+  }
+  * {
+    -webkit-user-drag: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+  .gs-zoom-header {
+    position: fixed;
+    right: 10px;
+    top: 10px;
+    //width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    z-index: 99;
+
+    .gs-zoom-actions {
+      display: flex;
+      align-items: center;
+      .gs-zoom-action {
+        width: 40px;
+        height: 40px;
+        background-color: rgba(35, 35, 35, 0.65);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border: none;
+
+        svg {
+          fill: #fff;
+          width: 18px;
+        }
+      }
+    }
+  }
+  .gs-zoom-img-list {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    width: max-content;
+    .gs-zoom-main-img {
+      width: 100vw;
+      height: 100dvh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      overflow: hidden;
+
+      .gs-zoom-img-touch {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
+      }
+
+      .gz-zoom-loading-container {
+        display: none;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+      .gs-zoom-img {
+        max-width: 100%;
+        max-height: 100%;
+        //transition: 0.15s;
+        &.gs-zoom-is-adjusting {
+          transition: 0.4s ease-in-out !important;
+        }
+      }
+      &.gz-zoom-is-loading {
+        .gz-zoom-loading-container {
+          display: block;
+        }
+        .gs-zoom-img {
+          visibility: hidden;
+        }
+      }
+      .gs-zoom-info-data {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        padding: 20px 20px 90px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: #fff;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+      }
+    }
+  }
+  .gs-zoom-additionals {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    overflow-x: hidden;
+    padding: 5px 0;
+    display: flex;
+    justify-content: center;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+    transform-origin: bottom;
+    .gs-add-list-container {
+      overflow-x: hidden;
+      max-width: 100%;
+      .gs-add-list {
+        display: flex;
+        gap: 5px;
+        width: max-content;
+        justify-content: center;
+        flex-wrap: nowrap;
+
+        .gs-add-item {
+          width: 80px;
+          aspect-ratio: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 1px solid #000;
+          opacity: 0.5;
+          transition: 0.2s ease-out;
+          transform: scale(0.8);
+          cursor: pointer;
+          &:hover,
+          &.active {
+            transform: scale(1);
+            opacity: 1;
+          }
+          img {
+            max-width: 100%;
+            max-height: 100%;
+          }
+        }
+      }
+    }
+    &.gs-zoom-hidden {
+      z-index: 1;
+      opacity: 0;
+      .gs-add-list {
+        transform: scale(0.9);
+      }
+    }
+  }
+  &:not(.gs-additional-isdragging) {
+    .gs-zoom-additionals {
+      .gs-add-list-container {
+        .gs-add-list {
+          transition: 0.3s transform ease-in-out;
+        }
+      }
+    }
+  }
+  .gs-zoom-navigations {
+    button {
+      border: none;
+      position: fixed;
+      top: 50%;
+      width: 50px;
+      background-color: rgba(35, 35, 35, 0.65);
+      aspect-ratio: 1;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+      color: #fff;
+      transform: translateY(-50%);
+
+      svg {
+        fill: #fff;
+        width: 18px;
+      }
+    }
+    .gs-zoom-next {
+      right: 10px;
+    }
+    .gs-zoom-prev {
+      left: 10px;
+    }
+  }
+  .gs-zoom-hide-inzoomed {
+    z-index: 3;
+    opacity: 1;
+    transform: scale(1);
+    transition: 0.3s ease-in-out;
+  }
+  &.gs-zoom-is-zoomed {
+    .gs-zoom-hide-inzoomed {
+      z-index: 1;
+      opacity: 0;
+      transform: scale(0.9);
+      &.gs-zoom-additionals {
+        transform: scale(1);
+        .gs-add-list {
+          transform: scale(0.9);
+        }
+      }
+    }
+  }
+}

package/dist/constants/defaultParams.js

@@ -0,0 +1,20 @@
+import types from "./types";
+
+const defaultParams = {
+  reference: "",
+  arrows: true,
+  navigateWithKeys: true,
+  allowArrowNavigation: true,
+  showAdditionals: true,
+  zoomOnWheel: true,
+  maxZoom: 5,
+  type: types.lightbox,
+  mainImageQueryParameters: "",
+  additionalImageQueryParameters: "",
+  disableFullScreen: false,
+  imgLoading: "",
+  autoplaySpeed: 5000,
+  responsive: [],
+};
+
+export default Object.freeze(defaultParams);

package/dist/constants/icons.js

@@ -0,0 +1,23 @@
+const icons = {
+  // zoomIn: '<svg width="20px" height="20px" viewBox="0 -0.5 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Dribbble-Light-Preview" class="btn-icon btn-icon-plus" transform="translate(-379.000000, -240.000000)" fill="none"><g id="icons" transform="translate(56.000000, 160.000000)"><polygon id="plus-[#1512]" points="344 89 344 91 334.55 91 334.55 100 332.45 100 332.45 91 323 91 323 89 332.45 89 332.45 80 334.55 80 334.55 89"></polygon></g></g></g></svg>',
+  zoomIn:
+    '<svg width="20px" height="20px" viewBox="0 0 30 30"><path class="fslightbox-svg-path" d="M 13 3 C 7.4889971 3 3 7.4889971 3 13 C 3 18.511003 7.4889971 23 13 23 C 15.396508 23 17.597385 22.148986 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148986 17.597385 23 15.396508 23 13 C 23 7.4889971 18.511003 3 13 3 z M 13 5 C 17.430123 5 21 8.5698774 21 13 C 21 17.430123 17.430123 21 13 21 C 8.5698774 21 5 17.430123 5 13 C 5 8.5698774 8.5698774 5 13 5 z M 12.984375 7.9863281 A 1.0001 1.0001 0 0 0 12 9 L 12 12 L 9 12 A 1.0001 1.0001 0 1 0 9 14 L 12 14 L 12 17 A 1.0001 1.0001 0 1 0 14 17 L 14 14 L 17 14 A 1.0001 1.0001 0 1 0 17 12 L 14 12 L 14 9 A 1.0001 1.0001 0 0 0 12.984375 7.9863281 z"></path></svg>',
+  //zoomOut: '<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="btn-icon btn-icon-minus" d="M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z" fill="none"></path></svg>',
+  zoomOut:
+    '<svg width="20px" height="20px" viewBox="0 0 30 30"><path class="fslightbox-svg-path" d="M 13 3 C 7.4889971 3 3 7.4889971 3 13 C 3 18.511003 7.4889971 23 13 23 C 15.396508 23 17.597385 22.148986 19.322266 20.736328 L 25.292969 26.707031 A 1.0001 1.0001 0 1 0 26.707031 25.292969 L 20.736328 19.322266 C 22.148986 17.597385 23 15.396508 23 13 C 23 7.4889971 18.511003 3 13 3 z M 13 5 C 17.430123 5 21 8.5698774 21 13 C 21 17.430123 17.430123 21 13 21 C 8.5698774 21 5 17.430123 5 13 C 5 8.5698774 8.5698774 5 13 5 z M 9 12 A 1.0001 1.0001 0 1 0 9 14 L 17 14 A 1.0001 1.0001 0 1 0 17 12 L 9 12 z"></path></svg>',
+  //close: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 -0.5 21 21" version="1.1"><g fill="none" fill-rule="evenodd"><g transform="translate(-419.000000, -240.000000)" class="btn-icon btn-icon-close"><g transform="translate(56.000000, 160.000000)"><polygon points="375.0183 90 384 98.554 382.48065 100 373.5 91.446 364.5183 100 363 98.554 371.98065 90 363 81.446 364.5183 80 373.5 88.554 382.48065 80 384 81.446"></polygon></g></g></g></svg>',
+  close:
+    '<svg width="20px" height="20px" viewBox="0 0 24 24"><path class="fslightbox-svg-path" d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z"></path></svg>',
+  autoplay:
+    '<svg width="16px" height="16px" viewBox="0 0 30 30"><path class="fslightbox-svg-path" d="M 6 3 A 1 1 0 0 0 5 4 A 1 1 0 0 0 5 4.0039062 L 5 15 L 5 25.996094 A 1 1 0 0 0 5 26 A 1 1 0 0 0 6 27 A 1 1 0 0 0 6.5800781 26.8125 L 6.5820312 26.814453 L 26.416016 15.908203 A 1 1 0 0 0 27 15 A 1 1 0 0 0 26.388672 14.078125 L 6.5820312 3.1855469 L 6.5800781 3.1855469 A 1 1 0 0 0 6 3 z"></path></svg>',
+  autoplayPause:
+    '<svg width="14px" height="14px" viewBox="0 0 356.19 356.19"><path class="fslightbox-svg-path" d="M121,0c18,0,33,15,33,33v372c0,18-15,33-33,33s-32-15-32-33V33C89,15,103,0,121,0zM317,0c18,0,32,15,32,33v372c0,18-14,33-32,33s-33-15-33-33V33C284,15,299,0,317,0z"></path></svg>',
+  arrPrev:
+    '<svg width="20px" height="20px" viewBox="0 0 20 20"><path class="fslightbox-svg-path" d="M18.271,9.212H3.615l4.184-4.184c0.306-0.306,0.306-0.801,0-1.107c-0.306-0.306-0.801-0.306-1.107,0L1.21,9.403C1.194,9.417,1.174,9.421,1.158,9.437c-0.181,0.181-0.242,0.425-0.209,0.66c0.005,0.038,0.012,0.071,0.022,0.109c0.028,0.098,0.075,0.188,0.142,0.271c0.021,0.026,0.021,0.061,0.045,0.085c0.015,0.016,0.034,0.02,0.05,0.033l5.484,5.483c0.306,0.307,0.801,0.307,1.107,0c0.306-0.305,0.306-0.801,0-1.105l-4.184-4.185h14.656c0.436,0,0.788-0.353,0.788-0.788S18.707,9.212,18.271,9.212z"></path></svg>',
+  arrNext:
+    '<svg width="20px" height="20px" viewBox="0 0 20 20"><path class="fslightbox-svg-path" d="M1.729,9.212h14.656l-4.184-4.184c-0.307-0.306-0.307-0.801,0-1.107c0.305-0.306,0.801-0.306,1.106,0l5.481,5.482c0.018,0.014,0.037,0.019,0.053,0.034c0.181,0.181,0.242,0.425,0.209,0.66c-0.004,0.038-0.012,0.071-0.021,0.109c-0.028,0.098-0.075,0.188-0.143,0.271c-0.021,0.026-0.021,0.061-0.045,0.085c-0.015,0.016-0.034,0.02-0.051,0.033l-5.483,5.483c-0.306,0.307-0.802,0.307-1.106,0c-0.307-0.305-0.307-0.801,0-1.105l4.184-4.185H1.729c-0.436,0-0.788-0.353-0.788-0.788S1.293,9.212,1.729,9.212z"></path></svg>',
+  toggleadditionals:
+    '<svg width="17px" height="17px" viewBox="0 0 22 22"><path class="fslightbox-svg-path" d="M 3 2 C 2.448 2 2 2.448 2 3 L 2 6 C 2 6.552 2.448 7 3 7 L 6 7 C 6.552 7 7 6.552 7 6 L 7 3 C 7 2.448 6.552 2 6 2 L 3 2 z M 10 2 C 9.448 2 9 2.448 9 3 L 9 6 C 9 6.552 9.448 7 10 7 L 13 7 C 13.552 7 14 6.552 14 6 L 14 3 C 14 2.448 13.552 2 13 2 L 10 2 z M 17 2 C 16.448 2 16 2.448 16 3 L 16 6 C 16 6.552 16.448 7 17 7 L 20 7 C 20.552 7 21 6.552 21 6 L 21 3 C 21 2.448 20.552 2 20 2 L 17 2 z M 3 9 C 2.448 9 2 9.448 2 10 L 2 13 C 2 13.552 2.448 14 3 14 L 6 14 C 6.552 14 7 13.552 7 13 L 7 10 C 7 9.448 6.552 9 6 9 L 3 9 z M 10 9 C 9.448 9 9 9.448 9 10 L 9 13 C 9 13.552 9.448 14 10 14 L 13 14 C 13.552 14 14 13.552 14 13 L 14 10 C 14 9.448 13.552 9 13 9 L 10 9 z M 17 9 C 16.448 9 16 9.448 16 10 L 16 13 C 16 13.552 16.448 14 17 14 L 20 14 C 20.552 14 21 13.552 21 13 L 21 10 C 21 9.448 20.552 9 20 9 L 17 9 z M 3 16 C 2.448 16 2 16.448 2 17 L 2 20 C 2 20.552 2.448 21 3 21 L 6 21 C 6.552 21 7 20.552 7 20 L 7 17 C 7 16.448 6.552 16 6 16 L 3 16 z M 10 16 C 9.448 16 9 16.448 9 17 L 9 20 C 9 20.552 9.448 21 10 21 L 13 21 C 13.552 21 14 20.552 14 20 L 14 17 C 14 16.448 13.552 16 13 16 L 10 16 z M 17 16 C 16.448 16 16 16.448 16 17 L 16 20 C 16 20.552 16.448 21 17 21 L 20 21 C 20.552 21 21 20.552 21 20 L 21 17 C 21 16.448 20.552 16 20 16 L 17 16 z"></path></svg>',
+};
+
+export default Object.freeze(icons);

package/dist/constants/magnifierDefaultProps.js

@@ -0,0 +1,7 @@
+const magnifierDefaultProps = {
+  zoom: 3,
+  form: 'circle',
+  size: 150,
+};
+
+export default Object.freeze(magnifierDefaultProps);

package/dist/constants/types.js

@@ -0,0 +1,6 @@
+const types = {
+  lightbox: 'lightbox',
+  magnifier: 'magnifier',
+};
+
+export default Object.freeze(types);

package/dist/helpers/uihelpers.js

@@ -0,0 +1,9 @@
+const NewGuid = () => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0,
+      v = c == 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
+export default NewGuid;

package/index.js

@@ -0,0 +1,3 @@
+import GSZoom from './dist/components/GSZoom';
+
+export default GSZoom;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@get-set/gs-zoom",
+  "version": "0.0.1",
+  "description": "Get-Set Zoom",
+  "main": "index.js",
+  "author": "Get-Set",
+  "license": "ISC",
+  "files": [
+    "index.js",
+    "dist"
+  ],
+  "scripts": {
+    "build": "cp -r src/* dist/",
+    "build:styles": "node-sass src/components/styles/GSZoom.scss -o dist"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "keywords": [
+    "zoom",
+    "plugin",
+    "images",
+    "slider",
+    "slideshow",
+    "magnifier",
+    "fullscreen",
+    "gallery",
+    "react",
+    "react-component"
+  ],
+  "devDependencies": {
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "prettier": "2.7.1"
+  },
+  "dependencies": {
+    "@types/prop-types": "^15.7.13",
+    "jsdoc": "^4.0.3",
+    "prop-types": "^15.8.1"
+  }
+}