feat: compound KeyboardToolbar (#1125)

## 📜 Description

Added compound pattern to `KeyboardToolbar` component.

## 💡 Motivation and Context

This component started as a very simple component with limited
customization. However, over the time it got many new props, such as
`onNextCallback` etc. and right now we have too many props for
customization.

Since I'm planning to add
#881
I decided that it'll be a good time to refactor the component and apply
compound pattern. So in the end I come up with next API design:

```tsx
<KeyboardToolbar>
  <KeyboardToolbar.Background />
  <KeyboardToolbar.Prev />
  <KeyboardToolbar.Next />
  <KeyboardToolbar.Content />
  <KeyboardToolbar.Done />
</KeyboardToolbar>
```

> I intentionally changed `blur` prop to `background`, because with iOS
26 we may use liquid glass as a container

Closes
#1121

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### JS

- added new compound `KeyboardToolbar` API;
- moved props declaration into `types.ts` file.

### Docs

- added new API reference;
- added migration guide.

## 🤔 How Has This Been Tested?

- tested that old code works with new API and doesn't introduce visual
regressions (via e2e tests)
- started to use new API and assure that it doesn't break e2e tests.

## 📸 Screenshots (if appropriate):

<img width="614" height="422" alt="image"
src="https://github.com/user-attachments/assets/8d2cc932-7fd8-4f29-89d4-bf4961bd97dc"
/>

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

Author: kirillzyusko

FabricExample/src/screens/Examples/AwareScrollView/styles.ts

@@ -38,4 +38,7 @@ export const styles = StyleSheet.create({
     borderRadius: 8,
     paddingHorizontal: 12,
   },
+  bottomSheetContent: {
+    flex: 1,
+  },
 });

FabricExample/src/screens/Examples/Toolbar/index.tsx

@@ -156,18 +156,26 @@ function Form() {
         />
       </KeyboardAwareScrollView>
       <KeyboardToolbar
-        blur={blur}
-        content={
-          showAutoFill ? (
-            <AutoFillContacts onContactSelected={onContactSelected} />
-          ) : null
-        }
         insets={insets}
         opacity={Platform.OS === "ios" ? "4F" : "DD"}
-        onDoneCallback={haptic}
-        onNextCallback={haptic}
-        onPrevCallback={haptic}
-      />
+      >
+        <KeyboardToolbar.Background>
+          <BlurView
+            blurAmount={32}
+            blurType={Platform.OS === "ios" ? "chromeMaterial" : "light"}
+            reducedTransparencyFallbackColor="white"
+            style={styles.absolute}
+          />
+        </KeyboardToolbar.Background>
+        <KeyboardToolbar.Content>
+          {showAutoFill ? (
+            <AutoFillContacts onContactSelected={onContactSelected} />
+          ) : null}
+        </KeyboardToolbar.Content>
+        <KeyboardToolbar.Prev onPress={haptic} />
+        <KeyboardToolbar.Next onPress={haptic} />
+        <KeyboardToolbar.Done onPress={haptic} />
+      </KeyboardToolbar>
     </>
   );
 }
@@ -238,12 +246,3 @@ const styles = StyleSheet.create({
     marginTop: 32,
   },
 });
-
-const blur = (
-  <BlurView
-    blurAmount={32}
-    blurType={Platform.OS === "ios" ? "chromeMaterial" : "light"}
-    reducedTransparencyFallbackColor="white"
-    style={styles.absolute}
-  />
-);