@manhphi1309/dialog 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -1,35 +1,102 @@
-"use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#endregion
+require("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 +104,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",
@@ -48,7 +138,8 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_manhphi1309_button.Button, {
 				variant: "ghost",
 				className: "absolute top-2 right-2",
-				size: "icon-sm",
+				size: "sm",
+				icon: true,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "sr-only",
 					children: "Close"
@@ -57,6 +148,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",
@@ -64,6 +166,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",
@@ -78,6 +194,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",
@@ -85,6 +211,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",
@@ -93,6 +230,214 @@ function DialogDescription({ className, ...props }) {
 	});
 }
 //#endregion
+//#region src/responsive-dialog.tsx
+/**
+* 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.
+*
+* @example
+* <ResponsiveDialog>
+*   <ResponsiveDialogTrigger asChild>
+*     <Button>Open</Button>
+*   </ResponsiveDialogTrigger>
+*   <ResponsiveDialogContent>
+*     <ResponsiveDialogHeader>
+*       <ResponsiveDialogTitle>Title</ResponsiveDialogTitle>
+*     </ResponsiveDialogHeader>
+*   </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
+	});
+}
+/**
+* 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 }) {
+	if ((0, _manhphi1309_hooks.useIsMobile)()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_drawer.DrawerContent, {
+		className,
+		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, ...props }) {
+	if ((0, _manhphi1309_hooks.useIsMobile)()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_drawer.DrawerHeader, {
+		className,
+		...props
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogHeader, {
+		className,
+		...props
+	});
+}
+/**
+* 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;
@@ -103,3 +448,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;