import { cn } from "./index3.js";
import { Button } from "./index6.js";
import { cva } from "class-variance-authority";
import { X } from "lucide-react";
import * as React from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Dialog } from "@base-ui/react/dialog";
//#region src/components/organisms/overlays/Dialog/Dialog.tsx
var closeButtonVariants = cva("", {
	variants: { size: {
		sm: "",
		md: "",
		lg: ""
	} },
	defaultVariants: { size: "sm" }
});
var buttonSizeMap = {
	sm: "icon-sm",
	md: "icon",
	lg: "icon-lg"
};
var CloseButton = React.forwardRef(({ className, size = "sm", "aria-label": ariaLabel = "Close", ...props }, ref) => {
	return /* @__PURE__ */ jsxs(Button, {
		ref,
		"data-slot": "close-button",
		appearance: "ghost",
		variant: "secondary",
		size: buttonSizeMap[size ?? "sm"],
		className: cn(closeButtonVariants({ size }), className),
		"aria-label": ariaLabel,
		...props,
		children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
			className: "sr-only",
			children: ariaLabel
		})]
	});
});
CloseButton.displayName = "CloseButton";
var Root = React.forwardRef(function Root({ ...props }, _ref) {
	return /* @__PURE__ */ jsx(Dialog.Root, {
		"data-slot": "dialog",
		...props
	});
});
Root.displayName = "Dialog.Root";
var Trigger = React.forwardRef(function Trigger({ ...props }, ref) {
	return /* @__PURE__ */ jsx(Dialog.Trigger, {
		ref,
		"data-slot": "dialog-trigger",
		...props
	});
});
Trigger.displayName = "Dialog.Trigger";
function Portal({ ...props }) {
	return /* @__PURE__ */ jsx(Dialog.Portal, {
		"data-slot": "dialog-portal",
		...props
	});
}
Portal.displayName = "Dialog.Portal";
var Close = React.forwardRef(function Close({ ...props }, ref) {
	return /* @__PURE__ */ jsx(Dialog.Close, {
		ref,
		"data-slot": "dialog-close",
		...props
	});
});
Close.displayName = "Dialog.Close";
var Backdrop = React.forwardRef(function Backdrop({ className, disableAnimation, disableBackdropBlur, ...props }, ref) {
	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
		ref,
		"data-slot": "dialog-backdrop",
		className: cn("bg-background/80/10 fixed inset-0 isolate z-50", !disableAnimation && "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 duration-100 motion-reduce:animate-none", !disableBackdropBlur && "supports-backdrop-filter:backdrop-blur-xs", className),
		...props
	});
});
Backdrop.displayName = "Dialog.Backdrop";
var Viewport = React.forwardRef(function Viewport({ className, children, ...props }, ref) {
	return /* @__PURE__ */ jsx(Dialog.Viewport, {
		ref,
		"data-slot": "dialog-viewport",
		className: cn("fixed inset-0 z-50 flex items-center justify-center p-4", className),
		...props,
		children
	});
});
Viewport.displayName = "Dialog.Viewport";
function PopupBase({ className, children, showCloseButton = true, initialFocus, disableAnimation, disableBackdropBlur, ...props }) {
	return /* @__PURE__ */ jsxs(Portal, { children: [/* @__PURE__ */ jsx(Backdrop, {
		disableAnimation,
		disableBackdropBlur
	}), /* @__PURE__ */ jsxs(Dialog.Popup, {
		"data-slot": "dialog-popup",
		initialFocus,
		className: cn("bg-background ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 shadow-lg sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none", !disableAnimation && "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 duration-150 motion-reduce:animate-none", className),
		...props,
		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(CloseButton, { className: "absolute top-4 end-4" }) })]
	})] });
}
PopupBase.displayName = "PopupBase";
function HeaderBase({ className, ...props }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "dialog-header",
		className: cn("gap-2 flex flex-col", className),
		...props
	});
}
HeaderBase.displayName = "HeaderBase";
function FooterBase({ className, showCloseButton = false, children, ...props }) {
	return /* @__PURE__ */ jsxs("div", {
		"data-slot": "dialog-footer",
		className: cn("gap-2 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
		...props,
		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
			render: /* @__PURE__ */ jsx(Button, {
				appearance: "outline",
				variant: "secondary"
			}),
			children: "Close"
		})]
	});
}
FooterBase.displayName = "FooterBase";
function TitleBase({ className, ...props }) {
	return /* @__PURE__ */ jsx(Dialog.Title, {
		"data-slot": "dialog-title",
		className: cn("leading-none font-medium", className),
		...props
	});
}
TitleBase.displayName = "TitleBase";
function DescriptionBase({ className, ...props }) {
	return /* @__PURE__ */ jsx(Dialog.Description, {
		"data-slot": "dialog-description",
		className: cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className),
		...props
	});
}
DescriptionBase.displayName = "DescriptionBase";
var popupVariants = cva("", {
	variants: { size: {
		sm: "sm:max-w-[400px] overflow-hidden",
		md: "sm:max-w-md overflow-hidden",
		lg: "sm:max-w-[544px] overflow-hidden",
		xl: "sm:max-w-xl overflow-hidden",
		full: "sm:max-w-[calc(100%-2rem)] overflow-hidden"
	} },
	defaultVariants: { size: "sm" }
});
function Popup({ className, children, size, showPattern = true, showCloseButton = true, initialFocus, disableEffects, disableAnimation, disableBackdropBlur, ...props }) {
	const shouldDisableAnimation = disableAnimation ?? disableEffects;
	const shouldDisableBackdropBlur = disableBackdropBlur ?? disableEffects;
	const shouldShowPattern = disableEffects ? false : showPattern;
	return /* @__PURE__ */ jsxs(PopupBase, {
		className: cn(popupVariants({ size }), className),
		showCloseButton,
		initialFocus,
		disableAnimation: shouldDisableAnimation,
		disableBackdropBlur: shouldDisableBackdropBlur,
		...props,
		children: [shouldShowPattern && /* @__PURE__ */ jsx(Pattern, {}), children]
	});
}
Popup.displayName = "Dialog.Popup";
function Pattern({ className }) {
	const gradientId = React.useId();
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "dialog-pattern",
		className: cn("pointer-events-none absolute -start-[120px] -top-[120px] size-[336px] delight-fade-in motion-reduce:!animate-none", className),
		"aria-hidden": "true",
		children: /* @__PURE__ */ jsxs("svg", {
			viewBox: "0 0 336 336",
			fill: "none",
			xmlns: "http://www.w3.org/2000/svg",
			className: "size-full",
			children: [
				/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", {
					id: gradientId,
					cx: "168",
					cy: "168",
					r: "168",
					gradientUnits: "userSpaceOnUse",
					children: [/* @__PURE__ */ jsx("stop", {
						stopColor: "currentColor",
						stopOpacity: "0.08"
					}), /* @__PURE__ */ jsx("stop", {
						offset: "1",
						stopColor: "currentColor",
						stopOpacity: "0"
					})]
				}) }),
				/* @__PURE__ */ jsx("circle", {
					cx: "168",
					cy: "168",
					r: "47",
					stroke: `url(#${gradientId})`,
					strokeWidth: "1",
					fill: "none"
				}),
				/* @__PURE__ */ jsx("circle", {
					cx: "168",
					cy: "168",
					r: "87",
					stroke: `url(#${gradientId})`,
					strokeWidth: "1",
					fill: "none"
				}),
				/* @__PURE__ */ jsx("circle", {
					cx: "168",
					cy: "168",
					r: "127",
					stroke: `url(#${gradientId})`,
					strokeWidth: "1",
					fill: "none"
				}),
				/* @__PURE__ */ jsx("circle", {
					cx: "168",
					cy: "168",
					r: "167",
					stroke: `url(#${gradientId})`,
					strokeWidth: "1",
					fill: "none"
				})
			]
		})
	});
}
Pattern.displayName = "Dialog.Pattern";
var iconVariants = cva("flex shrink-0 items-center justify-center rounded-full", {
	variants: {
		variant: {
			default: "bg-success/20 text-success",
			success: "bg-success/20 text-success",
			warning: "bg-warning/20 text-warning",
			destructive: "bg-destructive/20 text-destructive",
			info: "bg-primary/20 text-foreground"
		},
		size: {
			sm: "size-10",
			md: "size-12",
			lg: "size-14"
		}
	},
	defaultVariants: {
		variant: "default",
		size: "md"
	}
});
function Icon({ className, variant, size, children, ...props }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "dialog-icon",
		className: cn(iconVariants({
			variant,
			size
		}), "delight-bounce-in motion-reduce:!animate-none", className),
		...props,
		children: /* @__PURE__ */ jsx("span", {
			className: "[&_svg]:size-6",
			children
		})
	});
}
Icon.displayName = "Dialog.Icon";
var headerVariants = cva("gap-4", {
	variants: { layout: {
		stacked: "flex flex-col items-start",
		horizontal: "flex flex-row items-start",
		centered: "flex flex-col items-center text-center"
	} },
	defaultVariants: { layout: "stacked" }
});
function Header({ className, layout, children, ...props }) {
	return /* @__PURE__ */ jsx(HeaderBase, {
		className: cn(headerVariants({ layout }), className),
		...props,
		children
	});
}
Header.displayName = "Dialog.Header";
function HeaderContent({ className, children, ...props }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "dialog-header-content",
		className: cn("flex flex-1 flex-col gap-1", className),
		...props,
		children
	});
}
HeaderContent.displayName = "Dialog.HeaderContent";
function Title({ className, ...props }) {
	return /* @__PURE__ */ jsx(TitleBase, {
		className: cn("text-lg font-semibold leading-7 text-foreground delight-stagger motion-reduce:!animate-none", className),
		...props,
		style: { "--delight-delay": "50ms" }
	});
}
Title.displayName = "Dialog.Title";
function Description({ className, ...props }) {
	return /* @__PURE__ */ jsx(DescriptionBase, {
		className: cn("text-sm text-muted-foreground delight-stagger motion-reduce:!animate-none", className),
		...props,
		style: { "--delight-delay": "100ms" }
	});
}
Description.displayName = "Dialog.Description";
var footerVariants = cva("gap-3", {
	variants: { layout: {
		horizontal: "flex flex-col-reverse sm:flex-row sm:justify-end",
		"horizontal-fill": "flex flex-col-reverse sm:flex-row [&>*]:flex-1",
		stacked: "flex flex-col"
	} },
	defaultVariants: { layout: "horizontal-fill" }
});
function Footer({ className, layout, children, ...props }) {
	return /* @__PURE__ */ jsx(FooterBase, {
		className: cn(footerVariants({ layout }), className),
		...props,
		children
	});
}
Footer.displayName = "Dialog.Footer";
function Body({ className, children, ...props }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "dialog-body",
		className: cn("flex flex-col gap-4", className),
		...props,
		children
	});
}
Body.displayName = "Dialog.Body";
var Dialog$1 = Object.assign(Root, {
	Root,
	Trigger,
	Portal,
	Backdrop,
	Viewport,
	Popup,
	Header,
	HeaderContent,
	Body,
	Footer,
	Title,
	Description,
	Close,
	Icon,
	Pattern
});
//#endregion
export { Backdrop, Body, Close, Description, Dialog$1 as Dialog, Footer, Header, HeaderContent, Icon, Pattern, Popup, Portal, Root, Title, Trigger, Viewport, footerVariants, headerVariants, iconVariants, popupVariants };

//# sourceMappingURL=index463.js.map