'use strict';
'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
import { cn } from '../../../fd-toolbox/lib/utils.js';
import { Icon, iconNames } from '../icon/Icon.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
const Dialog = Dialog$1.Root;
const DialogTrigger = Dialog$1.Trigger;
const DialogPortal = Dialog$1.Portal;
const DialogClose = Dialog$1.Close;
function DialogOverlay({
  className,
  ref
}) {
  return /* @__PURE__ */jsx(Dialog$1.Backdrop, {
    forceRender: true,
    ref,
    className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80", className)
  });
}
__name(DialogOverlay, "DialogOverlay");
DialogOverlay.displayName = Dialog$1.Backdrop.displayName;
function DialogContent({
  className,
  children,
  closeButtonShown,
  ref
}) {
  return /* @__PURE__ */jsxs(DialogPortal, {
    children: [/* @__PURE__ */jsx(DialogOverlay, {}), /* @__PURE__ */jsx(Dialog$1.Viewport, {
      children: /* @__PURE__ */jsxs(Dialog$1.Popup, {
        ref,
        className: cn("bg-background fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2", "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2 sm:rounded-lg", className),
        children: [children, (closeButtonShown ?? true) && /* @__PURE__ */jsxs(Dialog$1.Close, {
          className: "ring-offset-background focus:ring-primary data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none",
          children: [/* @__PURE__ */jsx(Icon, {
            name: iconNames.cross
          }), /* @__PURE__ */jsx("span", {
            className: "sr-only",
            children: "Close"
          })]
        })]
      })
    })]
  });
}
__name(DialogContent, "DialogContent");
DialogContent.displayName = Dialog$1.Popup.displayName;
function DialogHeader({
  className,
  children
}) {
  return /* @__PURE__ */jsx("div", {
    className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
    children
  });
}
__name(DialogHeader, "DialogHeader");
DialogHeader.displayName = "DialogHeader";
function DialogFooter({
  className,
  children
}) {
  return /* @__PURE__ */jsx("div", {
    className: cn("flex flex-row items-end justify-end space-x-2", className),
    children
  });
}
__name(DialogFooter, "DialogFooter");
DialogFooter.displayName = "DialogFooter";
function DialogTitle({
  className,
  ref,
  children
}) {
  return /* @__PURE__ */jsx(Dialog$1.Title, {
    ref,
    className: cn("text-lg leading-none font-semibold tracking-tight", className),
    children
  });
}
__name(DialogTitle, "DialogTitle");
DialogTitle.displayName = Dialog$1.Title.displayName;
function DialogDescription({
  className,
  ref
}) {
  return /* @__PURE__ */jsx(Dialog$1.Description, {
    ref,
    className: cn("text-muted-foreground text-sm", className)
  });
}
__name(DialogDescription, "DialogDescription");
DialogDescription.displayName = Dialog$1.Description.displayName;

export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };
