react-pure-modal 3.0.1 → 3.0.2

package/README.md

@@ -47,19 +47,18 @@ https://memcrab.github.io/react-pure-modal/
 
 ## Options
 
-- `isOpen` (boolean, required) - controls whether the modal is rendered.
-- `onClose` (() => boolean | void) - called when the user clicks the close button, presses ESC, or (optionally) clicks the backdrop; set `isOpen` to `false` inside it.
+- `isOpen` (boolean) - controls whether the modal is rendered; defaults to `false`.
+- `onClose` (VoidFunction) - called when the user clicks the close button, presses ESC, or (optionally) clicks the backdrop; set `isOpen` to `false` inside it. Any return value is ignored.
 - `closeOnBackdropClick` (boolean) - if `true`, clicking the backdrop calls `onClose` (default is `false`).
-- `style` (React.CSSProperties) - inline styles applied to the backdrop element; use this to set CSS custom properties (listed below) or to tweak things like `zIndex`.
+- `style` (CSS custom properties) - inline CSS variables applied to the backdrop element; use this to set the variables listed below. TypeScript users can reference the exported `ModalCssVariable` union for autocomplete.
 - `children` - compose the modal from the provided compounds: `Modal.Close`, `Modal.Header`, `Modal.Content`, and `Modal.Footer`.
 
 ## CSS Variables
 
-All variables can be provided through the `style` prop (e.g. `style={{ "--radius": "16px" }}`).
+All variables can be provided through the `style` prop (e.g. `style={{ "--radius": "16px" }}`). Close button variables apply when `Modal.Close` is rendered.
 
 - `--radius` - border radius of the modal container (mobile uses `12px 12px 0 0`).
 - `--aspect-ratio` - forced aspect ratio for the modal grid.
-- `--backdrop-blur` - available for custom use if you want to reference a blur amount.
 - `--backdrop-filter` - value for the backdrop `backdrop-filter` property.
 - `--backdrop-color` - background color of the overlay.
 - `--box-shadow` - shadow applied to the modal panel.
