@janbox/storefront-ui 2.0.14 → 2.0.15

package/dist/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.d.ts

@@ -1,5 +1,5 @@
 import { SwiperSideArrowsPagingProps, SwiperSideArrowsPagingResponsiveProps } from './types';
 import { StyledCSS } from '../../../types';
-export declare const SwiperSideArrowsPaging: ({ api, size, offset, color, visibility, sm, md, lg, }: SwiperSideArrowsPagingProps) => import("react/jsx-runtime").JSX.Element;
-export declare const createOverflowStyle: ({ offset, }?: Pick<SwiperSideArrowsPagingResponsiveProps, "offset">) => StyledCSS;
+export declare const SwiperSideArrowsPaging: ({ api, size, offsetX, offsetY, color, visibility, sm, md, lg, }: SwiperSideArrowsPagingProps) => import("react/jsx-runtime").JSX.Element;
+export declare const createOverflowStyle: ({ offsetX, }?: Pick<SwiperSideArrowsPagingResponsiveProps, "offsetX">) => StyledCSS;
 //# sourceMappingURL=swiper-side-arrows-paging.d.ts.map

package/dist/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"swiper-side-arrows-paging.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,2BAA2B,EAAE,qCAAqC,EAAE,MAAM,SAAS,CAAC;AAC7F,OAAO,EAA8B,SAAS,EAAqB,MAAM,SAAS,CAAC;AAQnF,eAAO,MAAM,sBAAsB,0DAShC,2BAA2B,4CAoJ7B,CAAC;AAoHF,eAAO,MAAM,mBAAmB,iBAE7B,IAAI,CAAC,qCAAqC,EAAE,QAAQ,CAAC,KAAQ,SAM/D,CAAC"}
+{"version":3,"file":"swiper-side-arrows-paging.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,2BAA2B,EAAE,qCAAqC,EAAE,MAAM,SAAS,CAAC;AAC7F,OAAO,EAA8B,SAAS,EAAqB,MAAM,SAAS,CAAC;AAQnF,eAAO,MAAM,sBAAsB,oEAUhC,2BAA2B,4CAqJ7B,CAAC;AA2IF,eAAO,MAAM,mBAAmB,kBAE7B,IAAI,CAAC,qCAAqC,EAAE,SAAS,CAAC,KAAQ,SAMhE,CAAC"}

package/dist/lib/swiper/swiper-side-arrows-paging/swiper-side-arrows-paging.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { useFloating, autoUpdate, offset, size, FloatingPortal } from "@floating-ui/react";
-import { isNil, isNumber } from "lodash-es";
+import { isNumber, isNil } from "lodash-es";
 import { getColorVar } from "../../../theme/palette.js";
 import ArrowLeftIcon from "../../../assets/svg/arrow-left.svg.js";
 import { SvgLoader } from "../../../components/svg-loader.js";
