@manhphi1309/dialog 0.1.2 → 0.2.0

package/README.md

@@ -1,15 +1,11 @@
 # @manhphi1309/dialog
 
-A custom dialog component for the shadcn-custom monorepo.
+A fully-accessible dialog package built on top of [Radix UI Dialog](https://www.radix-ui.com/primitives/docs/components/dialog). Ships two complete component families:
 
-## Subcomponents
+- **`Dialog*`** — standard modal dialog, always renders as a centered overlay
+- **`ResponsiveDialog*`** — adaptive wrapper that switches to a bottom `Drawer` on mobile screens (< 768 px)
 
-- `Dialog`
-
-## Dependencies
-
-- `@manhphi1309/utils`
-- `class-variance-authority`
+---
 
 ## Installation
 
@@ -17,12 +13,245 @@ A custom dialog component for the shadcn-custom monorepo.
 npm install @manhphi1309/dialog
 ```
 
-## Usage Example
+---
+
+## Dependencies
+
+| Package               | Role                                          |
+| --------------------- | --------------------------------------------- |
+| `@manhphi1309/button` | Close / action buttons inside dialogs         |
+| `@manhphi1309/drawer` | Mobile fallback used by `ResponsiveDialog*`   |
+| `@manhphi1309/hooks`  | `useIsMobile()` for the responsive breakpoint |
+| `@manhphi1309/utils`  | `cn()` class-name helper                      |
+
+---
+
+## Dialog Family
+
+A set of composable primitives that always render as a centred modal overlay, regardless of screen size.
+
+### `Dialog`
+
+The **root** component. Controls open/close state and provides context to all children. Thin wrapper around `Radix Dialog.Root`.
+
+```tsx
+<Dialog open={open} onOpenChange={setOpen}>
+  ...
+</Dialog>
+```
+
+| Prop           | Type                      | Notes                                                          |
+| -------------- | ------------------------- | -------------------------------------------------------------- |
+| `open`         | `boolean`                 | Controlled open state                                          |
+| `onOpenChange` | `(open: boolean) => void` | Called when open state changes                                 |
+| `defaultOpen`  | `boolean`                 | Uncontrolled initial state                                     |
+| `modal`        | `boolean`                 | Default `true` — traps focus and blocks background interaction |
+
+---
+
+### `DialogTrigger`
+
+Wraps the element that **opens** the dialog when clicked. Passes through all props to the underlying `Radix Dialog.Trigger`. Use `asChild` to compose with your own element.
+
+```tsx
+<DialogTrigger asChild>
+  <Button>Open</Button>
+</DialogTrigger>
+```
+
+---
+
+### `DialogPortal`
+
+Renders its children into a **portal** outside the current DOM tree (appended to `document.body`). Ensures the dialog appears above all other content and avoids z-index / overflow issues.
+
+> Usually you do not use this directly — `DialogContent` includes it automatically.
+
+---
+
+### `DialogOverlay`
+
+The **backdrop** behind the dialog content. Renders a fixed, full-screen semi-transparent layer (`bg-black/10`) with a backdrop blur on supported browsers.
+
+**Animations:**
+
+- Open → `fade-in-0`
+- Close → `fade-out-0`
+
+> Usually you do not use this directly — `DialogContent` includes it automatically.
+
+---
+
+### `DialogContent`
+
+The **visible panel** of the dialog. Renders centred on screen (`top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`), inside a portal with an overlay underneath. Comes with a ✕ ghost button in the top-right corner by default.
+
+**Animations:**
+
+- Open → `fade-in-0 + zoom-in-95`
+- Close → `fade-out-0 + zoom-out-95`
+
+| Prop              | Type      | Default | Notes                                                   |
+| ----------------- | --------- | ------- | ------------------------------------------------------- |
+| `showCloseButton` | `boolean` | `true`  | Show/hide the built-in ✕ button in the top-right corner |
+| `className`       | `string`  | —       | Extra classes merged on the content panel               |
+
+```tsx
+<DialogContent showCloseButton={false}>...</DialogContent>
+```
+
+---
+
+### `DialogHeader`
+
+A **layout wrapper** for the top section of a dialog. Stacks children vertically with `gap-2`. Typically holds `DialogTitle` and `DialogDescription`.
+
+```tsx
+<DialogHeader>
+  <DialogTitle>Title</DialogTitle>
+  <DialogDescription>Optional description.</DialogDescription>
+</DialogHeader>
+```
+
+---
+
+### `DialogTitle`
+
+The **accessible title** of the dialog. Rendered as a Radix `Dialog.Title` (connected to `aria-labelledby` on the content). Styled with `text-base font-medium leading-none` using the heading font.
+
+> Required for accessibility — screen readers announce this when the dialog opens.
+
+---
+
+### `DialogDescription`
+
+The **accessible description** of the dialog. Rendered as a Radix `Dialog.Description` (connected to `aria-describedby` on the content). Styled as small muted text. Links inside it are automatically underlined.
+
+> Optional but recommended for accessibility.
+
+---
+
+### `DialogFooter`
+
+A **layout wrapper** for the bottom action area. Bleeds to the edges of the content panel (`-mx-4 -mb-4`), adds a top border and `bg-muted/50` tint. Actions stack vertically on mobile, align right horizontally on `sm+`.
+
+| Prop              | Type      | Default | Notes                                                    |
+| ----------------- | --------- | ------- | -------------------------------------------------------- |
+| `showCloseButton` | `boolean` | `false` | Appends a `Close` outline button wired to `Dialog.Close` |
+
+```tsx
+<DialogFooter showCloseButton>
+  <Button type="submit">Save</Button>
+</DialogFooter>
+```
+
+---
+
+### `DialogClose`
+
+A bare **close trigger** primitive. Closes the dialog when activated. Use `asChild` to compose with a custom element.
+
+```tsx
+<DialogClose asChild>
+  <Button variant="ghost">Cancel</Button>
+</DialogClose>
+```
+
+---
+
+## ResponsiveDialog Family
+
+Drop-in replacements for the `Dialog*` components. Each one checks `useIsMobile()` (breakpoint: `768 px`) and renders the appropriate primitive:
+
+| Component                     | Desktop (≥ 768 px)  | Mobile (< 768 px)   |
+| ----------------------------- | ------------------- | ------------------- |
+| `ResponsiveDialog`            | `Dialog`            | `Drawer`            |
+| `ResponsiveDialogTrigger`     | `DialogTrigger`     | `DrawerTrigger`     |
+| `ResponsiveDialogClose`       | `DialogClose`       | `DrawerClose`       |
+| `ResponsiveDialogContent`     | `DialogContent`     | `DrawerContent`     |
+| `ResponsiveDialogHeader`      | `DialogHeader`      | `DrawerHeader`      |
+| `ResponsiveDialogFooter`      | `DialogFooter`      | `DrawerFooter`      |
+| `ResponsiveDialogTitle`       | `DialogTitle`       | `DrawerTitle`       |
+| `ResponsiveDialogDescription` | `DialogDescription` | `DrawerDescription` |
+
+All props are forwarded to the underlying component unchanged. `showCloseButton` on `ResponsiveDialogContent` and `ResponsiveDialogFooter` works the same way as on their dialog counterparts, including the correct close primitive for the active variant.
+
+> **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.
+
+---
+
+## Usage
+
+### Standard Dialog
+
+```tsx
+import { Button } from "@manhphi1309/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@manhphi1309/dialog"
+
+export default function DeleteConfirm() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="destructive">Delete account</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Are you absolutely sure?</DialogTitle>
+          <DialogDescription>
+            This action cannot be undone. Your account will be permanently
+            deleted.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter showCloseButton>
+          <Button variant="destructive">Delete</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+```
+
+### Responsive Dialog (Dialog on desktop, Drawer on mobile)
 
 ```tsx
-import { Dialog } from "@manhphi1309/dialog"
+import { Button } from "@manhphi1309/button"
+import {
+  ResponsiveDialog,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogFooter,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle,
+  ResponsiveDialogTrigger,
+} from "@manhphi1309/dialog"
 
-export default function App() {
-  return <Dialog>Hello World</Dialog>
+export default function EditProfile() {
+  return (
+    <ResponsiveDialog>
+      <ResponsiveDialogTrigger asChild>
+        <Button>Edit Profile</Button>
+      </ResponsiveDialogTrigger>
+      <ResponsiveDialogContent>
+        <ResponsiveDialogHeader>
+          <ResponsiveDialogTitle>Edit profile</ResponsiveDialogTitle>
+          <ResponsiveDialogDescription>
+            Make changes to your profile here.
+          </ResponsiveDialogDescription>
+        </ResponsiveDialogHeader>
+        {/* form content */}
+        <ResponsiveDialogFooter>
+          <Button type="submit">Save changes</Button>
+        </ResponsiveDialogFooter>
+      </ResponsiveDialogContent>
+    </ResponsiveDialog>
+  )
 }
 ```

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",
@@ -58,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",
@@ -65,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",
@@ -79,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",
@@ -86,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",
@@ -94,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;
@@ -104,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;