From 9128723e7964da0d539823a51ba501146a480d14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Mart=C3=ADnez?= <amartinez@stackbuilders.com>
Date: Fri, 26 Sep 2025 11:13:53 -0500
Subject: [PATCH] feat: Allow borderRadius prop for RectShape.

---
 package/src/helpers/shape.ts                             | 1 +
 package/src/lib/SpotlightTour.context.ts                 | 9 ++++++++-
 .../components/tour-overlay/TourOverlay.component.tsx    | 6 ++++--
 .../tour-overlay/shapes/RectShape.component.tsx          | 6 +++---
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/package/src/helpers/shape.ts b/package/src/helpers/shape.ts
index 568b04b..201e0d3 100644
--- a/package/src/helpers/shape.ts
+++ b/package/src/helpers/shape.ts
@@ -7,6 +7,7 @@ interface RefNode {
 }
 
 export interface ShapeProps {
+  borderRadius: number;
   motion: Motion;
   padding: number;
   setReference: (node?: RefNode) => void;
diff --git a/package/src/lib/SpotlightTour.context.ts b/package/src/lib/SpotlightTour.context.ts
index 4c247b6..695de99 100644
--- a/package/src/lib/SpotlightTour.context.ts
+++ b/package/src/lib/SpotlightTour.context.ts
@@ -27,12 +27,19 @@ export type Motion = "bounce" | "fade" | "slide";
 export type Shape = "circle" | "rectangle";
 
 export interface ShapeOptions {
+  /**
+   * The rounding radius of the rectangle shape corners.
+   * Ignored if `type` is `"circle"`.
+   *
+   * @default 4
+   */
+  borderRadius?: number;
   /**
    * The padding of the spot shape based on the wrapped component. A zero
    * 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;
   /**
diff --git a/package/src/lib/components/tour-overlay/TourOverlay.component.tsx b/package/src/lib/components/tour-overlay/TourOverlay.component.tsx
index 127c1d6..69932d3 100644
--- a/package/src/lib/components/tour-overlay/TourOverlay.component.tsx
+++ b/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 };
+      ? { borderRadius, padding, type: "circle", ...options }
+      : { borderRadius, padding, type: options };
   }, [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>
diff --git a/package/src/lib/components/tour-overlay/shapes/RectShape.component.tsx b/package/src/lib/components/tour-overlay/shapes/RectShape.component.tsx
index ce1a344..cd1b8b8 100644
--- a/package/src/lib/components/tour-overlay/shapes/RectShape.component.tsx
+++ b/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);