@sigmela/router 0.8.0 → 0.9.0

package/dist/router.css

@@ -223,7 +223,14 @@
   isolation: isolate;
 }
 
+/* Positioned here as well as by SheetSurface's utility classes, so the scrim
+   still covers the shell in apps without Tailwind. */
 .router-modal-backdrop {
+  pointer-events: auto;
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  border: 0;
   background: var(--router-scrim);
   z-index: 0;
 }
@@ -491,6 +498,33 @@ html[data-router-shell='desktop-fullscreen'] #root {
     .router-modal-surface--content-sized {
     height: auto;
   }
+
+  /* A right panel anchors to the viewport edge in either shell mode, so it
+     escapes the contained column. Modal.tsx only adds these classes at this
+     width; below it the surface is the regular fullscreen modal. */
+  .router-overlay-shell.router-modal-shell.router-modal-shell--right {
+    inset: 0;
+    width: auto;
+    max-width: none;
+    margin-inline: 0;
+    align-items: stretch;
+    justify-content: flex-end;
+  }
+
+  .router-modal-shell--right > .router-modal-backdrop {
+    background: var(--router-scrim);
+  }
+
+  .router-overlay-shell.router-modal-shell--right
+    .router-modal-surface.router-modal-surface--right {
+    flex: 0 0 auto;
+    width: min(var(--router-modal-width, 393px), calc(100vw - 36px));
+    max-width: calc(100vw - 36px);
+    height: calc(100dvh - 36px);
+    max-height: calc(100dvh - 36px);
+    margin: 18px;
+    border-radius: 16px;
+  }
 }
 
 /* ==================== SPLIT VIEW ==================== */

package/dist/utils/useMediaQuery.d.ts

@@ -0,0 +1,5 @@
+export declare function useMediaQuery(query: string): boolean;
+export declare function useMinWidth(minWidth: number): boolean;
+/** Read once, at the moment an animation starts. */
+export declare function prefersReducedMotion(): boolean;
+//# sourceMappingURL=useMediaQuery.d.ts.map

package/dist/utils/useMediaQuery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaQuery.d.ts","sourceRoot":"","sources":["../../src/utils/useMediaQuery.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CA+BpD;AAED,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAErD;AAED,oDAAoD;AACpD,wBAAgB,oBAAoB,IAAI,OAAO,CAM9C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sigmela/router",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Native-feeling router for React web apps: screen stacks with gesture-driven back, modals, sheets, tab bars, drawers and split views.",
   "license": "MIT",
   "author": "Sigmela",