V5

.vscode/settings.json

@@ -24,4 +24,7 @@
     "editor.defaultFormatter": "biomejs.biome"
   },
   "editor.defaultFormatter": "biomejs.biome",
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
 }

example/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, viewport-fit=cover"
+      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no"
     />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 

example/package.json

@@ -18,7 +18,7 @@
     "generate:pwa": "pwa-assets-generator --preset minimal public/favicon.svg"
   },
   "dependencies": {
-    "motion": "12.9.2",
+    "motion": "12.23.11",
     "react": "19.1.0",
     "react-aria": "3.39.0",
     "react-dom": "19.1.0",

example/src/assets.d.ts

@@ -0,0 +1,16 @@
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+declare module '*.svg' {
+  const src: string;
+  export default src;
+}

example/src/components/App.tsx

@@ -1,36 +1,40 @@
-import { styled } from 'styled-components';
-import { Routes, Route, Link } from 'react-router';
 import { MdAccessibility as A11yIcon } from 'react-icons/md';
+import { Link, Route, Routes } from 'react-router';
+import { styled } from 'styled-components';
 
 import {
-  FaScroll as ScrollIcon,
-  FaLock as LockIcon,
+  FaMap as AppleMapIcon,
+  FaMusic as AppleMusicIcon,
+  FaMobile,
+  FaWalking,
   FaKeyboard as KeyboardIcon,
+  FaLock as LockIcon,
   FaMoon as MoonIcon,
-  FaWalking,
-  FaMobile,
+  FaPaintBrush as PaintIcon,
+  FaScroll as ScrollIcon
 } from 'react-icons/fa';
 
 import {
   AiOutlineColumnHeight as HeightIcon,
-  AiFillApple as AppleIcon,
   AiOutlineSlack as SlackIcon,
   AiOutlineControl as SnapIcon,
 } from 'react-icons/ai';
 
-import { Screen, DarkMode, ScrollView } from './common';
-import { SnapPoints } from './SnapPoints';
-import { Scrollable } from './Scrollable';
-import { AppleMusic } from './apple-music';
-import { SlackMessage } from './slack-message';
-import { A11y } from './a11y';
+import { AvoidKeyboard } from './AvoidKeyboard';
+import { ContentHeight } from './ContentHeight';
+import { CustomStyles } from './CustomStyles';
 import { DisableDrag } from './DisableDrag';
+import { FullScreen } from './FullScreen';
+import { ReducedMotion } from './ReducedMotion';
+import { Scrollable } from './Scrollable';
 import { ScrollableSnapPoints } from './ScrollableSnapPoints';
-import { ContentHeight } from './ContentHeight';
-import { AvoidKeyboard } from './AvoidKeyboard';
 import { ShadowDOM } from './ShadowDOM';
-import { ReducedMotion } from './ReducedMotion';
-import { FullScreen } from './FullScreen';
+import { SnapPoints } from './SnapPoints';
+import { A11y } from './a11y';
+import { AppleMaps } from './apple-maps';
+import { AppleMusic } from './apple-music';
+import { DarkMode, Screen, ScrollView } from './common';
+import { SlackMessage } from './slack-message';
 
 export function App() {
   return (
@@ -84,6 +88,14 @@ export function App() {
             </Screen>
           }
         />
+        <Route
+          path="custom-styles/*"
+          element={
+            <Screen>
+              <CustomStyles />
+            </Screen>
+          }
+        />
         <Route
           path="apple-music/*"
           element={
@@ -93,6 +105,15 @@ export function App() {
             </Screen>
           }
         />
+        <Route
+          path="apple-maps/*"
+          element={
+            <Screen>
+              <AppleMaps />
+              <DarkMode />
+            </Screen>
+          }
+        />
         <Route
           path="slack-message/*"
           element={
@@ -126,7 +147,7 @@ export function App() {
             </Screen>
           }
         />
-         <Route
+        <Route
           path="full-screen/*"
           element={
             <Screen>
@@ -164,6 +185,13 @@ const ExampleSelector = () => {
         </ExampleLink>
       </li>
 
+      <li>
+        <ExampleLink to="custom-styles">
+          <PaintIcon size={32} />
+          <span>Custom Styles</span>
+        </ExampleLink>
+      </li>
+
       <li>
         <ExampleLink to="scrollable">
           <ScrollIcon size={48} />
@@ -194,11 +222,18 @@ const ExampleSelector = () => {
 
       <li>
         <ExampleLink to="apple-music">
-          <AppleIcon size={48} />
+          <AppleMusicIcon size={48} />
           <span>Apple Music</span>
         </ExampleLink>
       </li>
 
+      <li>
+        <ExampleLink to="apple-maps">
+          <AppleMapIcon size={48} />
+          <span>Apple Maps</span>
+        </ExampleLink>
+      </li>
+
       <li>
         <ExampleLink to="slack-message">
           <SlackIcon size={48} />
@@ -227,7 +262,6 @@ const ExampleSelector = () => {
         </ExampleLink>
       </li>
 
-
       <li>
         <ExampleLink to="shadow-dom">
           <MoonIcon size={48} />

example/src/components/AvoidKeyboard.tsx

@@ -1,44 +1,41 @@
-import { styled } from 'styled-components';
 import { useRef } from 'react';
 import { Sheet, type SheetRef } from 'react-modal-sheet';
+import { styled } from 'styled-components';
 
-import { Button } from './common';
-import { useAnimatedVirtualKeyboard } from './hooks';
 import { ExampleLayout } from './ExampleLayout';
+import { Button } from './common';
 
 export function AvoidKeyboard() {
   const sheetRef = useRef<SheetRef>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const { keyboardHeight, isKeyboardOpen } = useAnimatedVirtualKeyboard();
+  const formRef = useRef<HTMLFormElement | null>(null);
 
   return (
     <ExampleLayout
       title="Avoid keyboard"
       description="Note that keyboard avoidance only works on mobile devices!"
     >
       {({ isOpen, close }) => (
-        <Sheet
-          ref={sheetRef}
-          isOpen={isOpen}
-          onClose={close}
-          detent="content-height"
-        >
+        <Sheet ref={sheetRef} isOpen={isOpen} onClose={close} detent="content">
           <Sheet.Container>
             <Sheet.Header />
-            <Sheet.Content style={{ paddingBottom: keyboardHeight }}>
-              <Sheet.Scroller>
-                <Content>
-                  <p>Focus input to show virtual keyboard</p>
-
-                  <Input ref={inputRef} />
-
-                  {isKeyboardOpen ? (
-                    <strong>Virtual keyboard is open!</strong>
-                  ) : (
-                    <Button onPress={close}>Close</Button>
-                  )}
-                </Content>
-              </Sheet.Scroller>
+            <Sheet.Content>
+              <Content>
+                <Form
+                  ref={formRef}
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    alert('Form submitted!');
+                  }}
+                >
+                  <Input name="firstName" placeholder="First name" />
+                  <Input name="lastName" placeholder="Last name" />
+                  <Input name="profession" placeholder="Profession" />
+                  <Input name="email" placeholder="Email" type="email" />
+                  <Input name="phone" placeholder="Phone number" type="tel" />
+                  <Input name="message" placeholder="Message" type="text" />
+                  <Button type="submit">Submit</Button>
+                </Form>
+              </Content>
             </Sheet.Content>
           </Sheet.Container>
           <Sheet.Backdrop />
@@ -54,12 +51,17 @@ const Content = styled.div`
   padding-top: 0px;
 `;
 
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+
 const Input = styled.input`
   padding: 12px;
   font-size: 16px;
   border: 2px solid #ccc;
   border-radius: 8px;
-  margin-bottom: 16px;
   outline: none;
 
   &:focus {