@myzbox/react-overlay 1.0.0

package/dist/react-overlay.umd.js

@@ -0,0 +1,26 @@
+(function(b,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("react-dom")):typeof define=="function"&&define.amd?define(["exports","react","react-dom"],u):(b=typeof globalThis<"u"?globalThis:b||self,u(b.ReactOverlay={},b.React,b.ReactDOM))})(this,(function(b,u,me){"use strict";function pe(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r}var Y={exports:{}},M={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var oe;function be(){if(oe)return M;oe=1;var r=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function s(l,n,t){var o=null;if(t!==void 0&&(o=""+t),n.key!==void 0&&(o=""+n.key),"key"in n){t={};for(var c in n)c!=="key"&&(t[c]=n[c])}else t=n;return n=t.ref,{$$typeof:r,type:l,key:o,ref:n!==void 0?n:null,props:t}}return M.Fragment=a,M.jsx=s,M.jsxs=s,M}var I={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var ne;function he(){return ne||(ne=1,process.env.NODE_ENV!=="production"&&(function(){function r(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case B:return"Profiler";case K:return"StrictMode";case L:return"Suspense";case Q:return"SuspenseList";case w:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case Z:return"Portal";case W:return e.displayName||"Context";case F:return(e._context.displayName||"Context")+".Consumer";case U:var d=e.render;return e=e.displayName,e||(e=d.displayName||d.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ee:return d=e.displayName||null,d!==null?d:r(e.type)||"Memo";case D:d=e._payload,e=e._init;try{return r(e(d))}catch{}}return null}function a(e){return""+e}function s(e){try{a(e);var d=!1}catch{d=!0}if(d){d=console;var p=d.error,h=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return p.call(d,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",h),a(e)}}function l(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===D)return"<...>";try{var d=r(e);return d?"<"+d+">":"<...>"}catch{return"<...>"}}function n(){var e=S.A;return e===null?null:e.getOwner()}function t(){return Error("react-stack-top-frame")}function o(e){if(P.call(e,"key")){var d=Object.getOwnPropertyDescriptor(e,"key").get;if(d&&d.isReactWarning)return!1}return e.key!==void 0}function c(e,d){function p(){ie||(ie=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",d))}p.isReactWarning=!0,Object.defineProperty(e,"key",{get:p,configurable:!0})}function i(){var e=r(this.type);return ue[e]||(ue[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function _(e,d,p,h,X,te){var v=p.ref;return e={$$typeof:$,type:e,key:d,props:p,_owner:h},(v!==void 0?v:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:i}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:te}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function m(e,d,p,h,X,te){var v=d.children;if(v!==void 0)if(h)if(z(v)){for(h=0;h<v.length;h++)g(v[h]);Object.freeze&&Object.freeze(v)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else g(v);if(P.call(d,"key")){v=r(e);var A=Object.keys(d).filter(function(Ce){return Ce!=="key"});h=0<A.length?"{key: someKey, "+A.join(": ..., ")+": ...}":"{key: someKey}",_e[v+h]||(A=0<A.length?"{"+A.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,h,v,A,v),_e[v+h]=!0)}if(v=null,p!==void 0&&(s(p),v=""+p),o(d)&&(s(d.key),v=""+d.key),"key"in d){p={};for(var re in d)re!=="key"&&(p[re]=d[re])}else p=d;return v&&c(p,typeof e=="function"?e.displayName||e.name||"Unknown":e),_(e,v,p,n(),X,te)}function g(e){E(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===D&&(e._payload.status==="fulfilled"?E(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function E(e){return typeof e=="object"&&e!==null&&e.$$typeof===$}var k=u,$=Symbol.for("react.transitional.element"),Z=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),K=Symbol.for("react.strict_mode"),B=Symbol.for("react.profiler"),F=Symbol.for("react.consumer"),W=Symbol.for("react.context"),U=Symbol.for("react.forward_ref"),L=Symbol.for("react.suspense"),Q=Symbol.for("react.suspense_list"),ee=Symbol.for("react.memo"),D=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),O=Symbol.for("react.client.reference"),S=k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,P=Object.prototype.hasOwnProperty,z=Array.isArray,N=console.createTask?console.createTask:function(){return null};k={react_stack_bottom_frame:function(e){return e()}};var ie,ue={},de=k.react_stack_bottom_frame.bind(k,t)(),fe=N(l(t)),_e={};I.Fragment=C,I.jsx=function(e,d,p){var h=1e4>S.recentlyCreatedOwnerStacks++;return m(e,d,p,!1,h?Error("react-stack-top-frame"):de,h?N(l(e)):fe)},I.jsxs=function(e,d,p){var h=1e4>S.recentlyCreatedOwnerStacks++;return m(e,d,p,!0,h?Error("react-stack-top-frame"):de,h?N(l(e)):fe)}})()),I}var se;function ve(){return se||(se=1,process.env.NODE_ENV==="production"?Y.exports=be():Y.exports=he()),Y.exports}var f=ve();const y={overlay:"_overlay_1pta6_15",open:"_open_1pta6_32",center:"_center_1pta6_38",top:"_top_1pta6_44",bottom:"_bottom_1pta6_50",left:"_left_1pta6_55",right:"_right_1pta6_61","top-left":"_top-left_1pta6_66","top-right":"_top-right_1pta6_73","bottom-left":"_bottom-left_1pta6_80","bottom-right":"_bottom-right_1pta6_87",modal:"_modal_1pta6_94",openScale:"_openScale_1pta6_1",sm:"_sm_1pta6_124",md:"_md_1pta6_128",lg:"_lg_1pta6_132",xl:"_xl_1pta6_136",full:"_full_1pta6_140",auto:"_auto_1pta6_147","slide-up":"_slide-up_1pta6_164","slide-down":"_slide-down_1pta6_172",fade:"_fade_1pta6_180","slide-left":"_slide-left_1pta6_188","slide-right":"_slide-right_1pta6_196","drawer-slide-right":"_drawer-slide-right_1pta6_205","drawer-slide-left":"_drawer-slide-left_1pta6_213","drawer-slide-up":"_drawer-slide-up_1pta6_221","drawer-slide-down":"_drawer-slide-down_1pta6_229",header:"_header_1pta6_237",draggable:"_draggable_1pta6_247",title:"_title_1pta6_252",closeButton:"_closeButton_1pta6_259",content:"_content_1pta6_294",footer:"_footer_1pta6_305"};var J={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/var ae;function ge(){return ae||(ae=1,(function(r){(function(){var a={}.hasOwnProperty;function s(){for(var t="",o=0;o<arguments.length;o++){var c=arguments[o];c&&(t=n(t,l(c)))}return t}function l(t){if(typeof t=="string"||typeof t=="number")return t;if(typeof t!="object")return"";if(Array.isArray(t))return s.apply(null,t);if(t.toString!==Object.prototype.toString&&!t.toString.toString().includes("[native code]"))return t.toString();var o="";for(var c in t)a.call(t,c)&&t[c]&&(o=n(o,c));return o}function n(t,o){return o?t?t+" "+o:t+o:t}r.exports?(s.default=s,r.exports=s):window.classNames=s})()})(J)),J.exports}var we=ge();const T=pe(we),q=(r,a)=>{const s=u.useRef(!1),l=u.useRef({x:0,y:0}),n=u.useRef({x:0,y:0}),t=u.useCallback(i=>{if(!s.current||!a.current)return;const _=i.clientX-l.current.x,m=i.clientY-l.current.y,g=n.current.x+_,E=n.current.y+m;a.current.style.transform=`translate(${g}px, ${E}px)`},[a]),o=u.useCallback(i=>{if(!s.current)return;s.current=!1;const _=i.clientX-l.current.x,m=i.clientY-l.current.y;n.current={x:n.current.x+_,y:n.current.y+m},a.current&&(a.current.style.transition=""),document.body.style.userSelect="",window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",o)},[a,t]),c=i=>{!r||!a.current||(s.current=!0,l.current={x:i.clientX,y:i.clientY},a.current.style.transition="none",document.body.style.userSelect="none",window.addEventListener("mousemove",t),window.addEventListener("mouseup",o))};return u.useEffect(()=>()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",o)},[t,o]),u.useEffect(()=>{r||(n.current={x:0,y:0})},[r]),{onMouseDown:c}},V=({isOpen:r,onClose:a,children:s,title:l,footer:n,closeOnOverlayClick:t=!0,closeOnEsc:o=!0,overlayClassName:c,className:i,overlayStyle:_,style:m,position:g="center",size:E="md",animation:k="zoom",initialFocusRef:$,zIndex:Z,draggable:C=!1,hideHeader:K=!1})=>{const[B,F]=u.useState(!1),[W,U]=u.useState(!1),L=u.useRef(null),{onMouseDown:Q}=q(C,L);if(u.useEffect(()=>{if(r)F(!0),requestAnimationFrame(()=>U(!0));else{U(!1);const w=setTimeout(()=>{F(!1)},200);return()=>clearTimeout(w)}},[r]),u.useEffect(()=>{if(!r||!o)return;const w=O=>{O.key==="Escape"&&a()};return document.addEventListener("keydown",w),()=>document.removeEventListener("keydown",w)},[r,o,a]),u.useEffect(()=>{if(!r||!B)return;const w=L.current;if(!w)return;$!=null&&$.current?$.current.focus():w.focus();const O=w.querySelectorAll('a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'),S=O[0],P=O[O.length-1],z=N=>{N.key==="Tab"&&(N.shiftKey?document.activeElement===S&&(N.preventDefault(),P==null||P.focus()):document.activeElement===P&&(N.preventDefault(),S==null||S.focus()))};return w.addEventListener("keydown",z),()=>w.removeEventListener("keydown",z)},[r,B,$]),u.useEffect(()=>{if(r){const w=window.getComputedStyle(document.body).overflow;return document.body.style.overflow="hidden",()=>{document.body.style.overflow=w}}},[r]),!B)return null;const ee=w=>{w.target===w.currentTarget&&t&&a()},D=f.jsx("div",{className:T(y.overlay,{[y.open]:W},y[g],c),style:{zIndex:Z,..._},onClick:ee,role:"presentation",children:f.jsxs("div",{ref:L,className:T(y.modal,{[y.open]:W},y[E],y[k],i),style:m,role:"dialog","aria-modal":"true","aria-labelledby":l?"modal-title":void 0,tabIndex:-1,children:[!K&&f.jsxs("div",{className:T(y.header,{[y.draggable]:C}),onMouseDown:Q,style:{cursor:C?"move":"default"},children:[l?f.jsx("h2",{id:"modal-title",className:y.title,children:l}):f.jsx("div",{}),f.jsx("button",{type:"button",className:y.closeButton,onClick:a,"aria-label":"Close modal",children:f.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[f.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),f.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})})]}),f.jsx("div",{className:y.content,children:s}),n&&f.jsx("div",{className:y.footer,children:n})]})});return me.createPortal(D,document.body)},x={drawer:"_drawer_43ihb_24",left:"_left_43ihb_29",right:"_right_43ihb_30",top:"_top_43ihb_35",bottom:"_bottom_43ihb_36",alertModal:"_alertModal_43ihb_41",alertContent:"_alertContent_43ihb_47",icon:"_icon_43ihb_53",success:"_success_43ihb_64",error:"_error_43ihb_69",warning:"_warning_43ihb_74",info:"_info_43ihb_79",okButton:"_okButton_43ihb_84",confirmButton:"_confirmButton_43ihb_85",cancelButton:"_cancelButton_43ihb_107",destructive:"_destructive_43ihb_126"},Ee=({type:r="info",message:a,onOk:s,okText:l="OK",onClose:n,className:t,showHeader:o=!0,...c})=>{const i=()=>{s==null||s(),n()};return f.jsx(V,{...c,onClose:n,className:T(x.alertModal,x[r],t),size:"sm",hideHeader:!o,footer:f.jsx("button",{className:x.okButton,onClick:i,children:l}),children:f.jsxs("div",{className:x.alertContent,children:[f.jsxs("div",{className:x.icon,children:[r==="success"&&"✓",r==="error"&&"✕",r==="warning"&&"!",r==="info"&&"i"]}),f.jsx("div",{className:x.message,children:a})]})})},ye=({message:r,onConfirm:a,onCancel:s,confirmText:l="Confirm",cancelText:n="Cancel",isDestructive:t=!1,onClose:o,className:c,...i})=>{const[_,m]=u.useState(!1),g=async()=>{try{m(!0),await a(),o()}catch(k){console.error(k)}finally{m(!1)}},E=()=>{s==null||s(),o()};return f.jsx(V,{...i,onClose:o,className:T(x.confirmModal,c),size:"sm",closeOnOverlayClick:!_,closeOnEsc:!_,footer:f.jsxs(f.Fragment,{children:[f.jsx("button",{className:x.cancelButton,onClick:E,disabled:_,children:n}),f.jsx("button",{className:T(x.confirmButton,{[x.destructive]:t}),onClick:g,disabled:_,children:_?"Processing...":l})]}),children:f.jsx("div",{className:x.confirmContent,children:r})})},xe=({placement:r="right",className:a,...s})=>{let l="right",n="slide-right";switch(r){case"left":l="left",n="drawer-slide-left";break;case"top":l="top",n="drawer-slide-down";break;case"bottom":l="bottom",n="drawer-slide-up";break;case"right":default:l="right",n="drawer-slide-right";break}return f.jsx(V,{...s,position:l,animation:n,className:T(x.drawer,x[r],a)})},R={wrapper:"_wrapper_1bfkp_1",trigger:"_trigger_1bfkp_6",popover:"_popover_1bfkp_11",fadeIn:"_fadeIn_1bfkp_1",draggable:"_draggable_1bfkp_24",bottom:"_bottom_1bfkp_30",top:"_top_1bfkp_37",left:"_left_1bfkp_44",right:"_right_1bfkp_51"},le=(r,a)=>{u.useEffect(()=>{const s=l=>{!r.current||r.current.contains(l.target)||a(l)};return document.addEventListener("mousedown",s),document.addEventListener("touchstart",s),()=>{document.removeEventListener("mousedown",s),document.removeEventListener("touchstart",s)}},[r,a])},Te=({children:r,content:a,position:s="bottom",className:l,style:n,width:t,draggable:o=!1})=>{const[c,i]=u.useState(!1),_=u.useRef(null),m=u.useRef(null);le(_,()=>{c&&i(!1)});const{onMouseDown:g}=q(o,m),E=()=>i(!c);return f.jsxs("div",{className:R.wrapper,ref:_,children:[f.jsx("div",{onClick:E,className:R.trigger,children:r}),c&&f.jsx("div",{ref:m,className:T(R.popover,R[s],l,{[R.draggable]:o}),style:{width:t,...n},role:"dialog","aria-modal":"false",onMouseDown:g,children:typeof a=="function"?a(()=>i(!1)):a})]})},j={toast:"_toast_15h14_1",slideIn:"_slideIn_15h14_1",draggable:"_draggable_15h14_19",exiting:"_exiting_15h14_24",success:"_success_15h14_31",error:"_error_15h14_35",warning:"_warning_15h14_39",info:"_info_15h14_43",icon:"_icon_15h14_47",content:"_content_15h14_78",closeBtn:"_closeBtn_15h14_85",container:"_container_15h14_119","top-left":"_top-left_15h14_129","top-right":"_top-right_15h14_135","top-center":"_top-center_15h14_141","bottom-left":"_bottom-left_15h14_148","bottom-right":"_bottom-right_15h14_155","bottom-center":"_bottom-center_15h14_162",slideInBottom:"_slideInBottom_15h14_1"},ce=({id:r,type:a,content:s,duration:l=3e3,onDismiss:n,draggable:t=!1})=>{const[o,c]=u.useState(!1),i=u.useRef(null),{onMouseDown:_}=q(t,i),m=u.useCallback(()=>{c(!0),setTimeout(()=>{n(r)},300)},[r,n]);return u.useEffect(()=>{if(l>0){const g=setTimeout(()=>{m()},l);return()=>clearTimeout(g)}},[l,m]),f.jsxs("div",{ref:i,className:T(j.toast,j[a],{[j.exiting]:o,[j.draggable]:t}),role:"alert",onMouseDown:_,children:[f.jsxs("div",{className:j.icon,children:[a==="success"&&"✓",a==="error"&&"✕",a==="warning"&&"!",a==="info"&&"i"]}),f.jsx("div",{className:j.content,children:s}),f.jsx("button",{className:j.closeBtn,onClick:m,children:"×"})]})},G=u.createContext(void 0);let ke=0;const je=({children:r})=>{const[a,s]=u.useState([]),l=u.useCallback(({closeOthers:c,delay:i=0,..._})=>{const m=`toast-${ke++}`,g={..._,duration:_.duration,delay:i,id:m},E=()=>{s(k=>c?[g]:[...k,g])};i>0?setTimeout(E,i):E()},[]),n=u.useCallback(c=>{s(i=>i.filter(_=>_.id!==c))},[]),t=u.useCallback(()=>{s([])},[]),o=a.reduce((c,i)=>{const _=i.position||"top-right";return c[_]||(c[_]=[]),c[_].push(i),c},{});return f.jsxs(G.Provider,{value:{addToast:l,removeToast:n,clearAll:t},children:[r,Object.keys(o).map(c=>f.jsx("div",{className:T(j.container,j[c]),children:o[c].map(i=>f.jsx(ce,{...i,onDismiss:n},i.id))},c))]})},$e=()=>{const r=u.useContext(G);if(!r)throw new Error("useToast must be used within a ToastProvider");const{addToast:a,removeToast:s,clearAll:l}=r,n=(t,o,c={})=>{let i,_={...c};if(typeof o=="object"&&o!==null&&"content"in o&&!u.isValidElement(o)){const m=o;i=m.content,_={..._,...m}}else i=o;a({type:t,content:i,duration:3e3,position:"top-right",..._})};return{success:(t,o)=>n("success",t,o),error:(t,o)=>n("error",t,o),warning:(t,o)=>n("warning",t,o),info:(t,o)=>n("info",t,o),dismiss:t=>s(t),dismissAll:()=>l()}},H={wrapper:"_wrapper_1dham_1",tooltip:"_tooltip_1dham_6",fadeIn:"_fadeIn_1dham_1",top:"_top_1dham_22",bottom:"_bottom_1dham_28",left:"_left_1dham_34",right:"_right_1dham_40"},Se=({children:r,content:a,position:s="top",delay:l=200,width:n,height:t,className:o,style:c})=>{const[i,_]=u.useState(!1),m=u.useRef(null),g=()=>{m.current=setTimeout(()=>{_(!0)},l)},E=()=>{m.current&&clearTimeout(m.current),_(!1)};return f.jsxs("div",{className:H.wrapper,onMouseEnter:g,onMouseLeave:E,onFocus:g,onBlur:E,children:[r,i&&f.jsx("div",{className:T(H.tooltip,H[s],o),style:{width:n,height:t,...c},role:"tooltip",children:a})]})},Ne=(r=!1)=>{const[a,s]=u.useState(r),l=u.useCallback(()=>s(!0),[]),n=u.useCallback(()=>s(!1),[]),t=u.useCallback(()=>s(o=>!o),[]);return{isOpen:a,open:l,close:n,toggle:t}};b.AlertModal=Ee,b.ConfirmModal=ye,b.Drawer=xe,b.Modal=V,b.Popover=Te,b.Toast=ce,b.ToastContext=G,b.ToastProvider=je,b.Tooltip=Se,b.useClickOutside=le,b.useDraggable=q,b.useModal=Ne,b.useToast=$e,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@myzbox/react-overlay",
+  "version": "1.0.0",
+  "description": "A comprehensive React overlay library with modals, drawers, tooltips, popovers, and toast notifications",
+  "keywords": [
+    "react",
+    "modal",
+    "dialog",
+    "overlay",
+    "drawer",
+    "tooltip",
+    "popover",
+    "toast",
+    "notification",
+    "alert",
+    "confirm",
+    "draggable",
+    "accessible",
+    "typescript",
+    "react-component",
+    "ui",
+    "myzbox"
+  ],
+  "author": "myzbox",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/myzbox/react-overlay"
+  },
+  "bugs": {
+    "url": "https://github.com/myzbox/react-overlay/issues"
+  },
+  "homepage": "https://github.com/myzbox/react-overlay#readme",
+  "type": "module",
+  "main": "./dist/react-overlay.umd.js",
+  "module": "./dist/react-overlay.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react-overlay.es.js",
+      "require": "./dist/react-overlay.umd.js"
+    },
+    "./dist/react-overlay.css": "./dist/react-overlay.css",
+    "./dist/style.css": "./dist/react-overlay.css",
+    "./types/*": "./src/types/*",
+    "./styles/*": "./src/styles/*",
+    "./hooks/*": "./src/hooks/*"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.1",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.4.0"
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,11 @@
+export * from './modal/Modal';
+export type { ModalProps, ModalSize, ModalPosition, ModalAnimation } from '../types/Modal';
+export * from './modal-variants/AlertModal';
+export * from './modal-variants/ConfirmModal';
+export * from './modal-variants/Drawer';
+export * from './popover/Popover';
+export type { PopoverProps } from '../types/Popover';
+export * from './toast';
+export type { ToastPosition, ToastOptions } from '../types/Toast';
+export * from './tooltip/Tooltip';
+export type { TooltipProps } from '../types/Tooltip';

package/src/components/modal/Modal.tsx

@@ -0,0 +1,186 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import styles from '../../styles/Modal.module.css';
+import type { ModalProps } from '../../types/Modal';
+import classNames from 'classnames';
+import { useDraggable } from '../../hooks/useDraggable';
+
+export const Modal: React.FC<ModalProps> = ({
+    isOpen,
+    onClose,
+    children,
+    title,
+    footer,
+    closeOnOverlayClick = true,
+    closeOnEsc = true,
+    overlayClassName,
+    className,
+    overlayStyle,
+    style,
+    position = 'center',
+    size = 'md',
+    animation = 'zoom',
+    initialFocusRef,
+
+    zIndex,
+    draggable = false,
+    hideHeader = false,
+}) => {
+    const [mounted, setMounted] = useState(false);
+    const [visible, setVisible] = useState(false);
+    const modalRef = useRef<HTMLDivElement>(null);
+    const { onMouseDown } = useDraggable(draggable, modalRef as React.RefObject<HTMLElement>);
+
+    // Handle mounting for transition
+    useEffect(() => {
+        if (isOpen) {
+            setMounted(true);
+            // Small delay to allow CSS transition to initiate
+            requestAnimationFrame(() => setVisible(true));
+        } else {
+            setVisible(false);
+            const timer = setTimeout(() => {
+                setMounted(false);
+            }, 200); // Match CSS transition duration
+            return () => clearTimeout(timer);
+        }
+    }, [isOpen]);
+
+    // Handle ESC key
+    useEffect(() => {
+        if (!isOpen || !closeOnEsc) return;
+
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, closeOnEsc, onClose]);
+
+    // Handle Focus Trap (Senior level implementation: simple but effective manual trap for minimal deps)
+    useEffect(() => {
+        if (!isOpen || !mounted) return;
+
+        const modalElement = modalRef.current;
+        if (!modalElement) return;
+
+        // Focus initial element or modal itself
+        if (initialFocusRef?.current) {
+            initialFocusRef.current.focus();
+        } else {
+            modalElement.focus();
+        }
+
+        const focusableElements = modalElement.querySelectorAll(
+            'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
+        );
+        const firstElement = focusableElements[0] as HTMLElement;
+        const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+        const handleTab = (e: KeyboardEvent) => {
+            if (e.key === 'Tab') {
+                if (e.shiftKey) {
+                    if (document.activeElement === firstElement) {
+                        e.preventDefault();
+                        lastElement?.focus();
+                    }
+                } else {
+                    if (document.activeElement === lastElement) {
+                        e.preventDefault();
+                        firstElement?.focus();
+                    }
+                }
+            }
+        };
+
+        modalElement.addEventListener('keydown', handleTab);
+        return () => modalElement.removeEventListener('keydown', handleTab);
+    }, [isOpen, mounted, initialFocusRef]);
+
+    // Lock Body Scroll
+    useEffect(() => {
+        if (isOpen) {
+            const originalStyle = window.getComputedStyle(document.body).overflow;
+            document.body.style.overflow = 'hidden';
+            return () => {
+                document.body.style.overflow = originalStyle;
+            };
+        }
+    }, [isOpen]);
+
+    if (!mounted) return null;
+
+    const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (e.target === e.currentTarget && closeOnOverlayClick) {
+            onClose();
+        }
+    };
+
+    const portalContent = (
+        <div
+            className={classNames(styles.overlay, { [styles.open]: visible }, styles[position], overlayClassName)}
+            style={{ zIndex, ...overlayStyle }}
+            onClick={handleOverlayClick}
+            role="presentation"
+        >
+            <div
+                ref={modalRef}
+                className={classNames(
+                    styles.modal,
+                    { [styles.open]: visible },
+                    styles[size],
+                    styles[animation],
+                    className
+                )}
+                style={style}
+                role="dialog"
+                aria-modal="true"
+                aria-labelledby={title ? 'modal-title' : undefined}
+                tabIndex={-1}
+            >
+                {!hideHeader && (
+                    <div
+                        className={classNames(styles.header, { [styles.draggable]: draggable })}
+                        onMouseDown={onMouseDown}
+                        style={{ cursor: draggable ? 'move' : 'default' }}
+                    >
+                        {title ? (
+                            <h2 id="modal-title" className={styles.title}>{title}</h2>
+                        ) : (
+                            <div /> // Placeholder to keep button on right
+                        )}
+                        <button
+                            type="button"
+                            className={styles.closeButton}
+                            onClick={onClose}
+                            aria-label="Close modal"
+                        >
+                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                                <line x1="18" y1="6" x2="6" y2="18"></line>
+                                <line x1="6" y1="6" x2="18" y2="18"></line>
+                            </svg>
+                        </button>
+                    </div>
+                )}
+
+                <div className={styles.content}>
+                    {children}
+                </div>
+
+                {footer && (
+                    <div className={styles.footer}>
+                        {footer}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+
+    return createPortal(portalContent, document.body);
+};
+
+export default Modal;
+

package/src/components/modal-variants/AlertModal.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Modal } from '../modal/Modal';
+import type { ModalProps } from '../../types/Modal';
+import styles from '../../styles/ModalVariants.module.css';
+import classNames from 'classnames';
+
+export type AlertType = 'success' | 'error' | 'warning' | 'info';
+
+export interface AlertModalProps extends Omit<ModalProps, 'children' | 'footer'> {
+    type?: AlertType;
+    message: React.ReactNode;
+    onOk?: () => void;
+    okText?: string;
+    showHeader?: boolean;
+}
+
+export const AlertModal: React.FC<AlertModalProps> = ({
+    type = 'info',
+    message,
+    onOk,
+    okText = 'OK',
+    onClose,
+    className,
+    showHeader = true,
+    ...props
+}) => {
+    const handleOk = () => {
+        onOk?.();
+        onClose();
+    };
+
+    return (
+        <Modal
+            {...props}
+            onClose={onClose}
+            className={classNames(styles.alertModal, styles[type], className)}
+            size="sm"
+            hideHeader={!showHeader}
+            footer={
+                <button className={styles.okButton} onClick={handleOk}>
+                    {okText}
+                </button>
+            }
+        >
+            <div className={styles.alertContent}>
+                <div className={styles.icon}>
+                    {type === 'success' && '✓'}
+                    {type === 'error' && '✕'}
+                    {type === 'warning' && '!'}
+                    {type === 'info' && 'i'}
+                </div>
+                <div className={styles.message}>{message}</div>
+            </div>
+        </Modal>
+    );
+};

package/src/components/modal-variants/ConfirmModal.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { Modal } from '../modal/Modal';
+import type { ModalProps } from '../../types/Modal';
+import styles from '../../styles/ModalVariants.module.css';
+import classNames from 'classnames';
+
+export interface ConfirmModalProps extends Omit<ModalProps, 'children' | 'footer'> {
+    message: React.ReactNode;
+    onConfirm: () => void | Promise<void>;
+    onCancel?: () => void;
+    confirmText?: string;
+    cancelText?: string;
+    isDestructive?: boolean;
+}
+
+export const ConfirmModal: React.FC<ConfirmModalProps> = ({
+    message,
+    onConfirm,
+    onCancel,
+    confirmText = 'Confirm',
+    cancelText = 'Cancel',
+    isDestructive = false,
+    onClose,
+    className,
+    ...props
+}) => {
+    const [loading, setLoading] = useState(false);
+
+    const handleConfirm = async () => {
+        try {
+            setLoading(true);
+            await onConfirm();
+            onClose();
+        } catch (e) {
+            console.error(e);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleCancel = () => {
+        onCancel?.();
+        onClose();
+    };
+
+    return (
+        <Modal
+            {...props}
+            onClose={onClose}
+            className={classNames(styles.confirmModal, className)}
+            size="sm"
+            closeOnOverlayClick={!loading}
+            closeOnEsc={!loading}
+            footer={
+                <>
+                    <button
+                        className={styles.cancelButton}
+                        onClick={handleCancel}
+                        disabled={loading}
+                    >
+                        {cancelText}
+                    </button>
+                    <button
+                        className={classNames(styles.confirmButton, { [styles.destructive]: isDestructive })}
+                        onClick={handleConfirm}
+                        disabled={loading}
+                    >
+                        {loading ? 'Processing...' : confirmText}
+                    </button>
+                </>
+            }
+        >
+            <div className={styles.confirmContent}>
+                {message}
+            </div>
+        </Modal>
+    );
+};

package/src/components/modal-variants/Drawer.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Modal } from '../modal/Modal';
+import type { ModalProps, ModalPosition } from '../../types/Modal';
+import classNames from 'classnames';
+import styles from '../../styles/ModalVariants.module.css'; // We might want shared drawer styles here or in Modal.module.css
+
+export interface DrawerProps extends ModalProps {
+    placement?: 'left' | 'right' | 'top' | 'bottom';
+}
+
+export const Drawer: React.FC<DrawerProps> = ({
+    placement = 'right',
+    className,
+    ...props
+}) => {
+
+    // Map placement to Modal position and animation
+    let position: ModalPosition = 'right';
+    let animation: ModalProps['animation'] = 'slide-right';
+
+    switch (placement) {
+        case 'left':
+            position = 'left';
+            animation = 'drawer-slide-left' as ModalProps['animation'];
+            break;
+        case 'top':
+            position = 'top';
+            animation = 'drawer-slide-down' as ModalProps['animation'];
+            break;
+        case 'bottom':
+            position = 'bottom';
+            animation = 'drawer-slide-up' as ModalProps['animation'];
+            break;
+        case 'right':
+        default:
+            position = 'right';
+            animation = 'drawer-slide-right' as ModalProps['animation'];
+            break;
+    }
+
+    return (
+        <Modal
+            {...props}
+            position={position}
+            animation={animation}
+            className={classNames(styles.drawer, styles[placement], className)}
+        // Drawers usually are full height (for left/right) or full width (for top/bottom)
+        // But we can let styles handle that based on position
+        />
+    );
+};

package/src/components/popover/Popover.tsx

@@ -0,0 +1,54 @@
+import React, { useState, useRef } from 'react';
+import type { PopoverProps } from '../../types/Popover';
+import styles from '../../styles/Popover.module.css';
+import classNames from 'classnames';
+import { useClickOutside } from '../../hooks/useClickOutside';
+import { useDraggable } from '../../hooks/useDraggable';
+
+export const Popover: React.FC<PopoverProps> = ({
+    children,
+    content,
+    position = 'bottom',
+    className,
+    style,
+    width,
+    draggable = false,
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const contentRef = useRef<HTMLDivElement>(null);
+
+    useClickOutside(containerRef as React.RefObject<HTMLElement>, () => {
+        if (isOpen) setIsOpen(false);
+    });
+
+    const { onMouseDown } = useDraggable(draggable, contentRef as React.RefObject<HTMLElement>);
+
+    const toggleOpen = () => setIsOpen(!isOpen);
+
+    return (
+        <div className={styles.wrapper} ref={containerRef}>
+            <div onClick={toggleOpen} className={styles.trigger}>
+                {children}
+            </div>
+
+            {isOpen && (
+                <div
+                    ref={contentRef}
+                    className={classNames(
+                        styles.popover,
+                        styles[position],
+                        className,
+                        { [styles.draggable]: draggable }
+                    )}
+                    style={{ width, ...style }}
+                    role="dialog"
+                    aria-modal="false"
+                    onMouseDown={onMouseDown}
+                >
+                    {typeof content === 'function' ? content(() => setIsOpen(false)) : content}
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/toast/Toast.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from 'react';
+import type { ToastProps } from '../../types/Toast';
+import styles from '../../styles/Toast.module.css';
+import classNames from 'classnames';
+import { useDraggable } from '../../hooks/useDraggable';
+import { useRef } from 'react';
+
+export const Toast: React.FC<ToastProps> = ({
+    id,
+    type,
+    content,
+    duration = 3000,
+    onDismiss,
+    draggable = false,
+}) => {
+    const [isExiting, setIsExiting] = useState(false);
+    const toastRef = useRef<HTMLDivElement>(null);
+    const { onMouseDown } = useDraggable(draggable, toastRef as React.RefObject<HTMLElement>);
+
+    const handleDismiss = React.useCallback(() => {
+        setIsExiting(true);
+        // Wait for animation to finish before removing from DOM
+        setTimeout(() => {
+            onDismiss(id);
+        }, 300); // 300ms matches CSS animation
+    }, [id, onDismiss]);
+
+    useEffect(() => {
+        if (duration > 0) {
+            const timer = setTimeout(() => {
+                handleDismiss();
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [duration, handleDismiss]);
+
+    return (
+        <div
+            ref={toastRef}
+            className={classNames(
+                styles.toast,
+                styles[type],
+                {
+                    [styles.exiting]: isExiting,
+                    [styles.draggable]: draggable
+                }
+            )}
+            role="alert"
+            onMouseDown={onMouseDown}
+        >
+            <div className={styles.icon}>
+                {type === 'success' && '✓'}
+                {type === 'error' && '✕'}
+                {type === 'warning' && '!'}
+                {type === 'info' && 'i'}
+            </div>
+            <div className={styles.content}>{content}</div>
+            <button className={styles.closeBtn} onClick={handleDismiss}>×</button>
+        </div>
+    );
+};