nextuiq/dist/index44.mjs

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

import { j as jsxRuntimeExports } from './index46.mjs';
import { useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { FiX } from './index47.mjs';
import { cn } from './index38.mjs';

const Dialog = ({ open, onOpenChange, children }) => {
  const dialogRef = useRef(null);
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === "Escape") {
        onOpenChange(false);
      }
    };
    if (open) {
      document.addEventListener("keydown", handleKeyDown);
      document.body.style.overflow = "hidden";
    }
    return () => {
      document.removeEventListener("keydown", handleKeyDown);
      document.body.style.overflow = "unset";
    };
  }, [open, onOpenChange]);
  if (!open) return null;
  return createPortal(
    /* @__PURE__ */ jsxRuntimeExports.jsxs(
      "div",
      {
        role: "dialog",
        "aria-modal": "true",
        className: "fixed inset-0 z-50 flex items-center justify-center",
        children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "div",
            {
              className: "fixed inset-0 bg-[oklch(var(--theme-background)/0.8)] backdrop-blur-sm animate-in fade-in-0",
              onClick: () => onOpenChange(false)
            }
          ),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "div",
            {
              ref: dialogRef,
              className: "relative z-50 animate-in fade-in-0 zoom-in-95",
              children
            }
          )
        ]
      }
    ),
    document.body
  );
};
const DialogContent = ({
  children,
  className,
  ...props
}) => {
  return /* @__PURE__ */ jsxRuntimeExports.jsx(
    "div",
    {
      className: cn(
        "w-full max-w-lg border bg-[oklch(var(--theme-background))] p-6 shadow-lg rounded-lg",
        className
      ),
      ...props,
      children
    }
  );
};
const DialogHeader = ({
  className,
  ...props
}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
  "div",
  {
    className: cn(
      "flex flex-col space-y-1.5 text-center sm:text-left",
      className
    ),
    ...props
  }
);
const DialogFooter = ({
  className,
  ...props
}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
  "div",
  {
    className: cn(
      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
      className
    ),
    ...props
  }
);
const DialogTitle = ({
  className,
  ...props
}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
  "h2",
  {
    className: cn(
      "text-lg font-semibold leading-none tracking-tight",
      className
    ),
    ...props
  }
);
const DialogDescription = ({
  className,
  ...props
}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
  "p",
  {
    className: cn(
      "text-sm text-[oklch(var(--theme-muted-foreground))]",
      className
    ),
    ...props
  }
);
const DialogClose = ({
  className,
  onClick,
  ...props
}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
  "button",
  {
    className: cn(
      "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-[oklch(var(--theme-ring))] focus:ring-offset-2",
      className
    ),
    onClick,
    "aria-label": "Close dialog",
    ...props,
    children: /* @__PURE__ */ jsxRuntimeExports.jsx(FiX, { className: "h-4 w-4" })
  }
);

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