feat!(shape): Make shape configurable

BREAKING CHANGE: Making the shape configurable also removes the `spotPadding` prop from the SpotlightTourProvider. The padding can now be configured in the `shape` prop of the SpotlightTourProvider or independently on each step configuration.

package/src/lib/SpotlightTour.context.ts

@@ -17,6 +17,25 @@ export type Motion = "bounce" | "slide" | "fade";
  */
 export type Shape = "circle" | "rectangle";
 
+export interface ShapeOptions {
+  /**
+   * 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;
+   */
+  padding?: number;
+  /**
+   * The shape of the spotlight. Possible values are:
+   * - `circle`
+   * - `rectangle`
+   *
+   * @default circle
+   */
+  type?: Shape;
+}
+
 export interface RenderProps {
   /**
    * The index of the current step the tour is on.
@@ -179,12 +198,12 @@ export interface TourStep extends TooltipProps {
    */
   render: (props: RenderProps) => ReactElement;
   /**
-   * Specifies the spotlight shape for the step. You can set the default shape
+   * Configures the spotlight shape for the step. You can set the default shape
    * globally on the `SpotlightTourProvider` props too.
    *
    * @default circle
    */
-  shape?: Shape;
+  shape?: Shape | ShapeOptions;
 }
 
 export interface SpotlightTour {

package/src/lib/SpotlightTour.provider.tsx

@@ -15,6 +15,7 @@ import {
   Motion,
   OSConfig,
   Shape,
+  ShapeOptions,
   SpotlightTour,
   SpotlightTourContext,
   SpotlightTourCtx,
@@ -82,20 +83,12 @@ export interface SpotlightTourProviderProps extends TooltipProps {
    */
   overlayOpacity?: number;
   /**
-   * Sets the default spotlight shape for all steps. You can override this
-   * value on each step too.
+   * Configures the default spotlight shape for all steps. You can override
+   * this value on each step too.
    *
    * @default circle
    */
-  shape?: Shape;
-  /**
-   * Defines the padding of the spot shape based on the wrapped component, so a
-   * zero padding means the spot shape will fit exactly around the wrapped
-   * component. The padding value is a number in points.
-   *
-   * @default 16;
-   */
-  spotPadding?: number;
+  shape?: Shape | ShapeOptions;
   /**
    * An array of `TourStep` objects that define each step of the tour.
    */
@@ -120,7 +113,6 @@ export const SpotlightTourProvider = forwardRef<SpotlightTour, SpotlightTourProv
     overlayColor = "black",
     overlayOpacity = 0.45,
     shape = "circle",
-    spotPadding = 16,
     steps,
   } = props;
 
@@ -222,7 +214,6 @@ export const SpotlightTourProvider = forwardRef<SpotlightTour, SpotlightTourProv
         motion={motion}
         nativeDriver={nativeDriver}
         onBackdropPress={onBackdropPress}
-        padding={spotPadding}
         ref={overlay}
         shape={shape}
         spot={spot}

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

@@ -35,6 +35,7 @@ import {
   Motion,
   OSConfig,
   Shape,
+  ShapeOptions,
   SpotlightTourContext,
   TooltipProps,
   TourStep,
@@ -55,8 +56,7 @@ interface TourOverlayProps extends ToOptional<TooltipProps> {
   motion: Motion;
   nativeDriver: boolean | OSConfig<boolean>;
   onBackdropPress: Optional<BackdropPressBehavior>;
-  padding: number;
-  shape: Shape;
+  shape: Shape | ShapeOptions;
   spot: LayoutRectangle;
   tourStep: TourStep;
 }
@@ -69,7 +69,6 @@ export const TourOverlay = forwardRef<TourOverlayRef, TourOverlayProps>((props,
     motion,
     nativeDriver,
     onBackdropPress,
-    padding,
     shape,
     spot,
     tourStep,
@@ -100,8 +99,13 @@ export const TourOverlay = forwardRef<TourOverlayRef, TourOverlayProps>((props,
     return tourStep.motion ?? motion;
   }, [tourStep, motion]);
 
-  const stepShape = useMemo((): Shape => {
-    return tourStep.shape ?? shape;
+  const shapeOptions = useMemo((): Required<ShapeOptions> => {
+    const options = tourStep.shape ?? shape;
+    const padding = 16;
+
+    return typeof options !== "string"
+      ? { padding, type: "circle", ...options }
+      : { padding, type: options };
   }, [tourStep, shape]);
 
   const useNativeDriver = useMemo(() => {
@@ -118,11 +122,11 @@ export const TourOverlay = forwardRef<TourOverlayRef, TourOverlayProps>((props,
   }, [nativeDriver]);
 
   const ShapeMask = useMemo(<P extends ShapeProps>(): ComponentType<P> => {
-    switch (stepShape) {
+    switch (shapeOptions.type) {
       case "circle": return CircleShape;
       case "rectangle": return RectShape;
     }
-  }, [stepShape]);
+  }, [shapeOptions]);
 
   const handleBackdropPress = useCallback((): void => {
     const handler = tourStep.onBackdropPress ?? onBackdropPress;
@@ -196,7 +200,7 @@ export const TourOverlay = forwardRef<TourOverlayRef, TourOverlayProps>((props,
                 spot={spot}
                 setReference={refs.setReference}
                 motion={stepMotion}
-                padding={padding}
+                padding={shapeOptions.padding}
                 useNativeDriver={useNativeDriver}
               />
             </Mask>

package/src/main.ts

@@ -14,6 +14,7 @@ export {
   OSConfig,
   RenderProps,
   Shape,
+  ShapeOptions,
   SpotlightTour,
   StopParams,
   TooltipProps,