@manhphi1309/dialog 0.1.2 → 0.3.0

package/dist/index.cjs

@@ -1,35 +1,124 @@
-"use client";
 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
+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");
 let _manhphi1309_utils = require("@manhphi1309/utils");
 let react_jsx_runtime = require("react/jsx-runtime");
-//#region index.tsx
+let _manhphi1309_drawer = require("@manhphi1309/drawer");
+let _manhphi1309_hooks = require("@manhphi1309/hooks");
+//#region src/dialog.tsx
+/**
+* Root dialog component. Controls open/close state and provides context
+* to all child primitives via Radix `Dialog.Root`.
+*
+* Can be used as **uncontrolled** (via `defaultOpen`) or **controlled**
+* (via `open` + `onOpenChange`).
+*
+* @example
+* // Uncontrolled
+* <Dialog>
+*   <DialogTrigger>Open</DialogTrigger>
+*   <DialogContent>...</DialogContent>
+* </Dialog>
+*
+* @example
+* // Controlled
+* const [open, setOpen] = useState(false)
+* <Dialog open={open} onOpenChange={setOpen}>
+*   <DialogContent>...</DialogContent>
+* </Dialog>
+*/
 function Dialog({ ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Root, {
 		"data-slot": "dialog",
 		...props
 	});
 }
+/**
+* The element that opens the dialog when activated (clicked / keyboard).
+* Thin wrapper around Radix `Dialog.Trigger`.
+*
+* Use `asChild` to compose with your own element instead of the default button.
+*
+* @example
+* <DialogTrigger asChild>
+*   <Button variant="outline">Open</Button>
+* </DialogTrigger>
+*/
 function DialogTrigger({ ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Trigger, {
 		"data-slot": "dialog-trigger",
 		...props
 	});
 }
+/**
+* Renders its children into a **portal** appended to `document.body`,
+* outside the current DOM tree. This ensures the dialog always appears
+* above other content and is never clipped by parent `overflow` or `z-index`.
+*
+* You rarely need to use this directly — `DialogContent` already wraps its
+* output in a portal automatically.
+*/
 function DialogPortal({ ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Portal, {
 		"data-slot": "dialog-portal",
 		...props
 	});
 }
+/**
+* A primitive close trigger. Closes the dialog when activated.
+* Use `asChild` to compose with a custom element.
+*
+* Prefer the built-in `showCloseButton` prop on `DialogContent` or
+* `DialogFooter` for standard close affordances. Use this component
+* when you need a completely custom close action inside the dialog body.
+*
+* @example
+* <DialogClose asChild>
+*   <Button variant="ghost">Cancel</Button>
+* </DialogClose>
+*/
 function DialogClose({ ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Close, {
 		"data-slot": "dialog-close",
 		...props
 	});
 }
+/**
+* The semi-transparent **backdrop** rendered behind the dialog panel.
+* Covers the full viewport (`fixed inset-0`) with a slight blur and dark tint.
+*
+* Animates:
+* - **Open** → `fade-in-0`
+* - **Close** → `fade-out-0`
+*
+* You rarely need to use this directly — `DialogContent` renders it
+* automatically via `DialogPortal`.
+*/
 function DialogOverlay({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Overlay, {
 		"data-slot": "dialog-overlay",
@@ -37,6 +126,29 @@ function DialogOverlay({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The **visible panel** of the dialog. Rendered centred on screen via
+* `position: fixed; top: 50%; left: 50%; translate(-50%, -50%)`.
+* Automatically wraps itself in `DialogPortal` and renders `DialogOverlay`
+* behind it.
+*
+* By default a ghost ✕ button is positioned in the top-right corner.
+* Pass `showCloseButton={false}` to remove it when you want to control
+* close behaviour exclusively from the footer.
+*
+* Animates:
+* - **Open** → `fade-in-0 + zoom-in-95`
+* - **Close** → `fade-out-0 + zoom-out-95`
+*
+* @param showCloseButton - Whether to render the ✕ ghost button in the
+*   top-right corner. Defaults to `true`.
+*
+* @example
+* <DialogContent showCloseButton={false}>
+*   <DialogHeader>...</DialogHeader>
+*   <DialogFooter showCloseButton>...</DialogFooter>
+* </DialogContent>
+*/
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DialogPortal, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogOverlay, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(radix_ui.Dialog.Content, {
 		"data-slot": "dialog-content",
@@ -58,6 +170,17 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 		})]
 	})] });
 }
+/**
+* Layout wrapper for the **top section** of a dialog.
+* Stacks children vertically with `gap-2`. Typically contains
+* `DialogTitle` and optionally `DialogDescription`.
+*
+* @example
+* <DialogHeader>
+*   <DialogTitle>Confirm deletion</DialogTitle>
+*   <DialogDescription>This action is irreversible.</DialogDescription>
+* </DialogHeader>
+*/
 function DialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "dialog-header",
