@patternmode/stacksheet 1.3.8 → 2.0.0

package/dist/index.mjs

@@ -1,5 +1,4 @@
 "use client";
-import { Portal } from "@radix-ui/react-portal";
 import { createContext, use, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { createStore, useStore } from "zustand";
 import { useShallow } from "zustand/react/shallow";
@@ -9,8 +8,10 @@ import { RemoveScroll } from "react-remove-scroll";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { FocusTrap } from "focus-trap-react";
 import { joinClassNames } from "@patternmode/system";
-import { Slot } from "@radix-ui/react-slot";
-import { Root, Scrollbar, Thumb, Viewport } from "@radix-ui/react-scroll-area";
+import { createPortal } from "react-dom";
+import "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ScrollArea } from "@base-ui/react/scroll-area";
 //#region src/springs.ts
 /** Strips the shared token's `type: "spring"` down to Stacksheet's numeric SpringConfig. */
 const toSpringConfig = (spring) => ({
@@ -56,10 +57,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 +172,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 +395,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 +432,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 +829,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 +911,7 @@ const getPanelStyles = (side, config, index) => {
 	const base = {
 		display: "flex",
 		flexDirection: "column",
+		outline: "none",
 		position: "fixed",
 		transformOrigin: getTransformOrigin(side),
 		willChange: "transform",
@@ -826,9 +920,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 +970,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 })
@@ -913,6 +998,10 @@ PanelInnerContent.displayName = "PanelInnerContent";
 //#endregion
 //#region src/SheetPanel/sheet-panel-focus.tsx
 const LAYERED_MODAL_SELECTORS = [
+	"[role=\"dialog\"][data-open]",
+	"[role=\"alertdialog\"][data-open]",
+	"[data-base-ui-focus-guard]",
+	"[data-slot=\"tag-selector-content\"]",
 	"[role=\"dialog\"][data-state=\"open\"]",
 	"[role=\"alertdialog\"][data-state=\"open\"]",
 	"[data-radix-popper-content-wrapper]",
@@ -955,9 +1044,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 +1125,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 +1210,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 +1224,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 +1248,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 +1259,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 +1276,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 +1304,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 +1405,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 +1526,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 +1572,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 +1594,7 @@ const SheetRenderer = ({ store, config, sheets, componentMap, classNames: classN
 							isNested,
 							isTop,
 							item,
+							keyboardInset,
 							layout,
 							onSnap: handleSnap,
 							pop,
@@ -1510,6 +1617,23 @@ const SheetRenderer = ({ store, config, sheets, componentMap, classNames: classN
 	});
 };
 //#endregion
+//#region src/sheet-portal.tsx
+/**
+* Minimal client-only portal into `document.body`. Replaces
+* `@radix-ui/react-portal` — Base UI ships no standalone portal primitive, and
+* the sheet renderer only ever runs on the client. Mounting is deferred to an
+* effect so server render and first client render agree (no hydration
+* mismatch).
+*/
+const SheetPortal = ({ children }) => {
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	if (!mounted || typeof document === "undefined") return null;
+	return createPortal(children, document.body);
+};
+//#endregion
 //#region src/Store/store-args.ts
 const isRecord = (value) => typeof value === "object" && value !== null;
 const toRecord = (value) => isRecord(value) ? value : {};
@@ -1831,18 +1955,15 @@ const createStacksheet = (config) => {
 	};
 	const StacksheetProvider = ({ sheets, children, classNames, layout, renderHeader }) => /* @__PURE__ */ jsxs(StoreContext.Provider, {
 		value: providerValue,
-		children: [children, /* @__PURE__ */ jsx(Portal, {
-			asChild: false,
-			children: /* @__PURE__ */ jsx(SheetRenderer, {
-				classNames,
-				componentMap,
-				config: resolved,
-				layout,
-				renderHeader,
-				sheets,
-				store
-			})
-		})]
+		children: [children, /* @__PURE__ */ jsx(SheetPortal, { children: /* @__PURE__ */ jsx(SheetRenderer, {
+			classNames,
+			componentMap,
+			config: resolved,
+			layout,
+			renderHeader,
+			sheets,
+			store
+		}) })]
 	});
 	const useSheet = () => {
 		const { store: s } = useStoreContext();
@@ -1874,119 +1995,163 @@ const createStacksheet = (config) => {
 	};
 };
 //#endregion
+//#region src/SheetParts/sheet-part-element.tsx
+/**
+* Renders a sheet part through `render` (or its default tag) via Base UI's
+* `useRender`. Centralising the hook here lets each part early-return before
+* constructing the element without tripping the Rules of Hooks.
+*/
+const SheetPartElement = ({ defaultTagName, props, render }) => useRender({
+	defaultTagName,
+	props,
+	render
+});
+//#endregion
 //#region src/SheetParts/sheet-back.tsx
-const SheetBack = ({ asChild, className, style, children }) => {
+const SheetBack = ({ render, className, style, children }) => {
 	const { back, isNested } = useSheetPanel();
 	if (!isNested) return null;
-	const isAsChild = asChild === true;
-	return /* @__PURE__ */ jsx(isAsChild ? Slot : "button", {
-		"aria-label": children === void 0 || children === null ? "Back" : 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),
-		onClick: back,
-		style,
-		type: isAsChild ? void 0 : "button",
-		children: children ?? /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+	return /* @__PURE__ */ jsx(SheetPartElement, {
+		defaultTagName: "button",
+		props: {
+			"aria-label": children === void 0 || children === null ? "Back" : void 0,
+			children: children ?? /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
+			className: joinClassNames(render ? 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),
+			onClick: back,
+			style,
+			type: render ? void 0 : "button"
+		},
+		render
 	});
 };
 //#endregion
 //#region src/SheetParts/sheet-body.tsx
-const SheetBody = ({ asChild, className, style, children }) => {
-	if (asChild === true) return /* @__PURE__ */ jsx(Slot, {
+const SheetBodyRendered = ({ render, className, style, children }) => useRender({
+	props: {
+		children,
 		className: joinClassNames("relative min-h-0 flex-1", className),
 		"data-stacksheet-no-drag": "",
+		style
+	},
+	render
+});
+const SheetBody = ({ render, className, style, children }) => {
+	if (render !== void 0) return /* @__PURE__ */ jsx(SheetBodyRendered, {
+		className,
+		render,
 		style,
 		children
 	});
-	return /* @__PURE__ */ jsxs(Root, {
+	return /* @__PURE__ */ jsxs(ScrollArea.Root, {
 		className: joinClassNames("relative flex min-h-0 flex-1 flex-col overflow-hidden", className),
 		"data-stacksheet-no-drag": "",
 		style,
-		children: [/* @__PURE__ */ jsx(Viewport, {
+		children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
 			className: "min-h-0 w-full flex-1 overscroll-contain",
 			children
-		}), /* @__PURE__ */ jsx(Scrollbar, {
-			className: "flex w-2 touch-none select-none p-0.5",
+		}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+			className: "flex w-2 touch-none select-none p-0.5 opacity-0 transition-opacity data-[hovering]:opacity-100 data-[scrolling]:opacity-100",
 			orientation: "vertical",
-			children: /* @__PURE__ */ jsx(Thumb, { className: "relative flex-1 rounded bg-current/15" })
+			children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "relative flex-1 rounded bg-current/15" })
 		})]
 	});
 };
 //#endregion
 //#region src/SheetParts/sheet-close.tsx
-const SheetClose = ({ asChild, className, style, children }) => {
+const SheetClose = ({ render, className, style, children }) => {
 	const { close } = useSheetPanel();
-	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),
-		onClick: close,
-		style,
-		type: isAsChild ? void 0 : "button",
-		children: children ?? /* @__PURE__ */ jsx(XIcon, {})
+	return /* @__PURE__ */ jsx(SheetPartElement, {
+		defaultTagName: "button",
+		props: {
+			"aria-label": children === void 0 || children === null ? "Close" : void 0,
+			children: children ?? /* @__PURE__ */ jsx(XIcon, {}),
+			className: joinClassNames(render ? 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: render ? void 0 : "button"
+		},
+		render
 	});
 };
 //#endregion
 //#region src/SheetParts/sheet-description.tsx
-const SheetDescription = ({ asChild, className, style, children }) => {
+const SheetDescription = ({ render, className, style, children }) => {
 	const { panelId, registerDescription } = useSheetPanel();
 	useEffect(() => registerDescription(), [registerDescription]);
-	return /* @__PURE__ */ jsx(asChild === true ? Slot : "p", {
-		className,
-		id: `${panelId}-desc`,
-		style,
-		children
+	return /* @__PURE__ */ jsx(SheetPartElement, {
+		defaultTagName: "p",
+		props: {
+			children,
+			className,
+			id: `${panelId}-desc`,
+			style
+		},
+		render
 	});
 };
 //#endregion
 //#region src/SheetParts/sheet-footer.tsx
-const SheetFooter = ({ asChild, className, style, children }) => {
-	const isAsChild = asChild === true;
-	return /* @__PURE__ */ jsx(isAsChild ? Slot : "footer", {
-		className: joinClassNames(isAsChild ? "shrink-0" : "flex shrink-0 items-center gap-2 border-t px-6 py-3", className),
-		style,
-		children
+const SheetFooter = ({ render, className, style, children }) => {
+	return /* @__PURE__ */ jsx(SheetPartElement, {
+		defaultTagName: "footer",
+		props: {
+			children,
+			className: joinClassNames(render ? "shrink-0" : "flex shrink-0 items-center gap-2 border-t px-6 py-3", className),
+			style
+		},
+		render
 	});
 };
 //#endregion
 //#region src/SheetParts/sheet-handle.tsx
-const SheetHandle = ({ asChild, className, style, children }) => {
-	const { close, back, isNested } = useSheetPanel();
+const SheetHandle = ({ render, className, style, children }) => {
+	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", {
-		"aria-label": "Dismiss",
-		className: joinClassNames(isAsChild ? void 0 : "flex shrink-0 cursor-grab touch-none items-center justify-center border-none bg-transparent pt-4 pb-1 text-inherit", className),
-		"data-stacksheet-handle": "",
-		onClick: dismiss,
-		style,
-		type: isAsChild ? void 0 : "button",
-		children: children ?? /* @__PURE__ */ jsx("div", {
-			"aria-hidden": "true",
-			className: "h-1 w-9 rounded-sm bg-current/25"
-		})
+	return /* @__PURE__ */ jsx(SheetPartElement, {
+		defaultTagName: "button",
+		props: {
+			"aria-label": "Dismiss",
+			children: children ?? /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "h-1 w-9 rounded-sm bg-current/25"
+			}),
+			className: joinClassNames(render ? void 0 : "flex shrink-0 cursor-grab touch-none items-center justify-center border-none bg-transparent pt-4 pb-1 text-inherit", className),
+			"data-stacksheet-handle": "",
+			onClick: dismiss,
+			style,
+			type: render ? void 0 : "button"
+		},
+		render
 	});
 };
 //#endregion
 //#region src/SheetParts/sheet-header.tsx
-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),
-		style,
-		children
+const SheetHeader = ({ render, className, style, children }) => {
+	return /* @__PURE__ */ jsx(SheetPartElement, {
+		defaultTagName: "header",
+		props: {
+			children,
+			className: joinClassNames(render ? "shrink-0" : "flex shrink-0 items-center justify-between gap-3", className),
+			style
+		},
+		render
 	});
 };
 //#endregion
 //#region src/SheetParts/sheet-title.tsx
-const SheetTitle = ({ asChild, className, style, children }) => {
+const SheetTitle = ({ render, className, style, children }) => {
 	const { panelId, registerTitle } = useSheetPanel();
 	useEffect(() => registerTitle(), [registerTitle]);
-	const isAsChild = asChild === true;
-	return /* @__PURE__ */ jsx(isAsChild ? Slot : "h2", {
-		className: joinClassNames(isAsChild ? void 0 : "font-semibold text-sm", className),
-		id: `${panelId}-title`,
-		style,
-		children
+	return /* @__PURE__ */ jsx(SheetPartElement, {
+		defaultTagName: "h2",
+		props: {
+			children,
+			className: joinClassNames(render ? void 0 : "font-semibold text-sm", className),
+			id: `${panelId}-title`,
+			style
+		},
+		render
 	});
 };
 //#endregion