"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[106],{"./src/components/ui/Modal/Modal.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Default:()=>Default,DeleteConfirmation:()=>DeleteConfirmation,FormModal:()=>FormModal,FullSize:()=>FullSize,LargeSize:()=>LargeSize,LongContent:()=>LongContent,NoBackdropClose:()=>NoBackdropClose,NoCloseButton:()=>NoCloseButton,SmallSize:()=>SmallSize,WithFooter:()=>WithFooter,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js"),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/next/dist/compiled/react/index.js"),_index__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/ui/Modal/index.tsx"),_Button__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/ui/Button/index.tsx");const __WEBPACK_DEFAULT_EXPORT__={title:"UI/Modal",component:_index__WEBPACK_IMPORTED_MODULE_2__.a,parameters:{layout:"centered"},tags:["autodocs"]},Default={render:()=>{const[open,setOpen]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{onClick:()=>setOpen(!0),children:"Open Modal"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.a,{open,onClose:()=>setOpen(!1),title:"Modal Title",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{children:"This is the modal content."})})]})}},WithFooter={render:()=>{const[open,setOpen]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{onClick:()=>setOpen(!0),children:"Open Modal with Footer"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.a,{open,onClose:()=>setOpen(!1),title:"Confirm Action",footer:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{variant:"ghost",onClick:()=>setOpen(!1),children:"Cancel"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{variant:"primary",onClick:()=>setOpen(!1),children:"Confirm"})]}),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{children:"Are you sure you want to proceed with this action?"})})]})}},SmallSize={render:()=>{const[open,setOpen]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{onClick:()=>setOpen(!0),children:"Open Small Modal"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.a,{open,onClose:()=>setOpen(!1),title:"Small Modal",size:"sm",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{children:"This is a small modal."})})]})}},LargeSize={render:()=>{const[open,setOpen]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{onClick:()=>setOpen(!0),children:"Open Large Modal"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_index__WEBPACK_IMPORTED_MODULE_2__.a,{open,onClose:()=>setOpen(!1),title:"Large Modal",size:"lg",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{className:"mb-4",children:"This is a large modal with more content."}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{className:"mb-4",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{children:"Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris."})]})]})}},FullSize={render:()=>{const[open,setOpen]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{onClick:()=>setOpen(!0),children:"Open Full Modal"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.a,{open,onClose:()=>setOpen(!1),title:"Full Size Modal",size:"full",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"h-[60vh]",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{children:"This modal takes up most of the viewport."})})})]})}},NoCloseButton={render:()=>{const[open,setOpen]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{onClick:()=>setOpen(!0),children:"Open Modal (No Close Button)"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_index__WEBPACK_IMPORTED_MODULE_2__.a,{open,onClose:()=>setOpen(!1),title:"No Close Button",showCloseButton:!1,footer:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{variant:"primary",onClick:()=>setOpen(!1),children:"Close"}),children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{children:"This modal has no close button in the header."}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{children:"Use the footer button or press Escape to close."})]})]})}},NoBackdropClose={render:()=>{const[open,setOpen]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{onClick:()=>setOpen(!0),children:"Open Modal (No Backdrop Close)"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_index__WEBPACK_IMPORTED_MODULE_2__.a,{open,onClose:()=>setOpen(!1),title:"Backdrop Close Disabled",closeOnBackdrop:!1,footer:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{variant:"primary",onClick:()=>setOpen(!1),children:"Close"}),children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{children:"Clicking the backdrop will not close this modal."}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{children:"Use the close button or press Escape."})]})]})}},FormModal={render:()=>{const[open,setOpen]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{onClick:()=>setOpen(!0),children:"Open Form Modal"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.a,{open,onClose:()=>setOpen(!1),title:"Contact Us",footer:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{variant:"ghost",onClick:()=>setOpen(!1),children:"Cancel"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{variant:"primary",onClick:()=>setOpen(!1),children:"Submit"})]}),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"space-y-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label",{className:"block text-sm font-medium mb-1",children:"Name"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input",{type:"text",className:"w-full px-3 py-2 border border-gray-300 rounded-md",placeholder:"Your name"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label",{className:"block text-sm font-medium mb-1",children:"Email"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input",{type:"email",className:"w-full px-3 py-2 border border-gray-300 rounded-md",placeholder:"you@example.com"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label",{className:"block text-sm font-medium mb-1",children:"Message"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("textarea",{className:"w-full px-3 py-2 border border-gray-300 rounded-md",rows:4,placeholder:"Your message"})]})]})})]})}},DeleteConfirmation={render:()=>{const[open,setOpen]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{variant:"danger",onClick:()=>setOpen(!0),children:"Delete Item"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.a,{open,onClose:()=>setOpen(!1),title:"Delete Confirmation",size:"sm",footer:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{variant:"ghost",onClick:()=>setOpen(!1),children:"Cancel"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{variant:"danger",onClick:()=>setOpen(!1),children:"Delete"})]}),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{className:"text-gray-700",children:"Are you sure you want to delete this item? This action cannot be undone."})})]})}},LongContent={render:()=>{const[open,setOpen]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{onClick:()=>setOpen(!0),children:"Open Modal with Long Content"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.a,{open,onClose:()=>setOpen(!1),title:"Terms and Conditions",footer:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Button__WEBPACK_IMPORTED_MODULE_3__.$,{variant:"primary",onClick:()=>setOpen(!1),children:"I Agree"}),children:Array.from({length:20}).map((_,i)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{className:"mb-4",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."},i))})]})}},__namedExportsOrder=["Default","WithFooter","SmallSize","LargeSize","FullSize","NoCloseButton","NoBackdropClose","FormModal","DeleteConfirmation","LongContent"]},"./src/components/ui/Modal/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{a:()=>Modal});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js"),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/next/dist/compiled/react/index.js"),_lib_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/lib/core/index.ts"),_components_ui_icons__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/ui/icons/index.ts"),_components_ui_Button__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/components/ui/Button/index.tsx");const Modal=({open,onClose,title,size="md",showCloseButton=!0,closeOnBackdrop=!0,closeOnEscape=!0,children,footer})=>{const modalRef=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null),previousActiveElement=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null),handleKeyDown=(0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(e=>{"Escape"===e.key&&closeOnEscape&&onClose(),"Tab"===e.key&&function trapFocus(e,container){if(!container)return;const focusableSelectors=["button:not([disabled])","[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(", "),focusable=container.querySelectorAll(focusableSelectors);if(0===focusable.length)return;const first=focusable[0],last=focusable[focusable.length-1];e.shiftKey&&document.activeElement===first?(e.preventDefault(),last.focus()):e.shiftKey||document.activeElement!==last||(e.preventDefault(),first.focus())}(e,modalRef.current)},[closeOnEscape,onClose]);if((0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{if(open)return previousActiveElement.current=document.activeElement,setTimeout(()=>{modalRef.current?.focus()},0),document.addEventListener("keydown",handleKeyDown),()=>{document.removeEventListener("keydown",handleKeyDown),previousActiveElement.current?.focus()}},[open,handleKeyDown]),(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>(document.body.style.overflow=open?"hidden":"",()=>{document.body.style.overflow=""}),[open]),!open)return null;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"fixed inset-0 z-[var(--z-modal)] flex items-center justify-center p-4",role:"dialog","aria-modal":"true","aria-labelledby":title?"modal-title":void 0,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"absolute inset-0 bg-black/50 backdrop-blur-sm animate-fadeIn",onClick:e=>{closeOnBackdrop&&e.target===e.currentTarget&&onClose()},"aria-hidden":"true"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{ref:modalRef,tabIndex:-1,className:(0,_lib_core__WEBPACK_IMPORTED_MODULE_2__.cn)("relative bg-white dark:bg-gray-800 rounded-lg shadow-2xl w-full animate-slideUp focus:outline-none",{sm:"max-w-md",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl",full:"max-w-[95vw] max-h-[95vh]"}[size]),children:[(title||showCloseButton)&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700",children:[title&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h2",{id:"modal-title",className:"text-xl font-semibold text-gray-900 dark:text-gray-100",children:title}),showCloseButton&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_Button__WEBPACK_IMPORTED_MODULE_4__.$,{onClick:onClose,variant:"ghost",size:"sm",className:"ml-auto p-2","aria-label":"Close modal",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_3__.In,{name:"close",size:20})})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"p-6 overflow-y-auto max-h-[calc(95vh-200px)]",children}),footer&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-700",children:footer})]})]})}}}]);