@mokcj0825/hole-mask/dist/index.js

A React component for creating mask overlays with customizable holes

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("react");var Y={exports:{}},y={};/**
 * @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 Z;function re(){if(Z)return y;Z=1;var t=Symbol.for("react.transitional.element"),E=Symbol.for("react.fragment");function $(d,l,o){var p=null;if(o!==void 0&&(p=""+o),l.key!==void 0&&(p=""+l.key),"key"in l){o={};for(var T in l)T!=="key"&&(o[T]=l[T])}else o=l;return l=o.ref,{$$typeof:t,type:d,key:p,ref:l!==void 0?l:null,props:o}}return y.Fragment=E,y.jsx=$,y.jsxs=$,y}var k={};/**
 * @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 K;function ae(){return K||(K=1,process.env.NODE_ENV!=="production"&&function(){function t(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===X?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case a:return"Fragment";case n:return"Profiler";case r:return"StrictMode";case N:return"Suspense";case F:return"SuspenseList";case j: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 M:return"Portal";case _:return(e.displayName||"Context")+".Provider";case s:return(e._context.displayName||"Context")+".Consumer";case w:var c=e.render;return e=e.displayName,e||(e=c.displayName||c.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case D:return c=e.displayName||null,c!==null?c:t(e.type)||"Memo";case O:c=e._payload,e=e._init;try{return t(e(c))}catch{}}return null}function E(e){return""+e}function $(e){try{E(e);var c=!1}catch{c=!0}if(c){c=console;var u=c.error,i=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(c,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",i),E(e)}}function d(e){if(e===a)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===O)return"<...>";try{var c=t(e);return c?"<"+c+">":"<...>"}catch{return"<...>"}}function l(){var e=S.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function p(e){if(H.call(e,"key")){var c=Object.getOwnPropertyDescriptor(e,"key").get;if(c&&c.isReactWarning)return!1}return e.key!==void 0}function T(e,c){function u(){W||(W=!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)",c))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function L(){var e=t(this.type);return q[e]||(q[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 x(e,c,u,i,g,m,G,U){return u=m.ref,e={$$typeof:h,type:e,key:c,props:m,_owner:g},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:L}):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:G}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function z(e,c,u,i,g,m,G,U){var f=c.children;if(f!==void 0)if(i)if(I(f)){for(i=0;i<f.length;i++)R(f[i]);Object.freeze&&Object.freeze(f)}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 R(f);if(H.call(c,"key")){f=t(e);var A=Object.keys(c).filter(function(ee){return ee!=="key"});i=0<A.length?"{key: someKey, "+A.join(": ..., ")+": ...}":"{key: someKey}",Q[f+i]||(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} />`,i,f,A,f),Q[f+i]=!0)}if(f=null,u!==void 0&&($(u),f=""+u),p(c)&&($(c.key),f=""+c.key),"key"in c){u={};for(var B in c)B!=="key"&&(u[B]=c[B])}else u=c;return f&&T(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),x(e,f,m,g,l(),u,G,U)}function R(e){typeof e=="object"&&e!==null&&e.$$typeof===h&&e._store&&(e._store.validated=1)}var b=te,h=Symbol.for("react.transitional.element"),M=Symbol.for("react.portal"),a=Symbol.for("react.fragment"),r=Symbol.for("react.strict_mode"),n=Symbol.for("react.profiler"),s=Symbol.for("react.consumer"),_=Symbol.for("react.context"),w=Symbol.for("react.forward_ref"),N=Symbol.for("react.suspense"),F=Symbol.for("react.suspense_list"),D=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),j=Symbol.for("react.activity"),X=Symbol.for("react.client.reference"),S=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,H=Object.prototype.hasOwnProperty,I=Array.isArray,C=console.createTask?console.createTask:function(){return null};b={react_stack_bottom_frame:function(e){return e()}};var W,q={},V=b.react_stack_bottom_frame.bind(b,o)(),J=C(d(o)),Q={};k.Fragment=a,k.jsx=function(e,c,u,i,g){var m=1e4>S.recentlyCreatedOwnerStacks++;return z(e,c,u,!1,i,g,m?Error("react-stack-top-frame"):V,m?C(d(e)):J)},k.jsxs=function(e,c,u,i,g){var m=1e4>S.recentlyCreatedOwnerStacks++;return z(e,c,u,!0,i,g,m?Error("react-stack-top-frame"):V,m?C(d(e)):J)}}()),k}var P;function ce(){return P||(P=1,process.env.NODE_ENV==="production"?Y.exports=re():Y.exports=ae()),Y.exports}var v=ce();const ne=({holePosition:t,backgroundColor:E="rgba(0, 0, 0, 0.1)",onOverlayClick:$,maskIndex:d=1e3})=>{const l=a=>{const r=a.match(/^(\d+(?:\.\d+)?)(px|%)$/);if(!r)throw new Error(`Invalid position value: ${a}. Expected format: "numberpx" or "number%"`);return{value:parseFloat(r[1]),unit:r[2]}},o=a=>{const r=a.split(" ");if(r.length!==2)throw new Error(`Invalid rectangle dimensions: ${a}. Expected format: "widthpx heightpx" or "width% height%"`);const n=r[0].match(/^(\d+(?:\.\d+)?)(px|%)$/),s=r[1].match(/^(\d+(?:\.\d+)?)(px|%)$/);if(!n||!s)throw new Error(`Invalid rectangle dimensions: ${a}. Expected format: "widthpx heightpx" or "width% height%"`);return{width:{value:parseFloat(n[1]),unit:n[2]},height:{value:parseFloat(s[1]),unit:s[2]}}},p=(a,r)=>{switch(r){case"SHAPE_RECTANGLE":return a.includes(" ")?a:`${a} ${a}`;case"SHAPE_SQUARE":case"SHAPE_CIRCLE":return a.includes(" ")?a.split(" ")[0]:a;default:return a}},T=(a,r,n,s,_)=>{switch(_){case"ANCHOR_TOP_LEFT":return{centerX:`calc(${a} + ${n}${s})`,centerY:`calc(${r} + ${n}${s})`};case"ANCHOR_TOP_RIGHT":return{centerX:`calc(${a} - ${n}${s})`,centerY:`calc(${r} + ${n}${s})`};case"ANCHOR_BOTTOM_LEFT":return{centerX:`calc(${a} + ${n}${s})`,centerY:`calc(${r} - ${n}${s})`};case"ANCHOR_BOTTOM_RIGHT":return{centerX:`calc(${a} - ${n}${s})`,centerY:`calc(${r} - ${n}${s})`};case"ANCHOR_MIDDLE":default:return{centerX:a,centerY:r}}},L=(a,r,n,s,_)=>Math.sqrt(Math.pow(a-n,2)+Math.pow(r-s,2))<=_,x=(a,r,n)=>r==="%"?n*a/100:a,R=(()=>{switch(t.shape){case"SHAPE_RECTANGLE":{const a=p(t.size,"SHAPE_RECTANGLE"),r=o(a);switch(t.anchor){case"ANCHOR_TOP_LEFT":return{left:t.x,top:t.y,right:`calc(${t.x} + ${r.width.value}${r.width.unit})`,bottom:`calc(${t.y} + ${r.height.value}${r.height.unit})`};case"ANCHOR_TOP_RIGHT":return{left:`calc(${t.x} - ${r.width.value}${r.width.unit})`,top:t.y,right:t.x,bottom:`calc(${t.y} + ${r.height.value}${r.height.unit})`};case"ANCHOR_BOTTOM_LEFT":return{left:t.x,top:`calc(${t.y} - ${r.height.value}${r.height.unit})`,right:`calc(${t.x} + ${r.width.value}${r.width.unit})`,bottom:t.y};case"ANCHOR_BOTTOM_RIGHT":return{left:`calc(${t.x} - ${r.width.value}${r.width.unit})`,top:`calc(${t.y} - ${r.height.value}${r.height.unit})`,right:t.x,bottom:t.y};case"ANCHOR_MIDDLE":default:return{left:`calc(${t.x} - ${r.width.value/2}${r.width.unit})`,top:`calc(${t.y} - ${r.height.value/2}${r.height.unit})`,right:`calc(${t.x} + ${r.width.value/2}${r.width.unit})`,bottom:`calc(${t.y} + ${r.height.value/2}${r.height.unit})`}}}case"SHAPE_SQUARE":case"SHAPE_CIRCLE":{const a=p(t.size,t.shape),r=l(a);switch(t.anchor){case"ANCHOR_TOP_LEFT":return{left:t.x,top:t.y,right:`calc(${t.x} + ${t.size})`,bottom:`calc(${t.y} + ${t.size})`};case"ANCHOR_TOP_RIGHT":return{left:`calc(${t.x} - ${t.size})`,top:t.y,right:t.x,bottom:`calc(${t.y} + ${t.size})`};case"ANCHOR_BOTTOM_LEFT":return{left:t.x,top:`calc(${t.y} - ${t.size})`,right:`calc(${t.x} + ${t.size})`,bottom:t.y};case"ANCHOR_BOTTOM_RIGHT":return{left:`calc(${t.x} - ${t.size})`,top:`calc(${t.y} - ${t.size})`,right:t.x,bottom:t.y};case"ANCHOR_MIDDLE":default:return{left:`calc(${t.x} - ${r.value/2}${r.unit})`,top:`calc(${t.y} - ${r.value/2}${r.unit})`,right:`calc(${t.x} + ${r.value/2}${r.unit})`,bottom:`calc(${t.y} + ${r.value/2}${r.unit})`}}}}})(),b=()=>{if(t.shape==="SHAPE_RECTANGLE"){const a=t.size.split(" ");return a.length===2?a[1]:t.size}else if(t.shape==="SHAPE_SQUARE"||t.shape==="SHAPE_CIRCLE")return t.size.includes(" ")?t.size.split(" ")[0]:t.size;return t.size},h=a=>{a.stopPropagation(),$&&$()},M=a=>{const r=a.currentTarget.getBoundingClientRect(),n=a.clientX-r.left,s=a.clientY-r.top,_=p(t.size,"SHAPE_CIRCLE"),w=l(_),N=w.value/2,{centerX:F,centerY:D}=T(t.x,t.y,N,w.unit,t.anchor),O=l(F),j=l(D),X=x(O.value,O.unit,r.width),S=x(j.value,j.unit,r.height),H=x(N,w.unit,Math.min(r.width,r.height));if(L(n,s,X,S,H)){a.stopPropagation();const I=a.currentTarget.parentElement;if(I){const C=new MouseEvent("click",{clientX:a.clientX,clientY:a.clientY,bubbles:!0,cancelable:!0});I.dispatchEvent(C)}}else a.stopPropagation(),$&&$()};if(t.shape==="SHAPE_CIRCLE"){const a=p(t.size,"SHAPE_CIRCLE"),r=l(a),n=r.value/2,{centerX:s,centerY:_}=T(t.x,t.y,n,r.unit,t.anchor);return v.jsx("div",{onClick:M,style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:E,mask:`radial-gradient(circle ${n}${r.unit} at ${s} ${_}, transparent 0%, transparent 100%, black 100%)`,WebkitMask:`radial-gradient(circle ${n}${r.unit} at ${s} ${_}, transparent 0%, transparent 100%, black 100%)`,zIndex:d}})}return v.jsxs(v.Fragment,{children:[v.jsx("div",{onClick:h,style:{position:"absolute",top:0,left:0,width:"100%",height:R.top,backgroundColor:E,zIndex:d}}),v.jsx("div",{onClick:h,style:{position:"absolute",bottom:0,left:0,width:"100%",height:`calc(100% - ${R.bottom})`,backgroundColor:E,zIndex:d}}),v.jsx("div",{onClick:h,style:{position:"absolute",top:R.top,left:0,width:R.left,height:b(),backgroundColor:E,zIndex:d}}),v.jsx("div",{onClick:h,style:{position:"absolute",top:R.top,right:0,width:`calc(100% - ${R.right})`,height:b(),backgroundColor:E,zIndex:d}})]})};exports.MaskLayer=ne;