@manhphi1309/dialog 0.3.7 → 0.3.9

package/dist/index.cjs

@@ -152,7 +152,7 @@ function DialogOverlay({ className, ...props }) {
 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",
-		className: (0, _manhphi1309_utils.cn)("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+		className: (0, _manhphi1309_utils.cn)("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl bg-popover text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Dialog.Close, {
 			"data-slot": "dialog-close",
@@ -181,10 +181,10 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 *   <DialogDescription>This action is irreversible.</DialogDescription>
 * </DialogHeader>
 */
-function DialogHeader({ className, ...props }) {
+function DialogHeader({ className, withSeparator = false, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-slot": "dialog-header",
-		className: (0, _manhphi1309_utils.cn)("flex flex-col gap-2 px-4 pt-4", className),
+		className: (0, _manhphi1309_utils.cn)("flex flex-col gap-2 p-4", withSeparator && "border-b border-border", className),
 		...props
 	});
 }
@@ -390,7 +390,7 @@ function ResponsiveDialogContent({ className, children, showCloseButton = true,
 	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),
+		className: (0, _manhphi1309_utils.cn)(snap && "h-[calc(96dvh-env(safe-area-inset-top))]", className),
 		...props,
 		children
 	});
@@ -411,16 +411,18 @@ function ResponsiveDialogContent({ className, children, showCloseButton = true,
 * Typically contains `ResponsiveDialogTitle` and optionally
 * `ResponsiveDialogDescription`.
 */
-function ResponsiveDialogHeader({ className, leftAction, rightAction, children, ...props }) {
+function ResponsiveDialogHeader({ className, leftAction, rightAction, withSeparator = false, children, ...props }) {
 	if ((0, _manhphi1309_hooks.useIsMobile)()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_manhphi1309_drawer.DrawerHeader, {
 		leftAction,
 		rightAction,
 		className,
+		withSeparator,
 		...props,
 		children
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogHeader, {
 		className,
+		withSeparator,
 		...props,
 		children
 	});

package/dist/index.d.cts

@@ -127,8 +127,11 @@ declare function DialogContent({
  */
 declare function DialogHeader({
   className,
+  withSeparator,
   ...props
-}: React.ComponentProps<"div">): React.JSX.Element;
+}: React.ComponentProps<"div"> & {
+  withSeparator?: boolean;
+}): React.JSX.Element;
 /**
  * Layout wrapper for the **bottom action area** of a dialog.
  * Bleeds to the content panel edges (`-mx-4 -mb-4`), adds a top border
@@ -295,11 +298,13 @@ declare function ResponsiveDialogHeader({
   className,
   leftAction,
   rightAction,
+  withSeparator,
   children,
   ...props
 }: React.ComponentProps<"div"> & {
   leftAction?: React.ReactNode;
   rightAction?: React.ReactNode;
+  withSeparator?: boolean;
 }): React.JSX.Element;
 /**
  * Layout wrapper for the **bottom action area** of the responsive

package/dist/index.d.mts

@@ -127,8 +127,11 @@ declare function DialogContent({
  */
 declare function DialogHeader({
   className,
+  withSeparator,
   ...props
-}: React.ComponentProps<"div">): React.JSX.Element;
+}: React.ComponentProps<"div"> & {
+  withSeparator?: boolean;
+}): React.JSX.Element;
 /**
  * Layout wrapper for the **bottom action area** of a dialog.
  * Bleeds to the content panel edges (`-mx-4 -mb-4`), adds a top border
@@ -295,11 +298,13 @@ declare function ResponsiveDialogHeader({
   className,
   leftAction,
   rightAction,
+  withSeparator,
   children,
   ...props
 }: React.ComponentProps<"div"> & {
   leftAction?: React.ReactNode;
   rightAction?: React.ReactNode;
+  withSeparator?: boolean;
 }): React.JSX.Element;
 /**
  * Layout wrapper for the **bottom action area** of the responsive

package/dist/index.mjs

@@ -128,7 +128,7 @@ function DialogOverlay({ className, ...props }) {
 function DialogContent({ className, children, showCloseButton = true, ...props }) {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog$1.Content, {
 		"data-slot": "dialog-content",
-		className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+		className: cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl bg-popover text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog$1.Close, {
 			"data-slot": "dialog-close",
@@ -157,10 +157,10 @@ function DialogContent({ className, children, showCloseButton = true, ...props }
 *   <DialogDescription>This action is irreversible.</DialogDescription>
 * </DialogHeader>
 */
-function DialogHeader({ className, ...props }) {
+function DialogHeader({ className, withSeparator = false, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "dialog-header",
-		className: cn("flex flex-col gap-2 px-4 pt-4", className),
+		className: cn("flex flex-col gap-2 p-4", withSeparator && "border-b border-border", className),
 		...props
 	});
 }
@@ -366,7 +366,7 @@ function ResponsiveDialogContent({ className, children, showCloseButton = true,
 	const isMobile = useIsMobile();
 	const { snap } = React.useContext(ResponsiveDialogContext);
 	if (isMobile) return /* @__PURE__ */ jsx(DrawerContent, {
-		className: cn(snap && "h-[96dvh] !max-h-[96dvh]", className),
+		className: cn(snap && "h-[calc(96dvh-env(safe-area-inset-top))]", className),
 		...props,
 		children
 	});
@@ -387,16 +387,18 @@ function ResponsiveDialogContent({ className, children, showCloseButton = true,
 * Typically contains `ResponsiveDialogTitle` and optionally
 * `ResponsiveDialogDescription`.
 */
-function ResponsiveDialogHeader({ className, leftAction, rightAction, children, ...props }) {
+function ResponsiveDialogHeader({ className, leftAction, rightAction, withSeparator = false, children, ...props }) {
 	if (useIsMobile()) return /* @__PURE__ */ jsx(DrawerHeader, {
 		leftAction,
 		rightAction,
 		className,
+		withSeparator,
 		...props,
 		children
 	});
 	return /* @__PURE__ */ jsx(DialogHeader, {
 		className,
+		withSeparator,
 		...props,
 		children
 	});

package/package.json

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