fumadocs-openapi/dist/ui/components/dialog.js

Generate MDX docs for your OpenAPI spec

'use client';

import { cn } from "../../utils/cn.js";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { X } from "lucide-react";
import { buttonVariants } from "fumadocs-ui/components/ui/button";
import * as DialogPrimitive from "@radix-ui/react-dialog";

//#region src/ui/components/dialog.tsx
const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
	ref,
	className: cn("fixed inset-0 z-50 bg-black/30 backdrop-blur-sm data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out", className),
	...props
}));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
	ref,
	className: cn("fixed left-1/2 top-1/2 z-50 flex flex-col gap-4 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-fd-popover p-4 shadow-lg rounded-xl duration-200 data-[state=open]:animate-fd-dialog-in data-[state=closed]:animate-fd-dialog-out focus-visible:outline-none", className),
	...props,
	children: [children, /* @__PURE__ */ jsx(DialogPrimitive.Close, {
		"aria-label": "Close",
		className: cn(buttonVariants({
			size: "icon-sm",
			color: "ghost"
		}), "absolute end-2 top-2 text-fd-muted-foreground/70"),
		children: /* @__PURE__ */ jsx(X, {})
	})]
})] }));
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
	className: cn("flex flex-col gap-1.5 text-center sm:text-start", className),
	...props
});
DialogHeader.displayName = "DialogHeader";
const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
	className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2", className),
	...props
});
DialogFooter.displayName = "DialogFooter";
const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Title, {
	ref,
	className: cn("text-lg font-semibold leading-none tracking-tight", className),
	...props
}));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, {
	ref,
	className: cn("text-sm text-fd-muted-foreground", className),
	...props
}));
DialogDescription.displayName = DialogPrimitive.Description.displayName;

//#endregion
export { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger };
//# sourceMappingURL=dialog.js.map