[Docs] Add platform circles

packages/docs-gesture-handler/docs/components/buttons.mdx

@@ -43,7 +43,7 @@ exclusive?: boolean;
 Defines whether pressing this button prevents other buttons exported by Gesture Handler from being pressed. By default set to `true`.
 
 <Badges platforms={['android']}>
-### rippleColor
+### rippleColor [A]
 </Badges>
 
 ```ts
@@ -53,7 +53,7 @@ rippleColor?: number | ColorValue | null;
 Defines [color](https://reactnative.dev/docs/colors) of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.
 
 <Badges platforms={['android']}>
-### rippleRadius
+### rippleRadius [A]
 </Badges>
 
 
@@ -64,7 +64,7 @@ rippleRadius?: number | null;
 Defines radius of native [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation.
 
 <Badges platforms={['android']}>
-### borderless
+### borderless [A]
 </Badges>
 
 ```ts
@@ -74,7 +74,7 @@ borderless?: boolean;
 If set to `false`, [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation will render only within view bounds.
 
 <Badges platforms={['android']}>
-### foreground
+### foreground [A]
 </Badges>
 
 ```ts
@@ -84,7 +84,7 @@ foreground?: boolean;
 Defines whether the [ripple](https://developer.android.com/reference/android/graphics/drawable/RippleDrawable) animation should be drawn on the foreground of the view.
 
 <Badges platforms={['android']}>
-### touchSoundDisabled
+### touchSoundDisabled [A]
 </Badges>
 
 ```ts
@@ -144,7 +144,7 @@ underlayColor?: string;
 Background color that will be dimmed when the button is in an active state.
 
 <Badges platforms={['ios']}>
-### activeOpacity
+### activeOpacity [I]
 </Badges>
 
 ```ts
@@ -158,7 +158,7 @@ Opacity applied to the underlay when the button is in an active state.
 This type of button component should be used with simple icon-only or text-only buttons. The interaction will be different depending on platform: on Android a borderless ripple will be rendered (it means that the ripple will animate into a circle that can span outside of the view bounds), whereas on iOS the button will be dimmed (similar to how `TouchableOpacity` works). In addition to the props of [`BaseButton`](#basebutton), it accepts the following:
 
 <Badges platforms={['ios']}>
-### activeOpacity
+### activeOpacity [I]
 </Badges>
 
 ```ts

packages/docs-gesture-handler/docs/components/pressable.mdx

@@ -89,7 +89,7 @@ cancelable?: null | boolean;
 Whether a press gesture can be interrupted by a parent gesture such as a scroll event. Defaults to `true`.
 
 <Badges platforms={['android', 'web']}>
-### onHoverIn
+### onHoverIn [A][W]
 </Badges>
 
 ```ts
@@ -99,7 +99,7 @@ onHoverIn?: null | ((event: PressableEvent) => void);
 Called when pointer is hovering over the element.
 
 <Badges platforms={['android', 'web']}>
-### onHoverOut
+### onHoverOut [A][W]
 </Badges>
 
 ```ts
@@ -109,7 +109,7 @@ onHoverOut?: null | ((event: PressableEvent) => void);
 Called when pointer stops hovering over the element.
 
 <Badges platforms={['web']}>
-### delayHoverIn
+### delayHoverIn [W]
 </Badges>
 
 ```ts
@@ -119,7 +119,7 @@ delayHoverIn?: number | null;
 Duration to wait after hover in before calling `onHoverIn`.
 
 <Badges platforms={['web']}>
-### delayHoverOut
+### delayHoverOut [W]
 </Badges>
 
 ```ts
@@ -145,7 +145,7 @@ disabled?: null | boolean;
 Whether the `Pressable` behavior is disabled.
 
 <Badges platforms={['android', 'ios']}>
-### hitSlop
+### hitSlop [A][I]
 </Badges>
 
 ```ts
@@ -157,7 +157,7 @@ Additional distance outside of the view in which a press is detected and [`onPre
 The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
 
 <Badges platforms={['android', 'ios']}>
-### pressRetentionOffset
+### pressRetentionOffset [A][I]
 </Badges>
 
 ```ts
@@ -170,7 +170,7 @@ press before [`onPressOut`](#onpressout) is triggered.
 The `Insets` type is essentially the same as [`Rect`](https://reactnative.dev/docs/rect).
 
 <Badges platforms={['android']}>
-### android_disableSound
+### android_disableSound [A]
 </Badges>
 
 ```ts
@@ -180,7 +180,7 @@ android_disableSound?: null | boolean;
 If `true`, doesn't play system sound on touch.
 
 <Badges platforms={['android']}>
-### android_ripple
+### android_ripple [A]
 </Badges>
 
 ```ts
@@ -192,7 +192,7 @@ Enables the Android [ripple](https://developer.android.com/reference/android/gra
 Accepts values of type [`RippleConfig`](https://reactnative.dev/docs/pressable#rippleconfig).
 
 <Badges platforms={['android']}>
-### needsOffscreenAlphaCompositing
+### needsOffscreenAlphaCompositing [A]
 </Badges>
 
 ```ts

packages/docs-gesture-handler/docs/components/reanimated-drawer-layout.mdx

@@ -229,7 +229,7 @@ export enum DrawerState {
 A function is called when the status of the drawer changes, taking `newState` to represent the drawer's interaction state and `drawerWillShow`, which is `true` when the drawer starts animating towards the open position and `false` otherwise.
 
 <Badges platforms={['ios', 'web']}>
-### enableTrackpadTwoFingerGesture
+### enableTrackpadTwoFingerGesture [I][W]
 </Badges>
 
 ```ts
@@ -250,7 +250,7 @@ Either a component rendered in the content view or a function. If `children` is
 <MouseButtonProp />
 
 <Badges platforms={['web']}>
-### enableContextMenu
+### enableContextMenu [W]
 </Badges>
 
 ```ts
@@ -260,7 +260,7 @@ enableContextMenu: boolean;
 Specifies whether the context menu should be enabled after clicking on the underlying view with the right mouse button. Default value is set to `false` if [`MouseButton.RIGHT`](#mousebutton-web--android-only) is specified.
 
 <Badges platforms={['web']}>
-### userSelect
+### userSelect [W]
 </Badges>
 
 ```ts
@@ -270,7 +270,7 @@ userSelect: 'none' | 'auto' | 'text';
 This parameter allows specifying which `userSelect` property should be applied to the underlying view. Default value is set to `"none"`.
 
 <Badges platforms={['web']}>
-### activeCursor
+### activeCursor [W]
 </Badges>
 
 ```ts

packages/docs-gesture-handler/docs/components/reanimated_swipeable.mdx

@@ -242,7 +242,7 @@ block?: AnyGesture | AnyGesture[];
 Gestures that `Swipeable` will prevent from activating (see [`block`](/docs/composition/block)).
 
 <Badges platforms={['ios', 'web']}>
-### enableTrackpadTwoFingerGesture
+### enableTrackpadTwoFingerGesture [I][W]
 </Badges>
 
 ```ts

packages/docs-gesture-handler/docs/components/touchable.mdx

@@ -357,7 +357,7 @@ exclusive?: boolean;
 Defines whether pressing this button prevents other buttons exported by Gesture Handler from being pressed. By default set to `true`.
 
 <Badges platforms={['android']}>
-### touchSoundDisabled
+### touchSoundDisabled [A]
 </Badges>
 
 ```ts
@@ -466,7 +466,7 @@ Defines the delay, in milliseconds, after which the [`onLongPress`](#onlongpress
 
 
 <Badges platforms={['android']}>
-### androidRipple
+### androidRipple [A]
 </Badges>
 
 <CollapsibleCode 
@@ -487,7 +487,7 @@ type PressableAndroidRippleConfig = {
 Configuration for the ripple effect on Android. If not provided, the ripple effect will be disabled. If `{}` is provided, the ripple effect will be enabled with default configuration.
 
 <Badges platforms={['android', 'ios']}>
-### cancelOnLeave
+### cancelOnLeave [A][I]
 </Badges>
 
 ```ts
@@ -497,7 +497,7 @@ cancelOnLeave?: boolean;
 Whether the touch should be canceled when the pointer leaves the component. By default set to `true`. On web this prop doesn't have any effect and behaves as if `true` was set.
 
 <Badges platforms={['android']}>
-### needsOffscreenAlphaCompositing
+### needsOffscreenAlphaCompositing [A]
 </Badges>
 
 ```ts

packages/docs-gesture-handler/docs/core-components/gesture-detector.mdx

@@ -188,7 +188,7 @@ gesture: SingleGesture | ComposedGesture;
 A gesture object containing the configuration and callbacks. Can be any of the base gestures or any [`ComposedGesture`](/docs/composition/overview).
 
 <Badges platforms={['web']}>
-### userSelect
+### userSelect [W]
 </Badges>
 
 ```ts
@@ -198,7 +198,7 @@ userSelect: 'none' | 'auto' | 'text';
 This parameter allows specifying which `userSelect` property should be applied to the underlying view. Default value is set to `"none"`.
 
 <Badges platforms={['web']}>
-### touchAction
+### touchAction [W]
 </Badges>
 
 ```ts
@@ -208,7 +208,7 @@ touchAction: TouchAction;
 This parameter allows specifying which `touchAction` property should be applied to the underlying view. Supports all CSS [touch-action](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/touch-action) values. Default value is set to `"none"`.
 
 <Badges platforms={['web']}>
-### enableContextMenu
+### enableContextMenu [W]
 </Badges>
 
 ```ts

packages/docs-gesture-handler/docs/gestures/_shared/base-gesture-config.mdx

@@ -68,7 +68,7 @@ testID: string;
 Sets a `testID` property for gesture object, allowing for querying for it in tests.
 
 <Badges platforms={['ios']}>
-### cancelsTouchesInView
+### cancelsTouchesInView [I]
 </Badges>
 
 ```ts
@@ -138,7 +138,7 @@ useAnimated: boolean;
 Setting this property to `true` ensures that the [Animated API](/docs/fundamentals/animated-interactions) functions correctly when `useNativeDriver` is set to `false`. The default value is set to `false`.
 
 <Badges platforms={['web']}>
-### activeCursor
+### activeCursor [W]
 </Badges>
 
 ```ts
@@ -148,7 +148,7 @@ activeCursor: ActiveCursor | SharedValue<ActiveCursor>;
 This parameter allows specifying which cursor should be used when the gesture activates. Supports all [CSS cursor values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/cursor#keyword) (e.g. `"grab"`, `"zoom-in"`). Default value is set to `"auto"`.
 
 <Badges platforms={['ios', 'android']}>
-  ### cancelsJSResponder
+  ### cancelsJSResponder [A][I]
 </Badges>
 
 ```ts

packages/docs-gesture-handler/docs/gestures/_shared/mouse-button.mdx

@@ -1,7 +1,7 @@
 
 
 <Badges platforms={['android', 'web']}>
-### mouseButton
+### mouseButton [A][W]
 </Badges>
 
 <CollapsibleCode 

packages/docs-gesture-handler/docs/gestures/use-hover-gesture.mdx

@@ -81,7 +81,7 @@ const styles = StyleSheet.create({
 <SharedValueInfo />
 
 <Badges platforms={['ios']}>
-### effect
+### effect [I]
 </Badges>
 
 <CollapsibleCode 

packages/docs-gesture-handler/docs/gestures/use-native-gesture.mdx

@@ -97,7 +97,7 @@ export default function App() {
 <SharedValueInfo />
 
 <Badges platforms={['android']}>
-### shouldActivateOnStart
+### shouldActivateOnStart [A]
 </Badges>
 
 
@@ -124,7 +124,7 @@ yieldsToContinuousGestures: boolean | SharedValue<boolean>;
 Composes with [`disallowInterruption`](#disallowinterruption). When both are `true`, this handler still cancels discrete gestures (`Tap`, `LongPress`, `Fling`) on activation but allows continuous gestures (`Pan`, `Pinch`, `Rotation`, `Native`, `Manual`, `Hover`) to interrupt it. No-op when `disallowInterruption` is `false`. Defaults to `false`.
 
 <Badges platforms={['android', 'ios']}>
-### delaysChildPressedState
+### delaysChildPressedState [A][I]
 </Badges>
 
 ```ts

packages/docs-gesture-handler/docs/gestures/use-pan-gesture.mdx

@@ -223,7 +223,7 @@ If range is set as an array, first value must be lower or equal to 0, and the se
 If only one number `p` is given a range of `(-inf, p)` will be used if `p` is higher or equal to 0 and `(-p, inf)` otherwise.
 
 <Badges platforms={['android']}>
-### averageTouches
+### averageTouches [A]
 </Badges>
 
 ```ts
@@ -233,7 +233,7 @@ averageTouches: boolean | SharedValue<boolean>;
 Android, by default, will calculate translation values based on the position of the leading pointer (the first one that was placed on the screen). This modifier allows that behavior to be changed to the one that is default on iOS - the averaged position of all active pointers will be used to calculate the translation values.
 
 <Badges platforms={['ios', 'web']}>
-### enableTrackpadTwoFingerGesture
+### enableTrackpadTwoFingerGesture [I][W]
 </Badges>
 
 ```ts

packages/docs-gesture-handler/docusaurus.config.js

@@ -10,6 +10,10 @@ const webpack = require('webpack');
 const redirectsData = require('./redirects.json');
 
 import { topbarBannerReservationScript } from '@swmansion/t-rex-ui/topbar-banner';
+import {
+  processHeaderMarkers,
+  removeHeaderJSX,
+} from '@swmansion/t-rex-ui/platform-circles';
 import { TOP_BAR_BANNER } from './src/components/topBarBannerConfig';
 
 const firstBannerZone = TOP_BAR_BANNER.zones[0];
@@ -71,6 +75,8 @@ const config = {
               label: '3.x',
             },
           },
+          beforeDefaultRemarkPlugins: [processHeaderMarkers],
+          remarkPlugins: [removeHeaderJSX],
         },
         theme: {
           customCss: require.resolve('./src/css/index.css'),

packages/docs-gesture-handler/package.json

@@ -32,7 +32,7 @@
     "@emotion/styled": "^11.14.0",
     "@mdx-js/react": "^3.0.0",
     "@mui/material": "^7.1.0",
-    "@swmansion/t-rex-ui": "1.3.5",
+    "@swmansion/t-rex-ui": "1.3.7",
     "@vercel/og": "^0.6.2",
     "babel-polyfill": "^6.26.0",
     "babel-preset-expo": "^9.2.2",