@@ -10,7 +10,8 @@ const SWIPER_SIDE_ARROWS_OVERFLOW_VAR = "--swiper-side-arrows-overflow";
 const SwiperSideArrowsPaging = ({
   api,
   size: size$1 = 32,
-  offset: offset$1 = 0,
+  offsetX = "center",
+  offsetY = "center",
   color = "primary",
   visibility = "auto",
   sm,
@@ -118,7 +119,7 @@ const SwiperSideArrowsPaging = ({
           display: "flex",
           alignItems: "stretch",
           justifyContent: "space-between",
-          ...createOverflowStyle({ offset: offset$1 }),
+          ...createOverflowStyle({ offsetX }),
           sm: createOverflowStyle(sm),
           md: createOverflowStyle(md),
           lg: createOverflowStyle(lg)
@@ -135,7 +136,8 @@ const SwiperSideArrowsPaging = ({
               disabled: !canScroll,
               direction,
               color,
-              offset: offset$1,
+              offsetX,
+              offsetY,
               size: size$1,
               sm,
               md,
@@ -153,7 +155,8 @@ const SwiperSideArrowsPaging = ({
 const ArrowButton = ({
   direction,
   size: size2,
-  offset: offset2,
+  offsetX,
+  offsetY,
   color,
   visible,
   sm,
@@ -161,7 +164,6 @@ const ArrowButton = ({
   lg,
   ...props
 }) => {
-  const slideOffset = direction === "prev" ? "-100%" : "100%";
   return /* @__PURE__ */ jsx(
     Primitive,
     {
@@ -176,7 +178,6 @@ const ArrowButton = ({
           sx: {
             position: "absolute",
             top: "50%",
-            transform: visible ? "translateY(-50%) translateX(0)" : `translateY(-50%) translateX(${slideOffset})`,
             opacity: visible ? 1 : 0,
             aspectRatio: 1,
             pointerEvents: "auto",
@@ -198,15 +199,15 @@ const ArrowButton = ({
             transition: "opacity 200ms ease, background-color 200ms ease, transform 250ms ease",
             "@media (hover: none) and (pointer: coarse)": {
               opacity: 1,
-              transform: "translateY(-50%)",
               ":disabled": {
                 opacity: 0.5
-              }
+              },
+              ...createArrowButtonStyle({ size: size2, offsetX, offsetY }, direction, true)
             },
-            ...createArrowButtonStyle({ size: size2, offset: offset2 }, direction),
-            sm: createArrowButtonStyle(sm, direction),
-            md: createArrowButtonStyle(md, direction),
-            lg: createArrowButtonStyle(lg, direction)
+            ...createArrowButtonStyle({ size: size2, offsetX, offsetY }, direction, visible),
+            sm: createArrowButtonStyle(sm, direction, visible),
+            md: createArrowButtonStyle(md, direction, visible),
+            lg: createArrowButtonStyle(lg, direction, visible)
           },
           ...props,
           as: "button",
@@ -228,17 +229,38 @@ const ArrowButton = ({
     }
   );
 };
-const createArrowButtonStyle = ({ size: size2, offset: offset2 } = {}, direction) => {
+const createArrowButtonStyle = ({ size: size2, offsetX, offsetY } = {}, direction, visible) => {
   const css = {
     width: size2,
     height: size2
   };
-  if (isNumber(offset2)) {
+  const transforms = [];
+  if (offsetY === "center") {
+    css.top = "50%";
+    transforms.push("translateY(-50%)");
+  } else if (isNumber(offsetY)) {
+    css.top = offsetY;
+  }
+  if (offsetX === "center") {
     if (direction === "prev") {
-      css.left = Math.max(offset2, 0);
+      css.left = 0;
+      transforms.push(visible === false ? "translateX(-100%)" : "translateX(-50%)");
     } else {
-      css.right = Math.max(offset2, 0);
+      css.right = 0;
+      transforms.push(visible === false ? "translateX(100%)" : "translateX(50%)");
     }
+  } else if (isNumber(offsetX)) {
+    if (direction === "prev") {
+      css.left = Math.max(offsetX, 0);
+    } else {
+      css.right = Math.max(offsetX, 0);
+    }
+    if (visible === false) {
+      transforms.push(direction === "prev" ? "translateX(-100%)" : "translateX(100%)");
+    }
+  }
+  if (transforms.length > 0) {
+    css.transform = transforms.join(" ");
   }
   return css;
 };
@@ -251,10 +273,10 @@ const createArrowIconStyle = ({ size: size2 } = {}) => {
   };
 };
 const createOverflowStyle = ({
-  offset: offset2 = 0
+  offsetX = 0
 } = {}) => {
-  return offset2 < 0 ? {
-    [SWIPER_SIDE_ARROWS_OVERFLOW_VAR]: `${-offset2}px`
+  return isNumber(offsetX) && offsetX < 0 ? {
+    [SWIPER_SIDE_ARROWS_OVERFLOW_VAR]: `${-offsetX}px`
   } : {};
 };
 export {

package/dist/lib/swiper/swiper-side-arrows-paging/types.d.ts

@@ -2,7 +2,8 @@ import { ColorVariant, ToResponsiveProps } from '../../../types';
 import { SwiperApi } from '../swiper/types';
 export type SwiperSideArrowsPagingResponsiveProps = {
     size?: number;
-    offset?: number;
+    offsetX?: number | 'center';
+    offsetY?: number | 'center';
 };
 export type SwiperSideArrowsPagingVisibility = 'auto' | 'always';
 export type SwiperSideArrowsPagingProps = {

package/dist/lib/swiper/swiper-side-arrows-paging/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-side-arrows-paging/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,MAAM,qCAAqC,GAAG;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEjE,MAAM,MAAM,2BAA2B,GAAG;IACxC,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,UAAU,CAAC,EAAE,gCAAgC,CAAC;CAC/C,GAAG,iBAAiB,CAAC,qCAAqC,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/swiper/swiper-side-arrows-paging/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,MAAM,qCAAqC,GAAG;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEjE,MAAM,MAAM,2BAA2B,GAAG;IACxC,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,UAAU,CAAC,EAAE,gCAAgC,CAAC;CAC/C,GAAG,iBAAiB,CAAC,qCAAqC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-ui",
-  "version": "2.0.14",
+  "version": "2.0.15",
   "description": "Storefront UI component library for Janbox",
   "author": "Janbox",
   "keywords": [