@manhphi1309/dialog 0.2.0 → 0.3.1

package/README.md

@@ -178,6 +178,29 @@ All props are forwarded to the underlying component unchanged. `showCloseButton`
 
 > **Note:** `ResponsiveDialogContent` does **not** forward `showCloseButton` to `DrawerContent` (the Drawer handles close via the handle bar and swipe gesture). The prop is only meaningful on desktop.
 
+### Drawer Snap Points (Mobile Only)
+
+Because `ResponsiveDialog` forwards properties directly to the underlying Vaul `<Drawer>` on mobile devices, you can pass drawer-specific props like `snapPoints` directly to the `<ResponsiveDialog>` root component. The desktop `<Dialog>` will safely ignore them.
+
+```tsx
+// Using React state to properly control the active snap point
+const [snap, setSnap] = React.useState<number | string | null>("500px")
+
+<ResponsiveDialog
+  snapPoints={["300px", "500px", 1]}
+  activeSnapPoint={snap}
+  setActiveSnapPoint={setSnap}
+  fadeFromIndex={1}
+>
+  ...
+</ResponsiveDialog>
+```
+
+> [!WARNING]
+> **Important Vaul Requirements:**
+> 1. **Strict Types:** If you provide `snapPoints`, you are strictly required by Vaul to provide `fadeFromIndex` as a number.
+> 2. **Controlled State:** If you hardcode `activeSnapPoint` as a string/number prop *without* passing a state setter to `setActiveSnapPoint`, the Drawer will glitch and snap back down when the user tries to drag it, because React will force it back to the hardcoded prop value on the next render. Always use a state hook (like `useState`) for the active point.
+
 ---
 
 ## Usage

package/dist/index.cjs

@@ -1,6 +1,28 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
 //#endregion
-require("react");
+let react = require("react");
+react = __toESM(react);
 let lucide_react = require("lucide-react");
 let radix_ui = require("radix-ui");
 let _manhphi1309_button = require("@manhphi1309/button");
@@ -231,6 +253,7 @@ function DialogDescription({ className, ...props }) {
 }
 //#endregion
 //#region src/responsive-dialog.tsx
+const ResponsiveDialogContext = react.createContext({ snap: true });
 /**
 * Adaptive root component that switches between `Dialog` and `Drawer`
 * depending on screen width:
@@ -241,6 +264,11 @@ function DialogDescription({ className, ...props }) {
 * `defaultOpen`, `onOpenChange`, and `modal` all behave identically to
 * the standard `Dialog` root.
 *
+* **Drawer-Specific Props (Mobile Only)**
+* You can pass Vaul-specific props like `snapPoints`. They are cleanly ignored on desktop.
+* - **IMPORTANT:** If you provide `snapPoints`, you must also provide `fadeFromIndex` as a strict number.
+* - **IMPORTANT:** If you pass `activeSnapPoint`, you must also pass `setActiveSnapPoint` and manage it via state (e.g. `useState`). Do not hardcode `activeSnapPoint` without a setter, otherwise the Drawer will glitch and aggressively snap back when dragged.
+*
 * @example
 * <ResponsiveDialog>
 *   <ResponsiveDialogTrigger asChild>
@@ -253,14 +281,45 @@ function DialogDescription({ className, ...props }) {
 *   </ResponsiveDialogContent>
 * </ResponsiveDialog>
 */
-function ResponsiveDialog({ children, ...props }) {
-	if ((0, _manhphi1309_hooks.useIsMobile)()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_drawer.Drawer, {
-		...props,
-		children
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
-		...props,
-		children
+function ResponsiveDialog({ children, snapPoints, activeSnapPoint, setActiveSnapPoint, fadeFromIndex, shouldScaleBackground, dismissible, snap = true, ...props }) {
+	const isMobile = (0, _manhphi1309_hooks.useIsMobile)();
+	const [internalOpen, setInternalOpen] = react.useState(props.defaultOpen ?? false);
+	const isControlled = props.open !== void 0;
+	const open = isControlled ? props.open : internalOpen;
+	const { onOpenChange } = props;
+	const handleOpenChange = react.useCallback((newOpen) => {
+		if (!isControlled) setInternalOpen(newOpen);
+		onOpenChange?.(newOpen);
+	}, [isControlled, onOpenChange]);
+	const defaultSnapPoints = react.useMemo(() => [.5, 1], []);
+	if (isMobile) {
+		const drawerProps = {
+			...props,
+			open,
+			onOpenChange: handleOpenChange,
+			snapPoints: snap ? snapPoints ?? defaultSnapPoints : snapPoints,
+			activeSnapPoint,
+			setActiveSnapPoint,
+			fadeFromIndex: snap ? fadeFromIndex ?? 0 : fadeFromIndex,
+			shouldScaleBackground,
+			dismissible
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsiveDialogContext.Provider, {
+			value: { snap },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_drawer.Drawer, {
+				...drawerProps,
+				children
+			})
+		});
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsiveDialogContext.Provider, {
+		value: { snap },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Dialog, {
+			...props,
+			open,
+			onOpenChange: handleOpenChange,
+			children
+		})
 	});
 }
 /**
@@ -329,8 +388,11 @@ function ResponsiveDialogClose({ children, ...props }) {
 * </ResponsiveDialogContent>
 */
 function ResponsiveDialogContent({ className, children, showCloseButton = true, ...props }) {
-	if ((0, _manhphi1309_hooks.useIsMobile)()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_drawer.DrawerContent, {
-		className,
+	const isMobile = (0, _manhphi1309_hooks.useIsMobile)();
+	const { snap } = react.useContext(ResponsiveDialogContext);
+	if (isMobile) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_drawer.DrawerContent, {
+		className: (0, _manhphi1309_utils.cn)(snap && "h-[96dvh] !max-h-[96dvh]", className),
+		...props,
 		children
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogContent, {
@@ -350,14 +412,18 @@ function ResponsiveDialogContent({ className, children, showCloseButton = true,
 * Typically contains `ResponsiveDialogTitle` and optionally
 * `ResponsiveDialogDescription`.
 */
-function ResponsiveDialogHeader({ className, ...props }) {
+function ResponsiveDialogHeader({ className, leftNode, rightNode, children, ...props }) {
 	if ((0, _manhphi1309_hooks.useIsMobile)()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_drawer.DrawerHeader, {
+		leftNode,
+		rightNode,
 		className,
-		...props
+		...props,
+		children
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogHeader, {
 		className,
-		...props
+		...props,
+		children
 	});
 }
 /**

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Dialog as Dialog$1 } from "radix-ui";
+import { Drawer } from "@manhphi1309/drawer";
 
 //#region src/dialog.d.ts
 /**
@@ -191,6 +192,11 @@ declare function DialogDescription({
  * `defaultOpen`, `onOpenChange`, and `modal` all behave identically to
  * the standard `Dialog` root.
  *
+ * **Drawer-Specific Props (Mobile Only)**
+ * You can pass Vaul-specific props like `snapPoints`. They are cleanly ignored on desktop.
+ * - **IMPORTANT:** If you provide `snapPoints`, you must also provide `fadeFromIndex` as a strict number.
+ * - **IMPORTANT:** If you pass `activeSnapPoint`, you must also pass `setActiveSnapPoint` and manage it via state (e.g. `useState`). Do not hardcode `activeSnapPoint` without a setter, otherwise the Drawer will glitch and aggressively snap back when dragged.
+ *
  * @example
  * <ResponsiveDialog>
  *   <ResponsiveDialogTrigger asChild>
@@ -205,8 +211,17 @@ declare function DialogDescription({
  */
 declare function ResponsiveDialog({
   children,
+  snapPoints,
+  activeSnapPoint,
+  setActiveSnapPoint,
+  fadeFromIndex,
+  shouldScaleBackground,
+  dismissible,
+  snap,
   ...props
-}: React.ComponentProps<typeof Dialog$1.Root>): React.JSX.Element;
+}: React.ComponentProps<typeof Dialog$1.Root> & Partial<React.ComponentProps<typeof Drawer>> & {
+  snap?: boolean;
+}): React.JSX.Element;
 /**
  * The element that opens the responsive dialog/drawer when activated.
  *
@@ -280,8 +295,14 @@ declare function ResponsiveDialogContent({
  */
 declare function ResponsiveDialogHeader({
   className,
+  leftNode,
+  rightNode,
+  children,
   ...props
-}: React.ComponentProps<"div">): React.JSX.Element;
+}: React.ComponentProps<"div"> & {
+  leftNode?: React.ReactNode;
+  rightNode?: React.ReactNode;
+}): React.JSX.Element;
 /**
  * Layout wrapper for the **bottom action area** of the responsive
  * dialog/drawer.

package/dist/index.d.mts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Dialog as Dialog$1 } from "radix-ui";
+import { Drawer } from "@manhphi1309/drawer";
 
 //#region src/dialog.d.ts
 /**
@@ -191,6 +192,11 @@ declare function DialogDescription({
  * `defaultOpen`, `onOpenChange`, and `modal` all behave identically to
  * the standard `Dialog` root.
  *
+ * **Drawer-Specific Props (Mobile Only)**
+ * You can pass Vaul-specific props like `snapPoints`. They are cleanly ignored on desktop.
+ * - **IMPORTANT:** If you provide `snapPoints`, you must also provide `fadeFromIndex` as a strict number.
+ * - **IMPORTANT:** If you pass `activeSnapPoint`, you must also pass `setActiveSnapPoint` and manage it via state (e.g. `useState`). Do not hardcode `activeSnapPoint` without a setter, otherwise the Drawer will glitch and aggressively snap back when dragged.
+ *
  * @example
  * <ResponsiveDialog>
  *   <ResponsiveDialogTrigger asChild>
@@ -205,8 +211,17 @@ declare function DialogDescription({
  */
 declare function ResponsiveDialog({
   children,
+  snapPoints,
+  activeSnapPoint,
+  setActiveSnapPoint,
+  fadeFromIndex,
+  shouldScaleBackground,
+  dismissible,
+  snap,
   ...props
-}: React.ComponentProps<typeof Dialog$1.Root>): React.JSX.Element;
+}: React.ComponentProps<typeof Dialog$1.Root> & Partial<React.ComponentProps<typeof Drawer>> & {
+  snap?: boolean;
+}): React.JSX.Element;
 /**
  * The element that opens the responsive dialog/drawer when activated.
  *
@@ -280,8 +295,14 @@ declare function ResponsiveDialogContent({
  */
 declare function ResponsiveDialogHeader({
   className,
+  leftNode,
+  rightNode,
+  children,
   ...props
-}: React.ComponentProps<"div">): React.JSX.Element;
+}: React.ComponentProps<"div"> & {
+  leftNode?: React.ReactNode;
+  rightNode?: React.ReactNode;
+}): React.JSX.Element;
 /**
  * Layout wrapper for the **bottom action area** of the responsive
  * dialog/drawer.

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import "react";
+import * as React from "react";
 import { XIcon } from "lucide-react";
 import { Dialog as Dialog$1 } from "radix-ui";
 import { Button } from "@manhphi1309/button";
@@ -229,6 +229,7 @@ function DialogDescription({ className, ...props }) {
 }
 //#endregion
 //#region src/responsive-dialog.tsx
+const ResponsiveDialogContext = React.createContext({ snap: true });
 /**
 * Adaptive root component that switches between `Dialog` and `Drawer`
 * depending on screen width:
@@ -239,6 +240,11 @@ function DialogDescription({ className, ...props }) {
 * `defaultOpen`, `onOpenChange`, and `modal` all behave identically to
 * the standard `Dialog` root.
 *
+* **Drawer-Specific Props (Mobile Only)**
+* You can pass Vaul-specific props like `snapPoints`. They are cleanly ignored on desktop.
+* - **IMPORTANT:** If you provide `snapPoints`, you must also provide `fadeFromIndex` as a strict number.
+* - **IMPORTANT:** If you pass `activeSnapPoint`, you must also pass `setActiveSnapPoint` and manage it via state (e.g. `useState`). Do not hardcode `activeSnapPoint` without a setter, otherwise the Drawer will glitch and aggressively snap back when dragged.
+*
 * @example
 * <ResponsiveDialog>
 *   <ResponsiveDialogTrigger asChild>
@@ -251,14 +257,45 @@ function DialogDescription({ className, ...props }) {
 *   </ResponsiveDialogContent>
 * </ResponsiveDialog>
 */
-function ResponsiveDialog({ children, ...props }) {
-	if (useIsMobile()) return /* @__PURE__ */ jsx(Drawer, {
-		...props,
-		children
-	});
-	return /* @__PURE__ */ jsx(Dialog, {
-		...props,
-		children
+function ResponsiveDialog({ children, snapPoints, activeSnapPoint, setActiveSnapPoint, fadeFromIndex, shouldScaleBackground, dismissible, snap = true, ...props }) {
+	const isMobile = useIsMobile();
+	const [internalOpen, setInternalOpen] = React.useState(props.defaultOpen ?? false);
+	const isControlled = props.open !== void 0;
+	const open = isControlled ? props.open : internalOpen;
+	const { onOpenChange } = props;
+	const handleOpenChange = React.useCallback((newOpen) => {
+		if (!isControlled) setInternalOpen(newOpen);
+		onOpenChange?.(newOpen);
+	}, [isControlled, onOpenChange]);
+	const defaultSnapPoints = React.useMemo(() => [.5, 1], []);
+	if (isMobile) {
+		const drawerProps = {
+			...props,
+			open,
+			onOpenChange: handleOpenChange,
+			snapPoints: snap ? snapPoints ?? defaultSnapPoints : snapPoints,
+			activeSnapPoint,
+			setActiveSnapPoint,
+			fadeFromIndex: snap ? fadeFromIndex ?? 0 : fadeFromIndex,
+			shouldScaleBackground,
+			dismissible
+		};
+		return /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, {
+			value: { snap },
+			children: /* @__PURE__ */ jsx(Drawer, {
+				...drawerProps,
+				children
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, {
+		value: { snap },
+		children: /* @__PURE__ */ jsx(Dialog, {
+			...props,
+			open,
+			onOpenChange: handleOpenChange,
+			children
+		})
 	});
 }
 /**
@@ -327,8 +364,11 @@ function ResponsiveDialogClose({ children, ...props }) {
 * </ResponsiveDialogContent>
 */
 function ResponsiveDialogContent({ className, children, showCloseButton = true, ...props }) {
-	if (useIsMobile()) return /* @__PURE__ */ jsx(DrawerContent, {
-		className,
+	const isMobile = useIsMobile();
+	const { snap } = React.useContext(ResponsiveDialogContext);
+	if (isMobile) return /* @__PURE__ */ jsx(DrawerContent, {
+		className: cn(snap && "h-[96dvh] !max-h-[96dvh]", className),
+		...props,
 		children
 	});
 	return /* @__PURE__ */ jsx(DialogContent, {
@@ -348,14 +388,18 @@ function ResponsiveDialogContent({ className, children, showCloseButton = true,
 * Typically contains `ResponsiveDialogTitle` and optionally
 * `ResponsiveDialogDescription`.
 */
-function ResponsiveDialogHeader({ className, ...props }) {
+function ResponsiveDialogHeader({ className, leftNode, rightNode, children, ...props }) {
 	if (useIsMobile()) return /* @__PURE__ */ jsx(DrawerHeader, {
+		leftNode,
+		rightNode,
 		className,
-		...props
+		...props,
+		children
 	});
 	return /* @__PURE__ */ jsx(DialogHeader, {
 		className,
-		...props
+		...props,
+		children
 	});
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manhphi1309/dialog",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "sideEffects": false,
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",