@patternmode/stacksheet 1.4.0 → 2.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"sheet-panel-focus.d.ts","sourceRoot":"","sources":["../../src/SheetPanel/sheet-panel-focus.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAsClD,eAAO,MAAM,cAAc,GAAI,6CAK5B;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,QAAQ,EAAE,SAAS,CAAC;CACrB,KAAG,SA2BH,CAAC"}
+{"version":3,"file":"sheet-panel-focus.d.ts","sourceRoot":"","sources":["../../src/SheetPanel/sheet-panel-focus.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAkDlD,eAAO,MAAM,cAAc,GAAI,6CAK5B;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,QAAQ,EAAE,SAAS,CAAC;CACrB,KAAG,SA2BH,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"sheet-back.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-back.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,oBAAoB,CAAC;AAExE,eAAO,MAAM,SAAS,GAAI,0CAKvB,6BAA6B,uCAqB/B,CAAC"}
+{"version":3,"file":"sheet-back.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-back.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,oBAAoB,CAAC;AAExE,eAAO,MAAM,SAAS,GAAI,yCAKvB,6BAA6B,uCAsB/B,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"sheet-body.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-body.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,eAAO,MAAM,SAAS,GAAI,yCAAyC,cAAc,gCA2BhF,CAAC"}
+{"version":3,"file":"sheet-body.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-body.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AA2BzD,eAAO,MAAM,SAAS,GAAI,wCAAwC,cAAc,gCAyB/E,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"sheet-close.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-close.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,oBAAoB,CAAC;AAExE,eAAO,MAAM,UAAU,GAAI,0CAKxB,6BAA6B,gCAkB/B,CAAC"}
+{"version":3,"file":"sheet-close.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-close.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,oBAAoB,CAAC;AAExE,eAAO,MAAM,UAAU,GAAI,yCAKxB,6BAA6B,gCAmB/B,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"sheet-description.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-description.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,eAAO,MAAM,gBAAgB,GAAI,yCAAyC,cAAc,gCAUvF,CAAC"}
+{"version":3,"file":"sheet-description.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-description.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,eAAO,MAAM,gBAAgB,GAAI,wCAAwC,cAAc,gCAUtF,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"sheet-footer.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-footer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,eAAO,MAAM,WAAW,GAAI,yCAAyC,cAAc,gCASlF,CAAC"}
+{"version":3,"file":"sheet-footer.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-footer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,eAAO,MAAM,WAAW,GAAI,wCAAwC,cAAc,gCASjF,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 | null;
+export declare const SheetHandle: ({ render, 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,uCA0B/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,yCAKzB,6BAA6B,uCA6B/B,CAAC"}

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

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

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,gCAWlF,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,wCAAwC,cAAc,gCAWjF,CAAC"}

package/dist/SheetParts/sheet-part-element.d.ts

@@ -0,0 +1,13 @@
+import type { JSX } from "react";
+import type { RenderProp } from "../render";
+/**
+ * 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.
+ */
+export declare const SheetPartElement: ({ defaultTagName, props, render, }: {
+    defaultTagName: keyof JSX.IntrinsicElements;
+    props: Record<string, unknown>;
+    render: RenderProp | undefined;
+}) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//# sourceMappingURL=sheet-part-element.d.ts.map

package/dist/SheetParts/sheet-part-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet-part-element.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-part-element.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,oCAI9B;IACD,cAAc,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,MAAM,EAAE,UAAU,GAAG,SAAS,CAAC;CAChC,+FAAiD,CAAC"}

package/dist/SheetParts/sheet-part-types.d.ts

@@ -1,12 +1,13 @@
 import type { CSSProperties, ReactNode } from "react";
+import type { RenderProp } from "../render";
 export interface SheetPartProps {
-    asChild?: boolean;
+    render?: RenderProp;
     children: ReactNode;
     className?: string;
     style?: CSSProperties;
 }
 export interface SheetOptionalContentPartProps {
-    asChild?: boolean;
+    render?: RenderProp;
     children?: ReactNode;
     className?: string;
     style?: CSSProperties;

package/dist/SheetParts/sheet-part-types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sheet-part-types.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-part-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,WAAW,6BAA6B;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,MAAM,cAAc,GAAG,6BAA6B,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC;AAC5C,MAAM,MAAM,eAAe,GAAG,6BAA6B,CAAC;AAC5D,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC;AACnD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC;AAC9C,MAAM,MAAM,gBAAgB,GAAG,6BAA6B,CAAC;AAC7D,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC"}
+{"version":3,"file":"sheet-part-types.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-part-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAE5C,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,WAAW,6BAA6B;IAC5C,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,MAAM,MAAM,cAAc,GAAG,6BAA6B,CAAC;AAC3D,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC;AAC5C,MAAM,MAAM,eAAe,GAAG,6BAA6B,CAAC;AAC5D,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC;AACnD,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC;AAC9C,MAAM,MAAM,gBAAgB,GAAG,6BAA6B,CAAC;AAC7D,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC"}

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

@@ -8,13 +8,13 @@
  * `aria-labelledby` and `aria-describedby` via matching IDs.
  */
 export declare const Sheet: {
-    readonly Back: ({ asChild, className, style, children, }: import("./sheet-part-types").SheetOptionalContentPartProps) => import("react").JSX.Element | null;
-    readonly Body: ({ asChild, className, style, children }: import("./sheet-part-types").SheetPartProps) => import("react").JSX.Element;
-    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 | 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;
+    readonly Back: ({ render, className, style, children, }: import("./sheet-part-types").SheetOptionalContentPartProps) => import("react").JSX.Element | null;
+    readonly Body: ({ render, className, style, children }: import("./sheet-part-types").SheetPartProps) => import("react").JSX.Element;
+    readonly Close: ({ render, className, style, children, }: import("./sheet-part-types").SheetOptionalContentPartProps) => import("react").JSX.Element;
+    readonly Description: ({ render, className, style, children }: import("./sheet-part-types").SheetPartProps) => import("react").JSX.Element;
+    readonly Footer: ({ render, className, style, children }: import("./sheet-part-types").SheetPartProps) => import("react").JSX.Element;
+    readonly Handle: ({ render, className, style, children, }: import("./sheet-part-types").SheetOptionalContentPartProps) => import("react").JSX.Element | null;
+    readonly Header: ({ render, className, style, children }: import("./sheet-part-types").SheetPartProps) => import("react").JSX.Element;
+    readonly Title: ({ render, className, style, children }: import("./sheet-part-types").SheetPartProps) => import("react").JSX.Element;
 };
 //# sourceMappingURL=sheet-parts.d.ts.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"sheet-title.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-title.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,eAAO,MAAM,UAAU,GAAI,yCAAyC,cAAc,gCAWjF,CAAC"}
+{"version":3,"file":"sheet-title.d.ts","sourceRoot":"","sources":["../../src/SheetParts/sheet-title.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,eAAO,MAAM,UAAU,GAAI,wCAAwC,cAAc,gCAgBhF,CAAC"}

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) => ({
@@ -997,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]",
@@ -1612,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 : {};
@@ -1933,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();
@@ -1976,120 +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 : "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",
-		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 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 shrink-0 items-center justify-between gap-3", 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