@@ -65,6 +188,20 @@ function DialogHeader({ className, ...props }) {
 		...props
 	});
 }
+/**
+* Layout wrapper for the **bottom action area** of a dialog.
+* Bleeds to the content panel edges (`-mx-4 -mb-4`), adds a top border
+* and a subtle muted background tint. Actions stack vertically on mobile
+* and align to the right on `sm+` screens.
+*
+* @param showCloseButton - When `true`, appends an outline `Close` button
+*   wired to `DialogClose` after any provided `children`. Defaults to `false`.
+*
+* @example
+* <DialogFooter showCloseButton>
+*   <Button type="submit">Save</Button>
+* </DialogFooter>
+*/
 function DialogFooter({ className, showCloseButton = false, children, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-slot": "dialog-footer",
@@ -79,6 +216,16 @@ function DialogFooter({ className, showCloseButton = false, children, ...props }
 		})]
 	});
 }
+/**
+* The **accessible title** of the dialog. Rendered as a Radix `Dialog.Title`,
+* which is automatically linked to the dialog content via `aria-labelledby`.
+* Screen readers announce this text when the dialog opens.
+*
+* Styled with the heading font token at `text-base font-medium`.
+*
+* @remarks Required for accessibility. Every dialog should have a title,
+* even if visually hidden with `className="sr-only"`.
+*/
 function DialogTitle({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Title, {
 		"data-slot": "dialog-title",
@@ -86,6 +233,17 @@ function DialogTitle({ className, ...props }) {
 		...props
 	});
 }
+/**
+* The **accessible description** of the dialog. Rendered as a Radix
+* `Dialog.Description`, which is linked to the dialog content via
+* `aria-describedby`. Screen readers read this after the title.
+*
+* Styled as small muted text. Anchor tags (`<a>`) inside the description
+* are automatically underlined and change colour on hover.
+*
+* @remarks Optional but recommended. Omit only if the dialog content itself
+* is sufficiently self-descriptive.
+*/
 function DialogDescription({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Description, {
 		"data-slot": "dialog-description",
@@ -94,6 +252,257 @@ 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:
+* - **Desktop (≥ 768 px)** → renders `Dialog` (centred modal overlay)
+* - **Mobile (< 768 px)** → renders `Drawer` (bottom-sheet panel)
+*
+* All props are forwarded unchanged to the active primitive, so `open`,
+* `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>
+*     <Button>Open</Button>
+*   </ResponsiveDialogTrigger>
+*   <ResponsiveDialogContent>
+*     <ResponsiveDialogHeader>
+*       <ResponsiveDialogTitle>Title</ResponsiveDialogTitle>
+*     </ResponsiveDialogHeader>
+*   </ResponsiveDialogContent>
+* </ResponsiveDialog>
+*/
+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]);
+	if (isMobile) {
+		const drawerProps = {
+			...props,
+			open,
+			onOpenChange: handleOpenChange,
+			snapPoints: snap ? snapPoints ?? [.5, 1] : 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
+		})
+	});
+}
+/**
+* The element that opens the responsive dialog/drawer when activated.
+*
+* - **Desktop** → `DialogTrigger` (Radix `Dialog.Trigger`)
+* - **Mobile** → `DrawerTrigger` (Vaul `Drawer.Trigger`)
+*
+* Use `asChild` to render your own element as the trigger instead of
+* the default button wrapper.
+*
+* @example
+* <ResponsiveDialogTrigger asChild>
+*   <Button variant="outline">Open</Button>
+* </ResponsiveDialogTrigger>
+*/
+function ResponsiveDialogTrigger({ children, ...props }) {
+	if ((0, _manhphi1309_hooks.useIsMobile)()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_drawer.DrawerTrigger, {
+		...props,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogTrigger, {
+		...props,
+		children
+	});
+}
+/**
+* A close trigger that targets the correct primitive for the current
+* viewport:
+* - **Desktop** → `DialogClose` (Radix `Dialog.Close`)
+* - **Mobile** → `DrawerClose` (Vaul `Drawer.Close`)
+*
+* Use `asChild` to wrap a custom element.
+*
+* @example
+* <ResponsiveDialogClose asChild>
+*   <Button variant="ghost">Cancel</Button>
+* </ResponsiveDialogClose>
+*/
+function ResponsiveDialogClose({ children, ...props }) {
+	if ((0, _manhphi1309_hooks.useIsMobile)()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_drawer.DrawerClose, {
+		...props,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogClose, {
+		...props,
+		children
+	});
+}
+/**
+* The visible panel of the responsive dialog. Delegates to the
+* appropriate primitive:
+* - **Desktop** → `DialogContent` — centred modal with fade + zoom animations.
+*   The ✕ close button is shown by default (`showCloseButton={true}`).
+* - **Mobile** → `DrawerContent` — bottom-sheet panel with a drag handle.
+*   `showCloseButton` has **no effect** on mobile; the drawer is closed
+*   via swipe gesture or the drag handle.
+*
+* @param showCloseButton - Show/hide the ✕ button in the top-right corner
+*   on desktop. Has no effect on mobile. Defaults to `true`.
+*
+* @example
+* // Hide the ✕ button and force close via footer only (desktop)
+* <ResponsiveDialogContent showCloseButton={false}>
+*   ...
+* </ResponsiveDialogContent>
+*/
+function ResponsiveDialogContent({ className, children, showCloseButton = true, ...props }) {
+	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, {
+		className,
+		showCloseButton,
+		...props,
+		children
+	});
+}
+/**
+* Layout wrapper for the **top section** of the responsive dialog/drawer.
+*
+* - **Desktop** → `DialogHeader` — vertical stack with `gap-2`
+* - **Mobile** → `DrawerHeader` — vertically centred text for bottom/top
+*   drawers, left-aligned for side drawers
+*
+* Typically contains `ResponsiveDialogTitle` and optionally
+* `ResponsiveDialogDescription`.
+*/
+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,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogHeader, {
+		className,
+		...props,
+		children
+	});
+}
+/**
+* Layout wrapper for the **bottom action area** of the responsive
+* dialog/drawer.
+*
+* - **Desktop** → `DialogFooter` — bleeds to panel edges, top border,
+*   actions aligned right on `sm+`
+* - **Mobile** → `DrawerFooter` — `mt-auto` stacked column at the bottom
+*   of the drawer
+*
+* @param showCloseButton - When `true`, appends a close button after
+*   `children`. On **desktop** this is a `DialogClose`-wrapped outline
+*   button; on **mobile** this is a `DrawerClose`-wrapped outline button.
+*   Defaults to `false`.
+*
+* @example
+* <ResponsiveDialogFooter showCloseButton>
+*   <Button type="submit">Save</Button>
+* </ResponsiveDialogFooter>
+*/
+function ResponsiveDialogFooter({ className, children, showCloseButton = false, ...props }) {
+	if ((0, _manhphi1309_hooks.useIsMobile)()) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_manhphi1309_drawer.DrawerFooter, {
+		className,
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_drawer.DrawerClose, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_button.Button, {
+				variant: "outline",
+				children: "Close"
+			})
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogFooter, {
+		className,
+		showCloseButton,
+		...props,
+		children
+	});
+}
+/**
+* The **accessible title** of the responsive dialog/drawer.
+*
+* - **Desktop** → `DialogTitle` (linked via `aria-labelledby`)
+* - **Mobile** → `DrawerTitle` (linked via `aria-labelledby`)
+*
+* Screen readers announce this text when the panel opens.
+*
+* @remarks Required for accessibility on both desktop and mobile.
+*/
+function ResponsiveDialogTitle({ className, ...props }) {
+	if ((0, _manhphi1309_hooks.useIsMobile)()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_drawer.DrawerTitle, {
+		className,
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogTitle, {
+		className,
+		...props
+	});
+}
+/**
+* The **accessible description** of the responsive dialog/drawer.
+*
+* - **Desktop** → `DialogDescription` (linked via `aria-describedby`)
+* - **Mobile** → `DrawerDescription` (linked via `aria-describedby`)
+*
+* @remarks Optional but recommended. Provides supplementary context for
+* screen reader users after the title is announced.
+*/
+function ResponsiveDialogDescription({ className, ...props }) {
+	if ((0, _manhphi1309_hooks.useIsMobile)()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_drawer.DrawerDescription, {
+		className,
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogDescription, {
+		className,
+		...props
+	});
+}
+//#endregion
 exports.Dialog = Dialog;
 exports.DialogClose = DialogClose;
 exports.DialogContent = DialogContent;
@@ -104,3 +513,11 @@ exports.DialogOverlay = DialogOverlay;
 exports.DialogPortal = DialogPortal;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
+exports.ResponsiveDialog = ResponsiveDialog;
+exports.ResponsiveDialogClose = ResponsiveDialogClose;
+exports.ResponsiveDialogContent = ResponsiveDialogContent;
+exports.ResponsiveDialogDescription = ResponsiveDialogDescription;
+exports.ResponsiveDialogFooter = ResponsiveDialogFooter;
+exports.ResponsiveDialogHeader = ResponsiveDialogHeader;
+exports.ResponsiveDialogTitle = ResponsiveDialogTitle;
+exports.ResponsiveDialogTrigger = ResponsiveDialogTrigger;