@@ -68,14 +67,19 @@ All variables can be provided through the `style` prop (e.g. `style={{ "--radius
 - `--min-width` - minimum width of the modal.
 - `--background` - modal surface background.
 - `--background-panels` - background for header and footer panels.
-- `--contrast-color` - high-contrast color derived from `--background-panels` (used to build borders and hover states); override to steer the automatic mix.
+- `--close-button-background` - background for the close icon circle.
+- `--close-button-border` - border applied to the close icon circle (defaults to `var(--dividers-border)`).
+- `--close-button-size` - diameter of the close icon circle.
+- `--close-button-container-padding` - extra tap target padding around the close icon.
+- `--close-button-container-transform` - transform applied to the close button container (for positional nudges).
+- `--close-button-hover-transform` - transform applied to the close icon on hover.
 - `--z-index` - base stacking level for the backdrop (panel uses `+1`).
 - `--top-content-padding` / `--bottom-content-padding` - vertical padding for the content area.
 - `--top-header-padding` / `--bottom-header-padding` - vertical padding for the header.
 - `--top-footer-padding` / `--bottom-footer-padding` - vertical padding for the footer.
 - `--left-padding` / `--right-padding` - horizontal padding shared across sections.
-- `--dividers-color` - border tone mixed from `--background-panels` and `--contrast-color` by default; override to force a specific divider color.
-- `--border` - border applied to header, footer, and close button; defaults to `1px solid var(--dividers-color)`.
+- `--dividers-color` - border color for header/footer dividers (also used as the default close icon border).
+- `--dividers-border` - border applied to header/footer dividers (defaults to `1px solid var(--dividers-color)`).
 
 
 ## Changelog (latest on top)
@@ -127,6 +131,12 @@ Build the library in watch mode:
 pnpm dev
 ```
 
+Run type checks:
+
+```bash
+pnpm typecheck
+```
+
 ## Publishing a new version
 
 1. Bump the package version and rebuild: `npm version <patch|minor|major>` then `npm run build`; commit the updated files (including `dist`) and push to `master`/`main`.

package/dist/index.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{createContext as o,useCallback as r,useContext as t,useEffect as n,useId as a,useLayoutEffect as d,useMemo as i,useRef as l}from"react";var s={"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].use[2]!./src/compounds/Modal.module.css":function(e,o,r){r.d(o,{A:()=>i});var t=r("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/noSourceMaps.js"),n=r.n(t),a=r("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/api.js"),d=r.n(a)()(n());d.push([e.id,"body:has(.pureModalBackdrop-RW7tAF){overflow:hidden}.pureModalBackdrop-RW7tAF{--radius:12px;--aspect-ratio:auto;--backdrop-blur:2px;--backdrop-color:#0006;--box-shadow:0px 1px 2px #00000024,0px 8px 20px #0000002e,0px 20px 48px #00000038;--max-width:95vw;--max-height:90vh;--min-width:320px;--background:white;--background-panels:#ffffffe6;--z-index:1041;--top-content-padding:16px;--bottom-content-padding:16px;--top-header-padding:16px;--bottom-header-padding:16px;--top-footer-padding:16px;--bottom-footer-padding:16px;--left-padding:24px;--base-right-padding:24px;--right-padding:var(--base-right-padding);--close-button-background:var(--background-panels,white);--close-button-size:30px;--close-button-hit-padding:calc(var(--right-padding)/2);--close-button-space:var(--close-button-size);--contrast-color:oklch(from var(--background-panels)clamp(.08,calc(1 - l),.92)c h);--dividers-color:color-mix(in oklch,var(--background-panels)78%,var(--contrast-color)22%);--border:1px solid var(--dividers-color);--backdrop-filter:blur(3px);backdrop-filter:var(--backdrop-filter);z-index:var(--z-index);background-color:var(--backdrop-color);flex-direction:column;justify-content:center;align-items:center;animation:.26s cubic-bezier(.16,.84,.44,1) both backdropFadeSmooth-ZnEuSQ;display:flex;position:fixed;inset:0;overflow:auto}@keyframes backdropFadeSmooth-ZnEuSQ{0%{opacity:0;-webkit-backdrop-filter:blur();background-color:#0000}to{opacity:1;backdrop-filter:var(--backdrop-filter);background-color:var(--backdrop-color)}}.pureModal-Hr1gWI{z-index:calc(var(--z-index) + 1);background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--radius);max-height:var(--max-height);max-width:max(320px,var(--max-width));min-width:var(--min-width);aspect-ratio:var(--aspect-ratio);grid-template-rows:auto minmax(0,1fr) minmax(0,max-content);grid-template-columns:1fr;grid-auto-flow:row;display:grid;overflow:auto;&:has(>.pureModalHeader-DahjVw)>.pureModalContent-t7nwPr{grid-row:2}animation:.24s cubic-bezier(.18,.77,.42,1) both panelSoftPop-JNSB6U}@keyframes panelSoftPop-JNSB6U{0%{opacity:0;transform:translateY(8px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.pureModalHeader-DahjVw{padding:var(--top-header-padding)var(--right-padding)var(--bottom-header-padding)var(--left-padding);border-bottom:var(--border);background:var(--background-panels);box-sizing:border-box;grid-area:1/1;align-items:center;width:100%;display:flex}.pureModalContent-t7nwPr{padding:var(--top-content-padding)var(--right-padding)var(--bottom-content-padding)var(--left-padding);box-sizing:border-box;overscroll-behavior:contain;width:100%;grid-area:1/1/2/-1;min-block-size:0;overflow:auto}.pureModalFooter-hj8jgh{padding:var(--top-footer-padding)var(--right-padding)calc(var(--bottom-footer-padding) + env(safe-area-inset-bottom))var(--left-padding);border-top:var(--border);background:var(--background-panels);box-sizing:border-box;grid-area:3/1/auto/-1;width:100%;display:block}@media (width<=600px){.pureModalBackdrop-RW7tAF{--radius:12px 12px 0 0;justify-content:end}.pureModal-Hr1gWI{--aspect-ratio:auto;min-width:var(--max-width);animation:.28s cubic-bezier(.25,.85,.35,1) panelSheetIn-loLXeB}@keyframes panelSheetIn-loLXeB{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}}.pureModal-Hr1gWI:has(.pureCloseButton-Ac2K32) .pureModalHeader-DahjVw{--right-padding:calc(var(--base-right-padding) + var(--close-button-space))}.pureCloseButton-Ac2K32{padding:var(--close-button-hit-padding);z-index:3;grid-area:1/1/auto/-1;place-self:start end;align-items:center;display:flex}.pureCloseButtonIcon-m_tk65{font-weight:700;font-size:calc(var(--close-button-size)/2);height:var(--close-button-size);color:var(--dividers-color);width:var(--close-button-size);cursor:pointer;text-align:center;line-height:calc(var(--close-button-size) - 1px);aspect-ratio:1;border:var(--border);background:var(--close-button-background);border-radius:50%;padding:0;transition:all .1s ease-in-out;&:hover{color:var(--contrast-color);border-color:var(--contrast-color)}}",""]),d.locals={pureModalBackdrop:"pureModalBackdrop-RW7tAF",backdropFadeSmooth:"backdropFadeSmooth-ZnEuSQ",pureModal:"pureModal-Hr1gWI",panelSoftPop:"panelSoftPop-JNSB6U",pureModalHeader:"pureModalHeader-DahjVw",pureModalContent:"pureModalContent-t7nwPr",pureModalFooter:"pureModalFooter-hj8jgh",panelSheetIn:"panelSheetIn-loLXeB",pureCloseButton:"pureCloseButton-Ac2K32",pureCloseButtonIcon:"pureCloseButtonIcon-m_tk65"};let i=d},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/api.js":function(e){e.exports=function(e){var o=[];return o.toString=function(){return this.map(function(o){var r="",t=void 0!==o[5];return o[4]&&(r+="@supports (".concat(o[4],") {")),o[2]&&(r+="@media ".concat(o[2]," {")),t&&(r+="@layer".concat(o[5].length>0?" ".concat(o[5]):""," {")),r+=e(o),t&&(r+="}"),o[2]&&(r+="}"),o[4]&&(r+="}"),r}).join("")},o.i=function(e,r,t,n,a){"string"==typeof e&&(e=[[null,e,void 0]]);var d={};if(t)for(var i=0;i<this.length;i++){var l=this[i][0];null!=l&&(d[l]=!0)}for(var s=0;s<e.length;s++){var c=[].concat(e[s]);t&&d[c[0]]||(void 0!==a&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=a),r&&(c[2]&&(c[1]="@media ".concat(c[2]," {").concat(c[1],"}")),c[2]=r),n&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=n):c[4]="".concat(n)),o.push(c))}},o}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/noSourceMaps.js":function(e){e.exports=function(e){return e[1]}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/injectStylesIntoStyleTag.js":function(e){var o=[];function r(e){for(var r=-1,t=0;t<o.length;t++)if(o[t].identifier===e){r=t;break}return r}function t(e,t){for(var n={},a=[],d=0;d<e.length;d++){var i=e[d],l=t.base?i[0]+t.base:i[0],s=n[l]||0,c="".concat(l," ").concat(s);n[l]=s+1;var u=r(c),p={css:i[1],media:i[2],sourceMap:i[3],supports:i[4],layer:i[5]};if(-1!==u)o[u].references++,o[u].updater(p);else{var m=function(e,o){var r=o.domAPI(o);return r.update(e),function(o){o?(o.css!==e.css||o.media!==e.media||o.sourceMap!==e.sourceMap||o.supports!==e.supports||o.layer!==e.layer)&&r.update(e=o):r.remove()}}(p,t);t.byIndex=d,o.splice(d,0,{identifier:c,updater:m,references:1})}a.push(c)}return a}e.exports=function(e,n){var a=t(e=e||[],n=n||{});return function(e){e=e||[];for(var d=0;d<a.length;d++){var i=r(a[d]);o[i].references--}for(var l=t(e,n),s=0;s<a.length;s++){var c=r(a[s]);0===o[c].references&&(o[c].updater(),o.splice(c,1))}a=l}}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertBySelector.js":function(e){var o={};e.exports=function(e,r){var t=function(e){if(void 0===o[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}o[e]=r}return o[e]}(e);if(!t)throw Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(r)}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertStyleElement.js":function(e){e.exports=function(e){var o=document.createElement("style");return e.setAttributes(o,e.attributes),e.insert(o,e.options),o}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/setAttributesWithoutAttributes.js":function(e,o,r){e.exports=function(e){var o=r.nc;o&&e.setAttribute("nonce",o)}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleDomAPI.js":function(e){e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var o=e.insertStyleElement(e);return{update:function(r){var t,n,a;t="",r.supports&&(t+="@supports (".concat(r.supports,") {")),r.media&&(t+="@media ".concat(r.media," {")),(n=void 0!==r.layer)&&(t+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),t+=r.css,n&&(t+="}"),r.media&&(t+="}"),r.supports&&(t+="}"),(a=r.sourceMap)&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(t,o,e.options)},remove:function(){var e;null===(e=o).parentNode||e.parentNode.removeChild(e)}}}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleTagTransform.js":function(e){e.exports=function(e,o){if(o.styleSheet)o.styleSheet.cssText=e;else{for(;o.firstChild;)o.removeChild(o.firstChild);o.appendChild(document.createTextNode(e))}}}},c={};function u(e){var o=c[e];if(void 0!==o)return o.exports;var r=c[e]={id:e,exports:{}};return s[e](r,r.exports,u),r.exports}u.n=e=>{var o=e&&e.__esModule?()=>e.default:()=>e;return u.d(o,{a:o}),o},u.d=(e,o)=>{for(var r in o)u.o(o,r)&&!u.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:o[r]})},u.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),u.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.nc=void 0;var p={};u.r(p),u.d(p,{default:()=>N});var m=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/injectStylesIntoStyleTag.js"),b=u.n(m),f=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleDomAPI.js"),v=u.n(f),g=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertBySelector.js"),h=u.n(g),x=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/setAttributesWithoutAttributes.js"),y=u.n(x),k=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertStyleElement.js"),M=u.n(k),S=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleTagTransform.js"),w=u.n(S),_=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].use[2]!./src/compounds/Modal.module.css"),j={};j.styleTagTransform=w(),j.setAttributes=y(),j.insert=h().bind(null,"head"),j.domAPI=v(),j.insertStyleElement=M(),b()(_.A,j);let C=_.A&&_.A.locals?_.A.locals:void 0,B=o(void 0);function I(e){if(!e)return -99999;let o=Number.parseInt(getComputedStyle(e).zIndex||"0",10);return Number.isNaN(o)?-99999:o}function z(e){return Math.max(Math.max(...Array.from(document.querySelectorAll(e)).map(e=>I(e))),1)}function A({children:o}){let{isOpen:a,onClose:i,style:s,closeOnBackdropClick:c}=t(B)??{},u=l(null),p=r(e=>{if(function(e){if(!e)return!1;let o=e.tagName.toLowerCase();return"input"===o||"textarea"===o||"select"===o||!!e.isContentEditable}(document.activeElement))return;let o=I(u.current),r=z(`.${C.pureModalBackdrop}`);return!!i&&"Escape"===e.key&&o===r&&(i(),!0)},[i]);return n(()=>{if(a)return document.addEventListener("keydown",p),()=>{document.removeEventListener("keydown",p)}},[a,p]),d(()=>{let e="number"==typeof s?.zIndex?s.zIndex:z(`.${C.pureModalBackdrop}`);u.current&&(u.current.style.zIndex=String(e+1))},[s?.zIndex]),e("div",{ref:u,className:C.pureModalBackdrop,onMouseDown:e=>{if(c){if(e){if(!e.target.classList.contains(C.pureModalBackdrop))return;e.stopPropagation(),e.preventDefault()}i?.()}},"aria-modal":"true",role:"dialog",style:s,children:o})}function N(o){let r=a(),t=i(()=>({isOpen:!!o.isOpen,onClose:o.onClose,closeOnBackdropClick:!!o.closeOnBackdropClick,style:o.style}),[o.isOpen,o.onClose,o.closeOnBackdropClick,o.style]);return t.isOpen?e(B.Provider,{value:t,children:e(A,{children:e("div",{id:`pure-modal-${r}`,className:C.pureModal,children:o.children})})}):null}N.Footer=function({children:o}){return e("div",{className:C.pureModalFooter,children:o})},N.Header=function({children:o}){return e("div",{className:C.pureModalHeader,children:o})},N.Backdrop=A,N.Content=function({children:o}){return e("div",{className:C.pureModalContent,children:o})},N.Close=function({children:o}){let{onClose:r}=t(B)??{};return e("div",{className:C.pureCloseButton,children:o||e("button",{type:"button",onClick:r,className:C.pureCloseButtonIcon,children:"✕"})})};export{p as Modal};
+import{jsx as e}from"react/jsx-runtime";import{createContext as o,useCallback as r,useContext as t,useEffect as n,useId as a,useLayoutEffect as d,useMemo as i,useRef as l}from"react";var s={"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].use[2]!./src/compounds/Modal.module.css":function(e,o,r){r.d(o,{A:()=>i});var t=r("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/noSourceMaps.js"),n=r.n(t),a=r("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/api.js"),d=r.n(a)()(n());d.push([e.id,"body:has(.pureModalBackdrop-RW7tAF){overflow:hidden}.pureModalBackdrop-RW7tAF{--radius:12px;--aspect-ratio:auto;--backdrop-color:#0006;--box-shadow:0px 1px 2px #00000024,0px 8px 20px #0000002e,0px 20px 48px #00000038;--max-width:95vw;--max-height:90vh;--min-width:320px;--background:white;--background-panels:#ffffffe6;--top-content-padding:16px;--bottom-content-padding:16px;--top-footer-padding:16px;--bottom-footer-padding:16px;--left-padding:24px;--right-padding:24px;--calculated-right-padding:var(--right-padding);--z-index:1041;--backdrop-filter:blur(3px);--top-header-padding:16px;--bottom-header-padding:16px;--dividers-color:silver;--dividers-border:1px solid var(--dividers-color);--close-button-background:var(--background-panels,white);--close-button-size:30px;--close-button-container-padding:var(--radius);--close-button-container-transform:none;--close-button-space:var(--close-button-size);--close-button-border:var(--dividers-border);--close-button-hover-transform:scale(1.05);backdrop-filter:var(--backdrop-filter);z-index:var(--z-index);background-color:var(--backdrop-color);flex-direction:column;justify-content:center;align-items:center;animation:.26s cubic-bezier(.16,.84,.44,1) both backdropFadeSmooth-ZnEuSQ;display:flex;position:fixed;inset:0;overflow:auto}@keyframes backdropFadeSmooth-ZnEuSQ{0%{opacity:0;-webkit-backdrop-filter:blur();background-color:#0000}to{opacity:1;backdrop-filter:var(--backdrop-filter);background-color:var(--backdrop-color)}}.pureModal-Hr1gWI{z-index:calc(var(--z-index) + 1);background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--radius);max-height:var(--max-height);max-width:max(320px,var(--max-width));min-width:var(--min-width);aspect-ratio:var(--aspect-ratio);grid-template-rows:auto minmax(0,1fr) minmax(0,max-content);grid-template-columns:1fr;grid-auto-flow:row;display:grid;overflow:visible;&:has(>.pureModalHeader-DahjVw)>.pureModalContent-t7nwPr{grid-row:2}animation:.24s cubic-bezier(.18,.77,.42,1) both panelSoftPop-JNSB6U}@keyframes panelSoftPop-JNSB6U{0%{opacity:0;transform:translateY(8px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.pureModalHeader-DahjVw{padding:var(--top-header-padding)var(--calculated-right-padding)var(--bottom-header-padding)var(--left-padding);border-bottom:var(--dividers-border);border-radius:var(--radius)var(--radius)0 0;background:var(--background-panels);box-sizing:border-box;grid-area:1/1;align-items:center;width:100%;display:flex}.pureModalContent-t7nwPr{padding:var(--top-content-padding)var(--calculated-right-padding)var(--bottom-content-padding)var(--left-padding);box-sizing:border-box;overscroll-behavior:contain;width:100%;grid-area:1/1/2/-1;min-block-size:0;overflow:auto}.pureModalFooter-hj8jgh{padding:var(--top-footer-padding)var(--calculated-right-padding)calc(var(--bottom-footer-padding) + env(safe-area-inset-bottom))var(--left-padding);border-top:var(--dividers-border);border-radius:0 0 var(--radius)var(--radius);background:var(--background-panels);box-sizing:border-box;grid-area:3/1/auto/-1;width:100%;display:block}@media (width<=600px){.pureModalBackdrop-RW7tAF{--radius:12px 12px 0 0;justify-content:end}.pureModal-Hr1gWI{--aspect-ratio:auto;min-width:var(--max-width);animation:.28s cubic-bezier(.25,.85,.35,1) panelSheetIn-loLXeB}@keyframes panelSheetIn-loLXeB{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}}.pureModal-Hr1gWI:has(.pureCloseButton-Ac2K32) .pureModalHeader-DahjVw{--calculated-right-padding:calc(var(--right-padding) + var(--close-button-space))}.pureCloseButton-Ac2K32{padding:var(--close-button-container-padding);transform:var(--close-button-container-transform,none);z-index:3;grid-area:1/1/auto/-1;place-self:start end;align-items:center;display:flex}.pureCloseButtonIcon-m_tk65{border-radius:calc(var(--radius)*2);font-weight:700;font-size:calc(var(--close-button-size)/2);height:var(--close-button-size);color:var(--dividers-color);width:var(--close-button-size);cursor:pointer;text-align:center;line-height:calc(var(--close-button-size) - 1px);aspect-ratio:1;border:var(--close-button-border);background:var(--close-button-background);padding:0;transition:all .1s ease-in-out;&:hover{transform:var(--close-button-hover-transform)}}",""]),d.locals={pureModalBackdrop:"pureModalBackdrop-RW7tAF",backdropFadeSmooth:"backdropFadeSmooth-ZnEuSQ",pureModal:"pureModal-Hr1gWI",panelSoftPop:"panelSoftPop-JNSB6U",pureModalHeader:"pureModalHeader-DahjVw",pureModalContent:"pureModalContent-t7nwPr",pureModalFooter:"pureModalFooter-hj8jgh",panelSheetIn:"panelSheetIn-loLXeB",pureCloseButton:"pureCloseButton-Ac2K32",pureCloseButtonIcon:"pureCloseButtonIcon-m_tk65"};let i=d},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/api.js":function(e){e.exports=function(e){var o=[];return o.toString=function(){return this.map(function(o){var r="",t=void 0!==o[5];return o[4]&&(r+="@supports (".concat(o[4],") {")),o[2]&&(r+="@media ".concat(o[2]," {")),t&&(r+="@layer".concat(o[5].length>0?" ".concat(o[5]):""," {")),r+=e(o),t&&(r+="}"),o[2]&&(r+="}"),o[4]&&(r+="}"),r}).join("")},o.i=function(e,r,t,n,a){"string"==typeof e&&(e=[[null,e,void 0]]);var d={};if(t)for(var i=0;i<this.length;i++){var l=this[i][0];null!=l&&(d[l]=!0)}for(var s=0;s<e.length;s++){var c=[].concat(e[s]);t&&d[c[0]]||(void 0!==a&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=a),r&&(c[2]&&(c[1]="@media ".concat(c[2]," {").concat(c[1],"}")),c[2]=r),n&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=n):c[4]="".concat(n)),o.push(c))}},o}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/noSourceMaps.js":function(e){e.exports=function(e){return e[1]}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/injectStylesIntoStyleTag.js":function(e){var o=[];function r(e){for(var r=-1,t=0;t<o.length;t++)if(o[t].identifier===e){r=t;break}return r}function t(e,t){for(var n={},a=[],d=0;d<e.length;d++){var i=e[d],l=t.base?i[0]+t.base:i[0],s=n[l]||0,c="".concat(l," ").concat(s);n[l]=s+1;var u=r(c),p={css:i[1],media:i[2],sourceMap:i[3],supports:i[4],layer:i[5]};if(-1!==u)o[u].references++,o[u].updater(p);else{var m=function(e,o){var r=o.domAPI(o);return r.update(e),function(o){o?(o.css!==e.css||o.media!==e.media||o.sourceMap!==e.sourceMap||o.supports!==e.supports||o.layer!==e.layer)&&r.update(e=o):r.remove()}}(p,t);t.byIndex=d,o.splice(d,0,{identifier:c,updater:m,references:1})}a.push(c)}return a}e.exports=function(e,n){var a=t(e=e||[],n=n||{});return function(e){e=e||[];for(var d=0;d<a.length;d++){var i=r(a[d]);o[i].references--}for(var l=t(e,n),s=0;s<a.length;s++){var c=r(a[s]);0===o[c].references&&(o[c].updater(),o.splice(c,1))}a=l}}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertBySelector.js":function(e){var o={};e.exports=function(e,r){var t=function(e){if(void 0===o[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}o[e]=r}return o[e]}(e);if(!t)throw Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(r)}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertStyleElement.js":function(e){e.exports=function(e){var o=document.createElement("style");return e.setAttributes(o,e.attributes),e.insert(o,e.options),o}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/setAttributesWithoutAttributes.js":function(e,o,r){e.exports=function(e){var o=r.nc;o&&e.setAttribute("nonce",o)}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleDomAPI.js":function(e){e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var o=e.insertStyleElement(e);return{update:function(r){var t,n,a;t="",r.supports&&(t+="@supports (".concat(r.supports,") {")),r.media&&(t+="@media ".concat(r.media," {")),(n=void 0!==r.layer)&&(t+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),t+=r.css,n&&(t+="}"),r.media&&(t+="}"),r.supports&&(t+="}"),(a=r.sourceMap)&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),e.styleTagTransform(t,o,e.options)},remove:function(){var e;null===(e=o).parentNode||e.parentNode.removeChild(e)}}}},"./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleTagTransform.js":function(e){e.exports=function(e,o){if(o.styleSheet)o.styleSheet.cssText=e;else{for(;o.firstChild;)o.removeChild(o.firstChild);o.appendChild(document.createTextNode(e))}}}},c={};function u(e){var o=c[e];if(void 0!==o)return o.exports;var r=c[e]={id:e,exports:{}};return s[e](r,r.exports,u),r.exports}u.n=e=>{var o=e&&e.__esModule?()=>e.default:()=>e;return u.d(o,{a:o}),o},u.d=(e,o)=>{for(var r in o)u.o(o,r)&&!u.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:o[r]})},u.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),u.nc=void 0;var p=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/injectStylesIntoStyleTag.js"),m=u.n(p),b=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleDomAPI.js"),f=u.n(b),v=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertBySelector.js"),h=u.n(v),g=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/setAttributesWithoutAttributes.js"),x=u.n(g),y=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/insertStyleElement.js"),k=u.n(y),w=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/style-loader/runtime/styleTagTransform.js"),M=u.n(w),S=u("./node_modules/@rslib/core/node_modules/@rsbuild/core/compiled/css-loader/index.js??ruleSet[1].rules[1].use[1]!builtin:lightningcss-loader??ruleSet[1].rules[1].use[2]!./src/compounds/Modal.module.css"),_={};_.styleTagTransform=M(),_.setAttributes=x(),_.insert=h().bind(null,"head"),_.domAPI=f(),_.insertStyleElement=k(),m()(S.A,_);let j=S.A&&S.A.locals?S.A.locals:void 0,C=o(void 0);function B(e){if(!e)return -99999;let o=Number.parseInt(getComputedStyle(e).zIndex||"0",10);return Number.isNaN(o)?-99999:o}function A(e){return Math.max(Math.max(...Array.from(document.querySelectorAll(e)).map(e=>B(e))),1)}function I({children:o}){let{isOpen:a,onClose:i,style:s,closeOnBackdropClick:c}=t(C)??{},u=l(null),p=r(e=>{if(function(e){if(!e)return!1;let o=e.tagName.toLowerCase();return"input"===o||"textarea"===o||"select"===o||!!e.isContentEditable}(document.activeElement))return;let o=B(u.current),r=A(`.${j.pureModalBackdrop}`);return!!i&&"Escape"===e.key&&o===r&&(i(),!0)},[i]);return n(()=>{if(a)return document.addEventListener("keydown",p),()=>{document.removeEventListener("keydown",p)}},[a,p]),d(()=>{let e=s?.["--z-index"],o="number"==typeof e?e:"string"==typeof e?Number.parseFloat(e):NaN,r=Number.isFinite(o)?o:A(`.${j.pureModalBackdrop}`);u.current&&(u.current.style.zIndex=String(r+1))},[s?.["--z-index"]]),e("div",{ref:u,className:j.pureModalBackdrop,onMouseDown:e=>{if(c){if(e){if(!e.target.classList.contains(j.pureModalBackdrop))return;e.stopPropagation(),e.preventDefault()}i?.()}},"aria-modal":"true",role:"dialog",style:s,children:o})}function z(o){let r=a(),t=i(()=>({isOpen:!!o.isOpen,onClose:o.onClose,closeOnBackdropClick:!!o.closeOnBackdropClick,style:o.style}),[o.isOpen,o.onClose,o.closeOnBackdropClick,o.style]);return t.isOpen?e(C.Provider,{value:t,children:e(I,{children:e("div",{id:`pure-modal-${r}`,className:j.pureModal,children:o.children})})}):null}z.Footer=function({children:o}){return e("div",{className:j.pureModalFooter,children:o})},z.Header=function({children:o}){return e("div",{className:j.pureModalHeader,children:o})},z.Content=function({children:o}){return e("div",{className:j.pureModalContent,children:o})},z.Close=function({children:o}){let{onClose:r}=t(C)??{};return e("div",{className:j.pureCloseButton,children:o||e("button",{type:"button",onClick:r,className:j.pureCloseButtonIcon,children:"✕"})})};let N=z;export{N as default};

