docs: add 3.11 versioned docs

Author: lodev09

docs/versioned_docs/version-3.11.0/guides/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Guides",
+  "position": 5
+}

docs/versioned_docs/version-3.11.0/guides/assets/dimming.gif

@@ -0,0 +1,108 @@
+---
+title: Dimming the Background
+description: Control the bottom sheet's dimming behavior.
+keywords: [bottom sheet dimming, bottom sheet background, inline bottom sheet, maps bottom sheet]
+---
+
+import dimming from './assets/dimming.gif'
+
+One of the most common use cases for a Bottom Sheet is to present it while still allowing users to interact with background components, such as in a Maps app.
+
+In this guide, you can configure `TrueSheet` to achieve this exact functionality.
+
+<img alt="dimming" src={dimming} width="300"/>
+
+## How?
+
+You can easily disable the dimmed background of the sheet by setting [`dimmed`](../reference/configuration#dimmed) to `false`.
+
+```tsx {5}
+export const App = () => {
+  return (
+    <TrueSheet
+      detents={['auto', 0.69, 1]}
+      dimmed={false}
+    >
+      <View />
+    </TrueSheet>
+  )
+}
+```
+
+### Dimmed by Detent Index
+
+To further customize the dimming behavior, [`dimmedDetentIndex`](../reference/configuration#dimmeddetentindex) is also available. Set the [detent](../reference/configuration#detents) `index` at which you want the sheet to start dimming.
+
+```tsx {5}
+export const App = () => {
+  return (
+    <TrueSheet
+      detents={['auto', 0.69, 1]}
+      dimmedDetentIndex={1} // Dim will start at 69% ✅
+    >
+      <View />
+    </TrueSheet>
+  )
+}
+```
+
+:::info
+`dimmedDetentIndex` is ignored if `dimmed` is set to `false`.
+:::
+
+## Customizing Dimming Alpha
+
+You can dynamically control the dimming opacity based on the sheet's position using `ReanimatedTrueSheet` with `animatedPosition`.
+
+:::tip
+Learn more about Reanimated integration in the [Reanimated guide](reanimated).
+:::
+
+```tsx {2-3,7,9-11,14-21}
+import { ReanimatedTrueSheet, ReanimatedTrueSheetProvider, useReanimatedTrueSheet } from '@lodev09/react-native-true-sheet/reanimated'
+import Animated, { useAnimatedStyle } from 'react-native-reanimated'
+import { StyleSheet } from 'react-native'
+
+export const App = () => {
+  return (
+    <ReanimatedTrueSheetProvider>
+      <View style={styles.container}>
+        <CustomBackdrop />
+        <Sheet />
+      </View>
+    </ReanimatedTrueSheetProvider>
+  )
+}
+
+const CustomBackdrop = () => {
+  const { animatedPosition } = useReanimatedTrueSheet()
+
+  const backdropStyle = useAnimatedStyle(() => ({
+    opacity: animatedPosition.value * 0.5, // Adjust multiplier for desired alpha
+  }))
+
+  return <Animated.View style={[StyleSheet.absoluteFill, styles.backdrop, backdropStyle]} />
+}
+
+const Sheet = () => {
+  return (
+    <ReanimatedTrueSheet
+      detents={[0.25, 0.5, 1]}
+      dimmed={false}
+    >
+      <View />
+    </ReanimatedTrueSheet>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  backdrop: {
+    backgroundColor: 'black',
+  },
+})
+```
+
+This allows you to create custom dimming effects that respond to the sheet's movement in real-time.