refactor: searchbar component

docs/6.x/docs/guides/migration.md

@@ -159,6 +159,39 @@ e.g.:
 - The default elevation changed from level `1` to level `3`.
 - The `style` prop no longer configures the background color or border radius. You can override `theme.colors.surfaceContainerHigh` and `theme.shapes.corner.extraLarge` using the `theme` prop instead.
 
+### Searchbar
+
+The `Searchbar` modes use the latest Material 3 terminology in Paper 6.x:
+
+- **`mode="bar"`** → **`mode="contained"`**
+- **`mode="view"`** → **`mode="divided"`**
+
+```tsx
+// Before (v5)
+<Searchbar mode="bar" value={query} onChangeText={setQuery} />
+<Searchbar mode="view" value={query} onChangeText={setQuery} />
+
+// After (v6)
+<Searchbar mode="contained" value={query} onChangeText={setQuery} />
+<Searchbar mode="divided" value={query} onChangeText={setQuery} />
+```
+
+The default `contained` mode adds 24dp horizontal margins and animates them to
+12dp while focused. To keep a full-width Searchbar, provide a horizontal margin;
+this replaces the built-in margin and disables the focus animation:
+
+```tsx
+<Searchbar
+  value={query}
+  onChangeText={setQuery}
+  style={{ marginHorizontal: 0 }}
+/>
+```
+
+Any horizontal margin, including `margin`, disables the built-in focus
+animation. Use `marginVertical` when you only need vertical spacing and want to
+keep the animated horizontal margins.
+
 ### TextInput
 
 The Paper 6.x `TextInput` is a complete rewrite with a new API. Import the component the same way, but note that the props and behavior have changed significantly.

docs/component-docs.config.ts

@@ -130,7 +130,10 @@ const pages = {
     RadioButtonIOS: 'RadioButton/RadioButtonIOS',
     RadioButtonItem: 'RadioButton/RadioButtonItem',
   },
-  Searchbar: 'Searchbar',
+  Searchbar: {
+    Searchbar: 'Searchbar/Searchbar',
+    SearchbarResults: 'Searchbar/SearchbarResults',
+  },
   SegmentedButtons: {
     SegmentedButtons: 'SegmentedButtons/SegmentedButtons',
   },

docs/public/react-native-paper/1.0/app.src.js

@@ -0,0 +1,38 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import RedBox from 'redbox-react';
+import App from '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/node_modules/component-docs/dist/templates/App.js';
+import Layout from '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/node_modules/component-docs/dist/templates/Layout.js';
+import data from './app.data';
+import '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/node_modules/component-docs/dist/styles/reset.css';
+import '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/node_modules/component-docs/dist/styles/globals.css';
+
+import '/Users/drakeoon/Desktop/Dev/projects/react-native-paper/docs/assets/styles.css';
+
+const root = document.getElementById('root');
+const render = () => {
+  try {
+    ReactDOM.hydrate(
+      <App
+        name={window.__INITIAL_PATH__}
+        data={data}
+        layout={Layout}
+      />,
+      root
+    );
+  } catch (e) {
+    ReactDOM.render(
+      <RedBox error={e} />,
+      root
+    );
+  }
+};
+
+if (module.hot) {
+  module.hot.accept(() => {
+    render();
+  });
+}
+
+render();