UNPKG

nextuiq

Version:

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

2 lines (1 loc) 2.19 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js"),s=require("react"),t=require("react-dom"),o=require("./index47.js"),n=require("./index38.js");exports.Dialog=({open:o,onOpenChange:n,children:r})=>{const i=s.useRef(null);return s.useEffect((()=>{const e=e=>{"Escape"===e.key&&n(!1)};return o&&(document.addEventListener("keydown",e),document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",e),document.body.style.overflow="unset"}}),[o,n]),o?t.createPortal(e.jsxRuntimeExports.jsxs("div",{role:"dialog","aria-modal":"true",className:"fixed inset-0 z-50 flex items-center justify-center",children:[e.jsxRuntimeExports.jsx("div",{className:"fixed inset-0 bg-[oklch(var(--theme-background)/0.8)] backdrop-blur-sm animate-in fade-in-0",onClick:()=>n(!1)}),e.jsxRuntimeExports.jsx("div",{ref:i,className:"relative z-50 animate-in fade-in-0 zoom-in-95",children:r})]}),document.body):null},exports.DialogClose=({className:s,onClick:t,...r})=>e.jsxRuntimeExports.jsx("button",{className:n.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",s),onClick:t,"aria-label":"Close dialog",...r,children:e.jsxRuntimeExports.jsx(o.FiX,{className:"h-4 w-4"})}),exports.DialogContent=({children:s,className:t,...o})=>e.jsxRuntimeExports.jsx("div",{className:n.cn("w-full max-w-lg border bg-[oklch(var(--theme-background))] p-6 shadow-lg rounded-lg",t),...o,children:s}),exports.DialogDescription=({className:s,...t})=>e.jsxRuntimeExports.jsx("p",{className:n.cn("text-sm text-[oklch(var(--theme-muted-foreground))]",s),...t}),exports.DialogFooter=({className:s,...t})=>e.jsxRuntimeExports.jsx("div",{className:n.cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",s),...t}),exports.DialogHeader=({className:s,...t})=>e.jsxRuntimeExports.jsx("div",{className:n.cn("flex flex-col space-y-1.5 text-center sm:text-left",s),...t}),exports.DialogTitle=({className:s,...t})=>e.jsxRuntimeExports.jsx("h2",{className:n.cn("text-lg font-semibold leading-none tracking-tight",s),...t});