@patternmode/stacksheet 1.3.8 → 1.4.0

package/dist/SheetPanel/default-header.d.ts

@@ -1,5 +1,3 @@
 import type { HeaderRenderProps } from "../types";
-export declare const DefaultHeader: ({ isNested, onBack, onClose, className, }: HeaderRenderProps & {
-    className?: string;
-}) => import("react").JSX.Element;
+export declare const DefaultHeader: ({ isNested, onBack, onClose }: HeaderRenderProps) => import("react").JSX.Element;
 //# sourceMappingURL=default-header.d.ts.map

package/dist/SheetPanel/default-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default-header.d.ts","sourceRoot":"","sources":["../../src/SheetPanel/default-header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,eAAO,MAAM,aAAa,GAAI,2CAK3B,iBAAiB,GAAG;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,gCAuBA,CAAC"}
+{"version":3,"file":"default-header.d.ts","sourceRoot":"","sources":["../../src/SheetPanel/default-header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAIlD,eAAO,MAAM,aAAa,GAAI,+BAA+B,iBAAiB,gCAqB7E,CAAC"}

package/dist/SheetPanel/sheet-panel-content.d.ts

@@ -1,14 +1,13 @@
 import type { ComponentType, ReactNode } from "react";
 import type { HeaderRenderProps } from "../types";
 export declare const PanelInnerContent: {
-    ({ isComposable, shouldRender, Content, data, renderHeader, headerProps, headerClassName, }: {
+    ({ isComposable, shouldRender, Content, data, renderHeader, headerProps, }: {
         isComposable: boolean;
         shouldRender: boolean;
         Content: ComponentType<Record<string, unknown>> | undefined;
         data: Record<string, unknown>;
         renderHeader?: false | ((props: HeaderRenderProps) => ReactNode);
         headerProps: HeaderRenderProps;
-        headerClassName: string | undefined;
     }): import("react").JSX.Element | null;
     displayName: string;
 };

package/dist/SheetPanel/sheet-panel-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sheet-panel-content.d.ts","sourceRoot":"","sources":["../../src/SheetPanel/sheet-panel-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAGlD,eAAO,MAAM,iBAAiB;iGAQ3B;QACD,YAAY,EAAE,OAAO,CAAC;QACtB,YAAY,EAAE,OAAO,CAAC;QACtB,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;QAC5D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC9B,YAAY,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,CAAC;QACjE,WAAW,EAAE,iBAAiB,CAAC;QAC/B,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;KACrC;;CAwBA,CAAC"}
+{"version":3,"file":"sheet-panel-content.d.ts","sourceRoot":"","sources":["../../src/SheetPanel/sheet-panel-content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAGlD,eAAO,MAAM,iBAAiB;gFAO3B;QACD,YAAY,EAAE,OAAO,CAAC;QACtB,YAAY,EAAE,OAAO,CAAC;QACtB,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;QAC5D,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;QAC9B,YAAY,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,CAAC;QACjE,WAAW,EAAE,iBAAiB,CAAC;KAChC;;CAoBA,CAAC"}

package/dist/SheetPanel/sheet-panel-handles.d.ts

@@ -1,6 +1,7 @@
-import type { Side } from "../types";
-export declare const BottomHandle: ({ onDismiss }: {
+import type { HandlePosition, Side } from "../types";
+export declare const BottomHandle: ({ onDismiss, position, }: {
     onDismiss?: () => void;
+    position?: HandlePosition;
 }) => import("react").JSX.Element;
 export declare const SideHandle: ({ side, isHovered, onDismiss, }: {
     side: Side;

package/dist/SheetPanel/sheet-panel-handles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sheet-panel-handles.d.ts","sourceRoot":"","sources":["../../src/SheetPanel/sheet-panel-handles.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErC,eAAO,MAAM,YAAY,GAAI,eAAe;IAAE,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,gCAUrE,CAAC;AACF,eAAO,MAAM,UAAU,GAAI,iCAIxB;IACD,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,gCAgBA,CAAC"}
+{"version":3,"file":"sheet-panel-handles.d.ts","sourceRoot":"","sources":["../../src/SheetPanel/sheet-panel-handles.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAErD,eAAO,MAAM,YAAY,GAAI,0BAG1B;IACD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,gCAiBA,CAAC;AACF,eAAO,MAAM,UAAU,GAAI,iCAIxB;IACD,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,gCAgBA,CAAC"}

package/dist/SheetPanel/sheet-panel-types.d.ts

@@ -13,6 +13,8 @@ export interface SheetPanelProps {
     isNested: boolean;
     isTop: boolean;
     item: SheetItem;
+    /** On-screen keyboard height (px) to lift bottom sheets above; 0 when inactive. */
+    keyboardInset: number;
     layout?: StacksheetLayout;
     onSnap: (index: number) => void;
     pop: () => void;

package/dist/SheetPanel/sheet-panel-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sheet-panel-types.d.ts","sourceRoot":"","sources":["../../src/SheetPanel/sheet-panel-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,IAAI,EACJ,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,eAAe;IAC9B,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;IAC5D,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,EAAE,MAAM,IAAI,CAAC;IAChB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,CAAC;IACjE,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,WAAW,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB"}
+{"version":3,"file":"sheet-panel-types.d.ts","sourceRoot":"","sources":["../../src/SheetPanel/sheet-panel-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EACV,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,IAAI,EACJ,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,eAAe;IAC9B,eAAe,EAAE,MAAM,CAAC;IACxB,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;IAC5D,UAAU,EAAE,kBAAkB,CAAC;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,cAAc,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,SAAS,CAAC;IAChB,mFAAmF;IACnF,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,GAAG,EAAE,MAAM,IAAI,CAAC;IAChB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,CAAC;IACjE,YAAY,EAAE,OAAO,CAAC;IACtB,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,WAAW,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/dist/SheetPanel/sheet-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sheet-panel.d.ts","sourceRoot":"","sources":["../../src/SheetPanel/sheet-panel.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAyT3D,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAiFhD,CAAC"}
+{"version":3,"file":"sheet-panel.d.ts","sourceRoot":"","sources":["../../src/SheetPanel/sheet-panel.tsx"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AA8U3D,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCAkFhD,CAAC"}

package/dist/SheetParts/sheet-handle.d.ts

@@ -1,3 +1,3 @@
 import type { SheetOptionalContentPartProps } from "./sheet-part-types";
-export declare const SheetHandle: ({ asChild, className, style, children, }: SheetOptionalContentPartProps) => import("react").JSX.Element;
+export declare const SheetHandle: ({ asChild, className, style, children, }: SheetOptionalContentPartProps) => import("react").JSX.Element | null;
 //# sourceMappingURL=sheet-handle.d.ts.map

package/dist/SheetParts/sheet-handle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sheet-handle.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-handle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,oBAAoB,CAAC;AAExE,eAAO,MAAM,WAAW,GAAI,0CAKzB,6BAA6B,gCAoB/B,CAAC"}
+{"version":3,"file":"sheet-handle.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-handle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,oBAAoB,CAAC;AAExE,eAAO,MAAM,WAAW,GAAI,0CAKzB,6BAA6B,uCA0B/B,CAAC"}

package/dist/SheetParts/sheet-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sheet-header.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,eAAO,MAAM,WAAW,GAAI,yCAAyC,cAAc,gCAalF,CAAC"}
+{"version":3,"file":"sheet-header.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,eAAO,MAAM,WAAW,GAAI,yCAAyC,cAAc,gCAWlF,CAAC"}

package/dist/SheetParts/sheet-parts.d.ts

@@ -13,7 +13,7 @@ export declare const Sheet: {
     readonly Close: ({ asChild, className, style, children, }: import("./sheet-part-types").SheetOptionalContentPartProps) => import("react").JSX.Element;
     readonly Description: ({ asChild, className, style, children }: import("./sheet-part-types").SheetPartProps) => import("react").JSX.Element;
     readonly Footer: ({ asChild, className, style, children }: import("./sheet-part-types").SheetPartProps) => import("react").JSX.Element;
-    readonly Handle: ({ asChild, className, style, children, }: import("./sheet-part-types").SheetOptionalContentPartProps) => import("react").JSX.Element;
+    readonly Handle: ({ asChild, className, style, children, }: import("./sheet-part-types").SheetOptionalContentPartProps) => import("react").JSX.Element | null;
     readonly Header: ({ asChild, className, style, children }: import("./sheet-part-types").SheetPartProps) => import("react").JSX.Element;
     readonly Title: ({ asChild, className, style, children }: import("./sheet-part-types").SheetPartProps) => import("react").JSX.Element;
 };

package/dist/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,cAAc,EAKd,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAkDjB,wGAAwG;AACxG,eAAO,MAAM,aAAa,GAAI,SAAQ,gBAAqB,KAAG,cAa7D,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,cAAc,EAKd,gBAAgB,EACjB,MAAM,SAAS,CAAC;AAoDjB,wGAAwG;AACxG,eAAO,MAAM,aAAa,GAAI,SAAQ,gBAAqB,KAAG,cAa7D,CAAC"}

package/dist/index.mjs

@@ -56,10 +56,12 @@ const DEFAULT_CONFIG = {
 	closeThreshold: .25,
 	dismissible: true,
 	drag: true,
+	handle: "inside",
 	lockScroll: true,
 	maxDepth: Number.POSITIVE_INFINITY,
 	maxWidth: "90vw",
 	modal: true,
+	repositionInputs: true,
 	scaleBackgroundAmount: .97,
 	shouldScaleBackground: false,
 	showOverlay: true,
@@ -169,6 +171,79 @@ const useViewportHeight = (active) => {
 	}, []);
 	return active ? height ?? 0 : 0;
 };
+/** Input types that don't summon the on-screen keyboard. */
+const NON_TEXT_INPUT_TYPES = new Set([
+	"button",
+	"checkbox",
+	"color",
+	"file",
+	"hidden",
+	"image",
+	"radio",
+	"range",
+	"reset",
+	"submit"
+]);
+/** True for elements whose focus raises the on-screen keyboard. */
+const isEditableElement = (el) => {
+	if (!(el instanceof HTMLElement)) return false;
+	if (el.isContentEditable) return true;
+	if (el instanceof HTMLTextAreaElement) return true;
+	if (el instanceof HTMLInputElement) return !NON_TEXT_INPUT_TYPES.has(el.type);
+	return false;
+};
+/**
+* Height (px) the on-screen keyboard occupies while a field inside `containerRef`
+* is focused, else `0`. Derived from the gap between the layout viewport and the
+* (keyboard-shrunk, possibly panned) visual viewport.
+*
+* Focus-gated to fields *inside the container* so unrelated `visualViewport`
+* changes — Android URL-bar collapse, or typing into the page behind a
+* non-modal sheet — don't move the sheet, and zero while pinch-zoomed since a
+* shrunk visual viewport then isn't a keyboard. rAF-throttled because iOS
+* fires many resize events over the keyboard's open animation.
+*/
+const useKeyboardInset = (active, containerRef) => {
+	const [inset, setInset] = useState(0);
+	useEffect(() => {
+		const canListen = active && typeof window !== "undefined";
+		const container = containerRef.current;
+		const viewport = canListen ? window.visualViewport : void 0;
+		let frame = 0;
+		let scheduled = false;
+		const measure = () => {
+			const el = document.activeElement;
+			const focused = isEditableElement(el) && container !== null && container.contains(el);
+			const zoomed = (viewport?.scale ?? 1) > 1;
+			const visibleHeight = viewport?.height ?? window.innerHeight;
+			const gap = window.innerHeight - (viewport?.offsetTop ?? 0) - visibleHeight;
+			setInset(focused && !zoomed ? Math.max(0, gap) : 0);
+		};
+		const schedule = () => {
+			if (scheduled) return;
+			scheduled = true;
+			frame = window.requestAnimationFrame(() => {
+				scheduled = false;
+				measure();
+			});
+		};
+		if (canListen) {
+			container?.addEventListener("focusin", schedule);
+			container?.addEventListener("focusout", schedule);
+			viewport?.addEventListener("resize", schedule, { passive: true });
+			viewport?.addEventListener("scroll", schedule, { passive: true });
+			schedule();
+		}
+		return () => {
+			if (frame !== 0) window.cancelAnimationFrame(frame);
+			container?.removeEventListener("focusin", schedule);
+			container?.removeEventListener("focusout", schedule);
+			viewport?.removeEventListener("resize", schedule);
+			viewport?.removeEventListener("scroll", schedule);
+		};
+	}, [active, containerRef]);
+	return active ? inset : 0;
+};
 const BODY_SCALE_TRANSITION = "transform 500ms cubic-bezier(0.32, 0.72, 0, 1), border-radius 500ms cubic-bezier(0.32, 0.72, 0, 1)";
 /** Fallback delay (transition duration + margin) if `transitionend` never fires. */
 const BODY_SCALE_RESET_FALLBACK_MS = 600;
@@ -319,14 +394,12 @@ const getSnapOffset = (snapIndex, snapHeights, panelHeight) => {
 //#region src/renderer-helpers.ts
 const EMPTY_CLASSNAMES = {
 	backdrop: "",
-	header: "",
 	panel: ""
 };
 const resolveClassNames = (cn) => {
 	if (!cn) return EMPTY_CLASSNAMES;
 	return {
 		backdrop: cn.backdrop ?? "",
-		header: cn.header ?? "",
 		panel: cn.panel ?? ""
 	};
 };
@@ -358,8 +431,21 @@ const VISUAL_TWEEN = {
 const SHADOW_SM = "0px 1px 3px 0px rgba(0,0,0,0.06), 0px 6px 12px 0px rgba(0,0,0,0.06)";
 const SHADOW_LG = "0px 8px 24px 0px rgba(0,0,0,0.06), 0px 24px 48px 0px rgba(0,0,0,0.04), 0px 48px 96px 0px rgba(0,0,0,0.03)";
 const getShadow = (isNested) => isNested ? SHADOW_SM : SHADOW_LG;
-const buildPanelStyle = (panelStyles, isTop, hasPanelClass, isDragging) => ({
+/**
+* Clear the on-screen keyboard. Plain sheets stay anchored at bottom: 0 and
+* pad their content up instead — the panel surface extends under the keyboard
+* (and iOS Safari's floating URL-pill chrome), so no backdrop gap ever shows
+* between sheet and keyboard, and measurement error hides behind the keyboard.
+* Snap sheets are transform-anchored, so they lift via `bottom` (not the
+* Motion `y` transform) and keep their viewport-driven sizing untouched.
+*/
+const getKeyboardClearance = (keyboardInset, padForKeyboard) => {
+	if (keyboardInset <= 0) return {};
+	return padForKeyboard ? { paddingBottom: keyboardInset } : { bottom: keyboardInset };
+};
+const buildPanelStyle = (panelStyles, isTop, hasPanelClass, isDragging, keyboardInset, padForKeyboard) => ({
 	...panelStyles,
+	...getKeyboardClearance(keyboardInset, padForKeyboard),
 	pointerEvents: isTop ? "auto" : "none",
 	...isTop ? {} : { contain: "layout style paint" },
 	...isDragging ? { transition: "none" } : {},
@@ -742,6 +828,12 @@ const useSheetPanel = () => {
 //#endregion
 //#region src/stacking.ts
 /**
+* Resting height of a bottom sheet. `dvh` tracks the dynamic viewport on iOS
+* Safari (accounts for browser chrome). Shared so the keyboard-inset `calc()`
+* in `buildPanelStyle` can't drift from the panel's base height.
+*/
+const BOTTOM_SHEET_HEIGHT = "85dvh";
+/**
 * Compute visual transforms for a panel at a given depth.
 * depth=0 is the top (foreground) panel.
 * Panels beyond renderThreshold are clamped to the edge position and faded out.
@@ -818,6 +910,7 @@ const getPanelStyles = (side, config, index) => {
 	const base = {
 		display: "flex",
 		flexDirection: "column",
+		outline: "none",
 		position: "fixed",
 		transformOrigin: getTransformOrigin(side),
 		willChange: "transform",
@@ -826,9 +919,9 @@ const getPanelStyles = (side, config, index) => {
 	if (side === "bottom") return {
 		...base,
 		bottom: 0,
-		height: "85dvh",
+		height: BOTTOM_SHEET_HEIGHT,
 		left: 0,
-		maxHeight: "85dvh",
+		maxHeight: BOTTOM_SHEET_HEIGHT,
 		right: 0
 	};
 	const sideStyles = side === "right" ? {
@@ -876,34 +969,25 @@ const XIcon = () => /* @__PURE__ */ jsx("svg", {
 });
 //#endregion
 //#region src/SheetPanel/default-header.tsx
-const DefaultHeader = ({ isNested, onBack, onClose, className }) => /* @__PURE__ */ jsxs("div", {
-	className: `flex shrink-0 items-center justify-between px-4 pt-4 pb-2 ${className ?? ""}`,
-	children: [/* @__PURE__ */ jsx("div", {
-		className: "flex items-center gap-2",
-		children: isNested && /* @__PURE__ */ jsx("button", {
-			"aria-label": "Back",
-			className: "flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-black/5 p-0 text-inherit opacity-70 transition-opacity duration-150 hover:opacity-100",
-			onClick: onBack,
-			type: "button",
-			children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
-		})
-	}), /* @__PURE__ */ jsx("button", {
-		"aria-label": "Close",
-		className: "flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-full border-none bg-black/5 p-0 text-inherit opacity-70 transition-opacity duration-150 hover:opacity-100",
-		onClick: onClose,
-		type: "button",
-		children: /* @__PURE__ */ jsx(XIcon, {})
-	})]
-});
+const DefaultHeader = ({ isNested, onBack, onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [isNested && /* @__PURE__ */ jsx("button", {
+	"aria-label": "Back",
+	className: "absolute left-2 top-2 z-20 flex min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-inherit opacity-50 transition-opacity duration-150 hover:opacity-100",
+	onClick: onBack,
+	type: "button",
+	children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+}), /* @__PURE__ */ jsx("button", {
+	"aria-label": "Close",
+	className: "absolute right-2 top-2 z-20 flex min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-inherit opacity-50 transition-opacity duration-150 hover:opacity-100",
+	onClick: onClose,
+	type: "button",
+	children: /* @__PURE__ */ jsx(XIcon, {})
+})] });
 //#endregion
 //#region src/SheetPanel/sheet-panel-content.tsx
-const PanelInnerContent = ({ isComposable, shouldRender, Content, data, renderHeader, headerProps, headerClassName }) => {
+const PanelInnerContent = ({ isComposable, shouldRender, Content, data, renderHeader, headerProps }) => {
 	if (isComposable) return shouldRender && Content !== void 0 ? /* @__PURE__ */ jsx(Content, { ...data }) : null;
 	const customHeader = renderHeader !== void 0 && renderHeader !== false ? renderHeader : void 0;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [customHeader === void 0 ? /* @__PURE__ */ jsx(DefaultHeader, {
-		...headerProps,
-		className: headerClassName
-	}) : customHeader(headerProps), shouldRender && Content !== void 0 && /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [customHeader === void 0 ? /* @__PURE__ */ jsx(DefaultHeader, { ...headerProps }) : customHeader(headerProps), shouldRender && Content !== void 0 && /* @__PURE__ */ jsx("div", {
 		className: "min-h-0 flex-1 overflow-y-auto overscroll-contain",
 		"data-stacksheet-no-drag": "",
 		children: /* @__PURE__ */ jsx(Content, { ...data })
@@ -955,9 +1039,9 @@ const ModalFocusTrap = ({ enabled, active, fallbackRef, children }) => {
 };
 //#endregion
 //#region src/SheetPanel/sheet-panel-handles.tsx
-const BottomHandle = ({ onDismiss }) => /* @__PURE__ */ jsx("button", {
+const BottomHandle = ({ onDismiss, position = "inside" }) => /* @__PURE__ */ jsx("button", {
 	"aria-label": "Dismiss",
-	className: "absolute inset-x-0 top-0 z-10 flex w-full cursor-grab touch-none items-center justify-center border-none bg-transparent pt-2.5 pb-2",
+	className: joinClassNames("absolute inset-x-0 z-10 flex w-full cursor-grab touch-none items-center justify-center border-none bg-transparent text-inherit", position === "outside" ? "bottom-full pt-1 pb-2" : "top-0 pt-2.5 pb-2"),
 	"data-stacksheet-handle": "",
 	onClick: onDismiss,
 	type: "button",
@@ -1036,7 +1120,10 @@ const getOptionalSideHandle = ({ isHovered, onDismiss, show, side }) => show ? /
 	onDismiss,
 	side
 }) : null;
-const getOptionalBottomHandle = (show, onDismiss) => show ? /* @__PURE__ */ jsx(BottomHandle, { onDismiss }) : null;
+const getOptionalBottomHandle = (show, onDismiss, position) => show ? /* @__PURE__ */ jsx(BottomHandle, {
+	onDismiss,
+	position
+}) : null;
 const completeOpeningAnimation = (hasEnteredRef, isTop, onOpenCompleteRef) => {
 	if (isTop && !hasEnteredRef.current) {
 		hasEnteredRef.current = true;
@@ -1118,7 +1205,7 @@ const useSheetPanelContext = ({ close, isNested, isTop, pop, side }, panelId) =>
 	};
 };
 const useSheetPanelModel = (props) => {
-	const { item, index, depth, isTop, isNested, side, config, classNames, pop, close, snapHeights, activeSnapIndex, layout, renderHeader, slideFrom, slideTarget, spring, stackSpring } = props;
+	const { item, index, depth, isTop, isNested, side, config, classNames, pop, close, snapHeights, keyboardInset, activeSnapIndex, layout, renderHeader, slideFrom, slideTarget, spring, stackSpring } = props;
 	const panelRef = useRef(null);
 	const [isHovered, setIsHovered] = useState(false);
 	const measuredHeight = usePanelHeight(panelRef, snapHeights.length > 0);
@@ -1132,7 +1219,8 @@ const useSheetPanelModel = (props) => {
 	const isComposable = resolvePanelLayout(layout, renderHeader) === "composable";
 	const hasPanelClass = classNames.panel !== "";
 	const dragOffset = getDragTransform(side, dragState.offset);
-	const panelStyle = buildPanelStyle(panelStyles, isTop, hasPanelClass, dragState.isDragging);
+	const activeKeyboardInset = isTop && side === "bottom" ? keyboardInset : 0;
+	const panelStyle = buildPanelStyle(panelStyles, isTop, hasPanelClass, dragState.isDragging, activeKeyboardInset, snapHeights.length === 0);
 	const headerProps = getHeaderProps({
 		close,
 		isNested,
@@ -1155,7 +1243,7 @@ const useSheetPanelModel = (props) => {
 	const animateTarget = buildAnimateTarget(slideTarget, getStackOffset(side, transform.offset), dragOffset, transform, animatedRadius, transition, snapYOffset, isTop);
 	const initialRadius = getInitialRadius(side);
 	const showSideHandle = isTop && side !== "bottom";
-	const showBottomHandle = isTop && side === "bottom";
+	const showBottomHandle = isTop && side === "bottom" && !isComposable;
 	const dismiss = isNested ? pop : close;
 	const sideHandle = getOptionalSideHandle({
 		isHovered,
@@ -1166,7 +1254,8 @@ const useSheetPanelModel = (props) => {
 	return {
 		animateTarget,
 		ariaProps,
-		bottomHandle: getOptionalBottomHandle(showBottomHandle, dismiss),
+		bottomHandle: getOptionalBottomHandle(showBottomHandle, dismiss, config.handle),
+		bottomHandleOutside: showBottomHandle && config.handle === "outside",
 		handleAnimationComplete,
 		headerProps,
 		hoverProps: getPanelHoverProps(showSideHandle, setIsHovered),
@@ -1182,7 +1271,7 @@ const useSheetPanelModel = (props) => {
 };
 const SheetPanel = (props) => {
 	const { item, isTop, config, classNames, Content, shouldRender, renderHeader, prefersReducedMotion } = props;
-	const { animateTarget, ariaProps, bottomHandle, handleAnimationComplete, headerProps, hoverProps, inactivePanelProps, initialRadius, isComposable, panelContext, panelRef, panelStyle, resolvedSlideFrom, sideHandle } = useSheetPanelModel(props);
+	const { animateTarget, ariaProps, bottomHandle, bottomHandleOutside, handleAnimationComplete, headerProps, hoverProps, inactivePanelProps, initialRadius, isComposable, panelContext, panelRef, panelStyle, resolvedSlideFrom, sideHandle } = useSheetPanelModel(props);
 	const panelContent = /* @__PURE__ */ jsxs(m.div, {
 		animate: animateTarget,
 		className: classNames.panel || void 0,
@@ -1210,18 +1299,21 @@ const SheetPanel = (props) => {
 		...hoverProps,
 		...inactivePanelProps,
 		...ariaProps,
-		children: [sideHandle, /* @__PURE__ */ jsxs("div", {
-			className: "relative flex min-h-0 flex-1 flex-col overflow-hidden rounded-[inherit]",
-			children: [bottomHandle, /* @__PURE__ */ jsx(PanelInnerContent, {
-				Content,
-				data: item.data,
-				headerClassName: classNames.header || void 0,
-				headerProps,
-				isComposable,
-				renderHeader,
-				shouldRender
-			})]
-		})]
+		children: [
+			sideHandle,
+			bottomHandleOutside ? bottomHandle : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative flex min-h-0 flex-1 flex-col overflow-hidden rounded-[inherit]",
+				children: [bottomHandleOutside ? null : bottomHandle, /* @__PURE__ */ jsx(PanelInnerContent, {
+					Content,
+					data: item.data,
+					headerProps,
+					isComposable,
+					renderHeader,
+					shouldRender
+				})]
+			})
+		]
 	}, item.id);
 	return /* @__PURE__ */ jsx(SheetPanelContext.Provider, {
 		value: panelContext,
@@ -1308,6 +1400,13 @@ const useSnapState = (config, isOpen, side, stack) => {
 		snapHeights
 	};
 };
+const usePanelKeyboardInset = (config, isOpen, side) => {
+	const panelWrapperRef = useRef(null);
+	return {
+		keyboardInset: useKeyboardInset(isOpen && side === "bottom" && config.repositionInputs, panelWrapperRef),
+		panelWrapperRef
+	};
+};
 const useCloseControls = (rawClose, rawPop) => {
 	const closeReasonRef = useRef("programmatic");
 	const closeWith = (reason) => {
@@ -1422,6 +1521,7 @@ const SheetRenderer = ({ store, config, sheets, componentMap, classNames: classN
 	const classNames = resolveClassNames(classNamesProp);
 	const { activeSnapIndex, handleSnap, snapHeights } = useSnapState(config, isOpen, side, stack);
 	const { close, closeReasonRef, closeWith, pop, popWith } = useCloseControls(rawClose, rawPop);
+	const { panelWrapperRef, keyboardInset } = usePanelKeyboardInset(config, isOpen, side);
 	useBodyScale(config, isOpen, prefersReducedMotion);
 	useFocusRestore(isOpen);
 	useDismissalEffects({
@@ -1467,6 +1567,7 @@ const SheetRenderer = ({ store, config, sheets, componentMap, classNames: classN
 		}), /* @__PURE__ */ jsx(RemoveScroll, {
 			enabled: shouldLockScroll,
 			forwardProps: true,
+			ref: panelWrapperRef,
 			children: /* @__PURE__ */ jsx("div", {
 				className: "pointer-events-none fixed inset-0 overflow-hidden",
 				style: { zIndex: config.zIndex + 1 },
@@ -1488,6 +1589,7 @@ const SheetRenderer = ({ store, config, sheets, componentMap, classNames: classN
 							isNested,
 							isTop,
 							item,
+							keyboardInset,
 							layout,
 							onSnap: handleSnap,
 							pop,
@@ -1918,7 +2020,7 @@ const SheetClose = ({ asChild, className, style, children }) => {
 	const isAsChild = asChild === true;
 	return /* @__PURE__ */ jsx(isAsChild ? Slot : "button", {
 		"aria-label": children === void 0 || children === null ? "Close" : void 0,
-		className: joinClassNames(isAsChild ? void 0 : "flex min-h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-inherit opacity-60 transition-opacity duration-150 hover:opacity-100", className),
+		className: joinClassNames(isAsChild ? void 0 : "absolute right-2 top-2 z-20 flex min-h-11 min-w-11 cursor-pointer items-center justify-center rounded-md border-none bg-transparent p-0 text-inherit opacity-50 transition-opacity duration-150 hover:opacity-100", className),
 		onClick: close,
 		style,
 		type: isAsChild ? void 0 : "button",
@@ -1950,7 +2052,8 @@ const SheetFooter = ({ asChild, className, style, children }) => {
 //#endregion
 //#region src/SheetParts/sheet-handle.tsx
 const SheetHandle = ({ asChild, className, style, children }) => {
-	const { close, back, isNested } = useSheetPanel();
+	const { close, back, isNested, side } = useSheetPanel();
+	if (side !== "bottom") return null;
 	const dismiss = isNested ? back : close;
 	const isAsChild = asChild === true;
 	return /* @__PURE__ */ jsx(isAsChild ? Slot : "button", {
@@ -1971,7 +2074,7 @@ const SheetHandle = ({ asChild, className, style, children }) => {
 const SheetHeader = ({ asChild, className, style, children }) => {
 	const isAsChild = asChild === true;
 	return /* @__PURE__ */ jsx(isAsChild ? Slot : "header", {
-		className: joinClassNames(isAsChild ? "shrink-0" : "flex h-14 shrink-0 items-center justify-between border-b px-6", className),
+		className: joinClassNames(isAsChild ? "shrink-0" : "flex shrink-0 items-center justify-between gap-3", className),
 		style,
 		children
 	});