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.41 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index46.js"),t=require("react"),o=require("./index47.js"),r=require("./index38.js");exports.Modal=({isOpen:s,onClose:n,children:i,className:l="",showCloseButton:a=!0,isFullscreen:d=!1,size:c="md",position:u="center",title:m,description:x,initialFocus:h})=>{const b=t.useRef(null),f=t.useRef(null);t.useEffect((()=>(s?(f.current=document.activeElement,h?.current?h.current.focus():b.current?.focus(),document.addEventListener("keydown",p),document.body.style.overflow="hidden"):(document.body.style.overflow="unset",f.current?.focus()),()=>{document.removeEventListener("keydown",p),document.body.style.overflow="unset"})),[s,h]);const p=e=>{"Escape"===e.key&&n()};return s?e.jsxRuntimeExports.jsxs("div",{className:r.cn("fixed inset-0 flex justify-center",{center:"items-center",top:"items-start mt-16"}[u],"overflow-y-auto z-50","animate-in fade-in duration-200"),role:"presentation",children:[e.jsxRuntimeExports.jsx("div",{className:"fixed inset-0 bg-[oklch(var(--theme-background)/0.8)] backdrop-blur-sm transition-opacity",onClick:n,"aria-hidden":"true"}),e.jsxRuntimeExports.jsxs("div",{ref:b,className:r.cn("relative w-full m-4",!d&&[{sm:"max-w-sm",md:"max-w-md",lg:"max-w-lg",xl:"max-w-xl",full:"max-w-full"}[c],"rounded-lg bg-[oklch(var(--theme-background))]","shadow-lg","border border-[oklch(var(--theme-border))]"],d&&"w-full h-full bg-[oklch(var(--theme-background))]","animate-in zoom-in-95 duration-200",l),onClick:e=>e.stopPropagation(),role:"dialog","aria-modal":"true","aria-labelledby":m?"modal-title":void 0,"aria-describedby":x?"modal-description":void 0,tabIndex:-1,children:[a&&e.jsxRuntimeExports.jsx("button",{onClick:n,className:r.cn("absolute right-4 top-4 z-10 rounded-sm p-2","text-[oklch(var(--theme-muted-foreground))] hover:text-[oklch(var(--theme-foreground))]","transition-colors hover:bg-[oklch(var(--theme-muted))]"),"aria-label":"Close modal",children:e.jsxRuntimeExports.jsx(o.FiX,{className:"h-5 w-5","aria-hidden":"true"})}),e.jsxRuntimeExports.jsxs("div",{className:"p-6",children:[m&&e.jsxRuntimeExports.jsx("h2",{id:"modal-title",className:"text-xl font-semibold mb-2 text-[oklch(var(--theme-foreground))]",children:m}),x&&e.jsxRuntimeExports.jsx("p",{id:"modal-description",className:"text-[oklch(var(--theme-muted-foreground))] mb-4",children:x}),i]})]})]}):null};