@manhphi1309/dialog 0.1.1 → 0.2.0

package/dist/index.mjs

@@ -1,34 +1,100 @@
-"use client";
+import "react";
 import { XIcon } from "lucide-react";
 import { Dialog as Dialog$1 } from "radix-ui";
 import { Button } from "@manhphi1309/button";
 import { cn } from "@manhphi1309/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region index.tsx
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@manhphi1309/drawer";
+import { useIsMobile } from "@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__ */ jsx(Dialog$1.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__ */ jsx(Dialog$1.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__ */ jsx(Dialog$1.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__ */ jsx(Dialog$1.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__ */ jsx(Dialog$1.Overlay, {
 		"data-slot": "dialog-overlay",
@@ -36,6 +102,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__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Content, {
 		"data-slot": "dialog-content",
@@ -47,7 +136,8 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 			children: /* @__PURE__ */ jsxs(Button, {
 				variant: "ghost",
 				className: "absolute top-2 right-2",
-				size: "icon-sm",
+				size: "sm",
+				icon: true,
 				children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
 					className: "sr-only",
 					children: "Close"
@@ -56,6 +146,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__ */ jsx("div", {
 		"data-slot": "dialog-header",
@@ -63,6 +164,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__ */ jsxs("div", {
 		"data-slot": "dialog-footer",
@@ -77,6 +192,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__ */ jsx(Dialog$1.Title, {
 		"data-slot": "dialog-title",
@@ -84,6 +209,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__ */ jsx(Dialog$1.Description, {
 		"data-slot": "dialog-description",
@@ -92,4 +228,212 @@ function DialogDescription({ className, ...props }) {
 	});
 }
 //#endregion
-export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
+//#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 (useIsMobile()) return /* @__PURE__ */ jsx(Drawer, {
+		...props,
+		children
+	});
+	return /* @__PURE__ */ 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 (useIsMobile()) return /* @__PURE__ */ jsx(DrawerTrigger, {
+		...props,
+		children
+	});
+	return /* @__PURE__ */ 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 (useIsMobile()) return /* @__PURE__ */ jsx(DrawerClose, {
+		...props,
+		children
+	});
+	return /* @__PURE__ */ 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 (useIsMobile()) return /* @__PURE__ */ jsx(DrawerContent, {
+		className,
+		children
+	});
+	return /* @__PURE__ */ 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 (useIsMobile()) return /* @__PURE__ */ jsx(DrawerHeader, {
+		className,
+		...props
+	});
+	return /* @__PURE__ */ 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 (useIsMobile()) return /* @__PURE__ */ jsxs(DrawerFooter, {
+		className,
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsx(DrawerClose, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				children: "Close"
+			})
+		})]
+	});
+	return /* @__PURE__ */ 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 (useIsMobile()) return /* @__PURE__ */ jsx(DrawerTitle, {
+		className,
+		...props
+	});
+	return /* @__PURE__ */ 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 (useIsMobile()) return /* @__PURE__ */ jsx(DrawerDescription, {
+		className,
+		...props
+	});
+	return /* @__PURE__ */ jsx(DialogDescription, {
+		className,
+		...props
+	});
+}
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manhphi1309/dialog",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "sideEffects": false,
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -29,6 +29,8 @@
   },
   "dependencies": {
     "@manhphi1309/button": "*",
+    "@manhphi1309/drawer": "*",
+    "@manhphi1309/hooks": "*",
     "@manhphi1309/utils": "*",
     "class-variance-authority": "*"
   }