Adding borderRadius prop for RectShape.

Author: aemartinez37

package/src/helpers/shape.ts

@@ -7,6 +7,7 @@ interface RefNode {
 }
 
 export interface ShapeProps {
+  borderRadius: number;
   motion: Motion;
   padding: number;
   setReference: (node?: RefNode) => void;

package/src/lib/SpotlightTour.context.ts

@@ -32,7 +32,7 @@ export interface ShapeOptions {
    * padding means the spot shape will fit exactly around the wrapped
    * component. The padding value is a number in points.
    *
-   * @default 16;
+   * @default 16
    */
   padding?: number;
   /**
@@ -43,6 +43,13 @@ export interface ShapeOptions {
    * @default circle
    */
   type?: Shape;
+  /**
+   * The rounding radius of the rectangle shape corners.
+   * Ignored if `type` is `"circle"`.
+   * 
+   * @default 4
+   */
+  borderRadius?: number;
 }
 
 export interface RenderProps {

package/src/lib/components/tour-overlay/TourOverlay.component.tsx

@@ -106,10 +106,11 @@ export const TourOverlay = forwardRef<TourOverlayRef, TourOverlayProps>((props,
   const shapeOptions = useMemo((): Required<ShapeOptions> => {
     const options = tourStep.shape ?? shape;
     const padding = 16;
+    const borderRadius = 4;
 
     return typeof options !== "string"
-      ? { padding, type: "circle", ...options }
-      : { padding, type: options };
+      ? { padding, type: "circle", borderRadius, ...options }
+      : { padding, type: options, borderRadius };
   }, [tourStep, shape]);
 
   const useNativeDriver = useMemo(() => {
@@ -206,6 +207,7 @@ export const TourOverlay = forwardRef<TourOverlayRef, TourOverlayProps>((props,
                 setReference={refs.setReference}
                 motion={stepMotion}
                 padding={shapeOptions.padding}
+                borderRadius={shapeOptions.borderRadius}
                 useNativeDriver={useNativeDriver}
               />
             </Mask>

package/src/lib/components/tour-overlay/shapes/RectShape.component.tsx

@@ -8,7 +8,7 @@ import { type ShapeProps, transitionOf } from "../../../../helpers/shape";
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
 
 export const RectShape = memo<ShapeProps>(props => {
-  const { motion, padding, setReference, spot, useNativeDriver } = props;
+  const { borderRadius, motion, padding, setReference, spot, useNativeDriver } = props;
 
   const width = useMemo((): number => {
     return spot.width + padding;
@@ -60,8 +60,8 @@ export const RectShape = memo<ShapeProps>(props => {
       height={size.y}
       opacity={opacity}
       fill="black"
-      rx={4}
-      ry={4}
+      rx={borderRadius}
+      ry={borderRadius}
     />
   );
 }, isEqual);