package/dist/src/compounds/Modal.d.ts

@@ -1,5 +1,4 @@
 import { ModalContent } from "./Content";
-import { ModalBackdrop } from "./Backdrop";
 import { ModalFooter } from "./Footer";
 import { ModalHeader } from "./Header";
 import { ModalClose } from "./Close";
@@ -8,7 +7,6 @@ declare function Modal(props: ModalProps): import("react/jsx-runtime").JSX.Eleme
 declare namespace Modal {
     var Footer: typeof ModalFooter;
     var Header: typeof ModalHeader;
-    var Backdrop: typeof ModalBackdrop;
     var Content: typeof ModalContent;
     var Close: typeof ModalClose;
 }

package/dist/src/compounds/Modal.types.d.ts

@@ -6,10 +6,12 @@ import type { ModalFooter } from "./Footer";
 import type { ModalHeader } from "./Header";
 export type ModalCompoundElement = ReactElement<typeof ModalBackdrop> | ReactElement<typeof ModalClose> | ReactElement<typeof ModalHeader> | ReactElement<typeof ModalContent> | ReactElement<typeof ModalFooter>;
 export type ModalChildren = ModalCompoundElement | ModalCompoundElement[];
+export type ModalCssVariable = "--radius" | "--aspect-ratio" | "--backdrop-color" | "--box-shadow" | "--max-width" | "--max-height" | "--min-width" | "--background" | "--background-panels" | "--z-index" | "--top-content-padding" | "--bottom-content-padding" | "--top-header-padding" | "--bottom-header-padding" | "--top-footer-padding" | "--bottom-footer-padding" | "--left-padding" | "--right-padding" | "--close-button-background" | "--close-button-border" | "--close-button-size" | "--close-button-container-padding" | "--close-button-container-transform" | "--close-button-hover-transform" | "--dividers-color" | "--dividers-border" | "--backdrop-filter";
+export type ModalStyle = Partial<Record<ModalCssVariable, string | number>>;
 export type ModalProps = {
     children: ModalChildren;
     isOpen?: boolean;
-    style?: React.CSSProperties;
-    onClose?: () => boolean | undefined;
+    style?: ModalStyle;
+    onClose?: VoidFunction;
     closeOnBackdropClick?: boolean;
 };

package/dist/src/index.d.ts

@@ -1 +1,3 @@
-export * as Modal from "./compounds/Modal";
+import Modal from "./compounds/Modal";
+export default Modal;
+export type { ModalCompoundElement, ModalProps, ModalCssVariable, } from "./compounds/Modal.types";

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "react-pure-modal",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "React modal",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/src/index.d.ts",
       "import": "./dist/index.js"
     }
   },
@@ -14,7 +14,7 @@
     "*.module.css",
     "**/*.css"
   ],
-  "types": "./dist/index.d.ts",
+  "types": "./dist/src/index.d.ts",
   "files": [
     "dist"
   ],
@@ -36,6 +36,7 @@
   "scripts": {
     "build": "rslib build",
     "dev": "rslib build --watch",
+    "typecheck": "tsc -p tsconfig.types.json",
     "storybook": "npx storybook dev",
     "storybook:build": "storybook build -o storybook-static",
     "storybook:deploy": "npm run storybook:build"