react-profile-crop/dist/index.mjs

A flexible, customizable React component for cropping profile pictures with real-time preview.

import e,{useRef as t,useState as r,useCallback as n,useEffect as o}from"react";var a=function(){return a=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function i(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{l(n.next(e))}catch(e){a(e)}}function c(e){try{l(n.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,c)}l((n=n.apply(e,t||[])).next())}))}function c(e,t){var r,n,o,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]},i=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return i.next=c(0),i.throw=c(1),i.return=c(2),"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(c){return function(l){return function(c){if(r)throw new TypeError("Generator is already executing.");for(;i&&(i=0,c[0]&&(a=0)),a;)try{if(r=1,n&&(o=2&c[0]?n.return:c[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,c[1])).done)return o;switch(n=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return a.label++,{value:c[1],done:!1};case 5:a.label++,n=c[1],c=[0];continue;case 7:c=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){a=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){a.label=c[1];break}if(6===c[0]&&a.label<o[1]){a.label=o[1],o=c;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(c);break}o[2]&&a.ops.pop(),a.trys.pop();continue}c=t.call(e,a)}catch(e){c=[6,e],n=0}finally{r=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,l])}}}"function"==typeof SuppressedError&&SuppressedError;var l,s={exports:{}},u={};var p,f={};
/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */"production"===process.env.NODE_ENV?s.exports=function(){if(l)return u;l=1;var t=e,r=Symbol.for("react.element"),n=Symbol.for("react.fragment"),o=Object.prototype.hasOwnProperty,a=t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,i={key:!0,ref:!0,__self:!0,__source:!0};function c(e,t,n){var c,l={},s=null,u=null;for(c in void 0!==n&&(s=""+n),void 0!==t.key&&(s=""+t.key),void 0!==t.ref&&(u=t.ref),t)o.call(t,c)&&!i.hasOwnProperty(c)&&(l[c]=t[c]);if(e&&e.defaultProps)for(c in t=e.defaultProps)void 0===l[c]&&(l[c]=t[c]);return{$$typeof:r,type:e,key:s,ref:u,props:l,_owner:a.current}}return u.Fragment=n,u.jsx=c,u.jsxs=c,u}():s.exports=(p||(p=1,"production"!==process.env.NODE_ENV&&function(){var t,r=e,n=Symbol.for("react.element"),o=Symbol.for("react.portal"),a=Symbol.for("react.fragment"),i=Symbol.for("react.strict_mode"),c=Symbol.for("react.profiler"),l=Symbol.for("react.provider"),s=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),p=Symbol.for("react.suspense"),d=Symbol.for("react.suspense_list"),y=Symbol.for("react.memo"),v=Symbol.for("react.lazy"),h=Symbol.for("react.offscreen"),g=Symbol.iterator,m=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function b(e){for(var t=arguments.length,r=new Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];!function(e,t,r){var n=m.ReactDebugCurrentFrame.getStackAddendum();""!==n&&(t+="%s",r=r.concat([n]));var o=r.map((function(e){return String(e)}));o.unshift("Warning: "+t),Function.prototype.apply.call(console[e],console,o)}("error",e,r)}function x(e){return e.displayName||"Context"}function w(e){if(null==e)return null;if("number"==typeof e.tag&&b("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case a:return"Fragment";case o:return"Portal";case c:return"Profiler";case i:return"StrictMode";case p:return"Suspense";case d:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case s:return x(e)+".Consumer";case l:return x(e._context)+".Provider";case u:return function(e,t,r){var n=e.displayName;if(n)return n;var o=t.displayName||t.name||"";return""!==o?r+"("+o+")":r}(e,e.render,"ForwardRef");case y:var t=e.displayName||null;return null!==t?t:w(e.type)||"Memo";case v:var r=e,n=r._payload,f=r._init;try{return w(f(n))}catch(e){return null}}return null}t=Symbol.for("react.module.reference");var j,k,C,S,_,R,O,E=Object.assign,T=0;function P(){}P.__reactDisabledLog=!0;var N,F=m.ReactCurrentDispatcher;function D(e,t,r){if(void 0===N)try{throw Error()}catch(e){var n=e.stack.trim().match(/\n( *(at )?)/);N=n&&n[1]||""}return"\n"+N+e}var $,I=!1,B="function"==typeof WeakMap?WeakMap:Map;function z(e,t){if(!e||I)return"";var r,n=$.get(e);if(void 0!==n)return n;I=!0;var o,a=Error.prepareStackTrace;Error.prepareStackTrace=void 0,o=F.current,F.current=null,function(){if(0===T){j=console.log,k=console.info,C=console.warn,S=console.error,_=console.group,R=console.groupCollapsed,O=console.groupEnd;var e={configurable:!0,enumerable:!0,value:P,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}T++}();try{if(t){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(i,[])}catch(e){r=e}Reflect.construct(e,[],i)}else{try{i.call()}catch(e){r=e}e.call(i.prototype)}}else{try{throw Error()}catch(e){r=e}e()}}catch(t){if(t&&r&&"string"==typeof t.stack){for(var c=t.stack.split("\n"),l=r.stack.split("\n"),s=c.length-1,u=l.length-1;s>=1&&u>=0&&c[s]!==l[u];)u--;for(;s>=1&&u>=0;s--,u--)if(c[s]!==l[u]){if(1!==s||1!==u)do{if(s--,--u<0||c[s]!==l[u]){var p="\n"+c[s].replace(" at new "," at ");return e.displayName&&p.includes("<anonymous>")&&(p=p.replace("<anonymous>",e.displayName)),"function"==typeof e&&$.set(e,p),p}}while(s>=1&&u>=0);break}}}finally{I=!1,F.current=o,function(){if(0==--T){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:E({},e,{value:j}),info:E({},e,{value:k}),warn:E({},e,{value:C}),error:E({},e,{value:S}),group:E({},e,{value:_}),groupCollapsed:E({},e,{value:R}),groupEnd:E({},e,{value:O})})}T<0&&b("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=a}var f=e?e.displayName||e.name:"",d=f?D(f):"";return"function"==typeof e&&$.set(e,d),d}function M(e,t,r){if(null==e)return"";if("function"==typeof e)return z(e,!(!(n=e.prototype)||!n.isReactComponent));var n;if("string"==typeof e)return D(e);switch(e){case p:return D("Suspense");case d:return D("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case u:return z(e.render,!1);case y:return M(e.type,t,r);case v:var o=e,a=o._payload,i=o._init;try{return M(i(a),t,r)}catch(e){}}return""}$=new B;var W=Object.prototype.hasOwnProperty,L={},U=m.ReactDebugCurrentFrame;function A(e){if(e){var t=e._owner,r=M(e.type,e._source,t?t.type:null);U.setExtraStackFrame(r)}else U.setExtraStackFrame(null)}var Y=Array.isArray;function X(e){return Y(e)}function Z(e){return""+e}function G(e){if(function(e){try{return Z(e),!1}catch(e){return!0}}(e))return b("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return"function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),Z(e)}var H,J,V=m.ReactCurrentOwner,K={key:!0,ref:!0,__self:!0,__source:!0};function q(e,t,r,o,a){var i,c={},l=null,s=null;for(i in void 0!==r&&(G(r),l=""+r),function(e){if(W.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return void 0!==e.key}(t)&&(G(t.key),l=""+t.key),function(e){if(W.call(e,"ref")){var t=Object.getOwnPropertyDescriptor(e,"ref").get;if(t&&t.isReactWarning)return!1}return void 0!==e.ref}(t)&&(s=t.ref,function(e){"string"==typeof e.ref&&V.current}(t)),t)W.call(t,i)&&!K.hasOwnProperty(i)&&(c[i]=t[i]);if(e&&e.defaultProps){var u=e.defaultProps;for(i in u)void 0===c[i]&&(c[i]=u[i])}if(l||s){var p="function"==typeof e?e.displayName||e.name||"Unknown":e;l&&function(e,t){var r=function(){H||(H=!0,b("%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://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}(c,p),s&&function(e,t){var r=function(){J||(J=!0,b("%s: `ref` 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://reactjs.org/link/special-props)",t))};r.isReactWarning=!0,Object.defineProperty(e,"ref",{get:r,configurable:!0})}(c,p)}return function(e,t,r,o,a,i,c){var l={$$typeof:n,type:e,key:t,ref:r,props:c,_owner:i,_store:{}};return Object.defineProperty(l._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(l,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(l,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(l.props),Object.freeze(l)),l}(e,l,s,a,o,V.current,c)}var Q,ee=m.ReactCurrentOwner,te=m.ReactDebugCurrentFrame;function re(e){if(e){var t=e._owner,r=M(e.type,e._source,t?t.type:null);te.setExtraStackFrame(r)}else te.setExtraStackFrame(null)}function ne(e){return"object"==typeof e&&null!==e&&e.$$typeof===n}function oe(){if(ee.current){var e=w(ee.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}Q=!1;var ae={};function ie(e,t){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var r=function(e){var t=oe();if(!t){var r="string"==typeof e?e:e.displayName||e.name;r&&(t="\n\nCheck the top-level render call using <"+r+">.")}return t}(t);if(!ae[r]){ae[r]=!0;var n="";e&&e._owner&&e._owner!==ee.current&&(n=" It was passed a child from "+w(e._owner.type)+"."),re(e),b('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',r,n),re(null)}}}function ce(e,t){if("object"==typeof e)if(X(e))for(var r=0;r<e.length;r++){var n=e[r];ne(n)&&ie(n,t)}else if(ne(e))e._store&&(e._store.validated=!0);else if(e){var o=function(e){if(null===e||"object"!=typeof e)return null;var t=g&&e[g]||e["@@iterator"];return"function"==typeof t?t:null}(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)ne(a.value)&&ie(a.value,t)}}function le(e){var t,r=e.type;if(null!=r&&"string"!=typeof r){if("function"==typeof r)t=r.propTypes;else{if("object"!=typeof r||r.$$typeof!==u&&r.$$typeof!==y)return;t=r.propTypes}if(t){var n=w(r);!function(e,t,r,n,o){var a=Function.call.bind(W);for(var i in e)if(a(e,i)){var c=void 0;try{if("function"!=typeof e[i]){var l=Error((n||"React class")+": "+r+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw l.name="Invariant Violation",l}c=e[i](t,i,n,r,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(e){c=e}!c||c instanceof Error||(A(o),b("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",r,i,typeof c),A(null)),c instanceof Error&&!(c.message in L)&&(L[c.message]=!0,A(o),b("Failed %s type: %s",r,c.message),A(null))}}(t,e.props,"prop",n,e)}else void 0===r.PropTypes||Q||(Q=!0,b("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",w(r)||"Unknown"));"function"!=typeof r.getDefaultProps||r.getDefaultProps.isReactClassApproved||b("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}var se={};function ue(e,r,o,f,g,m){var x=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===c||e===i||e===p||e===d||e===h||"object"==typeof e&&null!==e&&(e.$$typeof===v||e.$$typeof===y||e.$$typeof===l||e.$$typeof===s||e.$$typeof===u||e.$$typeof===t||void 0!==e.getModuleId)}(e);if(!x){var j,k="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(k+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."),k+=oe(),null===e?j="null":X(e)?j="array":void 0!==e&&e.$$typeof===n?(j="<"+(w(e.type)||"Unknown")+" />",k=" Did you accidentally export a JSX literal instead of a component?"):j=typeof e,b("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",j,k)}var C=q(e,r,o,g,m);if(null==C)return C;if(x){var S=r.children;if(void 0!==S)if(f)if(X(S)){for(var _=0;_<S.length;_++)ce(S[_],e);Object.freeze&&Object.freeze(S)}else b("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 ce(S,e)}if(W.call(r,"key")){var R=w(e),O=Object.keys(r).filter((function(e){return"key"!==e})),E=O.length>0?"{key: someKey, "+O.join(": ..., ")+": ...}":"{key: someKey}";se[R+E]||(b('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',E,R,O.length>0?"{"+O.join(": ..., ")+": ...}":"{}",R),se[R+E]=!0)}return e===a?function(e){for(var t=Object.keys(e.props),r=0;r<t.length;r++){var n=t[r];if("children"!==n&&"key"!==n){re(e),b("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),re(null);break}}null!==e.ref&&(re(e),b("Invalid attribute `ref` supplied to `React.Fragment`."),re(null))}(C):le(C),C}var pe=function(e,t,r){return ue(e,t,r,!1)},fe=function(e,t,r){return ue(e,t,r,!0)};f.Fragment=a,f.jsx=pe,f.jsxs=fe}()),f);var d=s.exports,y=function(e){var l=e.initialImage,s=e.onSave,u=e.onCancel,p=e.theme,f=e.cropShape,y=void 0===f?"circle":f,v=e.aspectRatio,h=e.outputFormat,g=void 0===h?"png":h,m=e.outputQuality,b=void 0===m?.9:m,x=e.headerText,w=void 0===x?"Profile Picture Cropper":x,j=e.previewText,k=void 0===j?"Preview":j,C=e.saveButtonText,S=void 0===C?"Save Profile Picture":C,_=e.cancelButtonText,R=void 0===_?"Cancel":_,O=e.loadingText,E=void 0===O?"Saving...":O,T=e.showPreview,P=void 0===T||T,N=e.previewSize,F=void 0===N?120:N,D=e.containerClassName,$=void 0===D?"":D,I=e.headerClassName,B=void 0===I?"":I,z=e.previewContainerClassName,M=void 0===z?"":z,W=e.buttonContainerClassName,L=void 0===W?"":W,U=e.saveButtonClassName,A=void 0===U?"":U,Y=e.cancelButtonClassName,X=void 0===Y?"":Y,Z=e.size,G=void 0===Z?250:Z,H=e.className,J=void 0===H?"":H,V=e.style,K=void 0===V?{}:V,q=e.containerHeight,Q=void 0===q?350:q,ee=e.maxZoom,te=void 0===ee?4:ee,re=e.minZoom,ne=void 0===re?0:re,oe=e.zoomStep,ae=void 0===oe?.1:oe,ie=e.allowZoom,ce=void 0===ie||ie,le=e.allowDrag,se=void 0===le||le,ue=e.uploadText,pe=void 0===ue?"Click to upload image":ue,fe=e.uploadSubtext,de=void 0===fe?"JPG, PNG or GIF. Max 5MB.":fe,ye=e.zoomLabel,ve=void 0===ye?"Zoom:":ye,he=e.changeButtonText,ge=void 0===he?"Change Image":he,me=e.acceptedFileTypes,be=void 0===me?"image/*":me,xe=e.maxFileSizeMB,we=void 0===xe?5:xe,je=e.showZoomControls,ke=void 0===je||je,Ce=e.showChangeButton,Se=void 0===Ce||Ce,_e=e.onError,Re=e.errorContainerClassname,Oe=void 0===Re?"":Re,Ee=e.errorTextClassname,Te=void 0===Ee?"":Ee,Pe=a(a({},{backgroundColor:"#f3f2ef",overlayColor:"rgba(0, 0, 0, 0.6)",borderColor:"#e0e0e0",accentColor:"#0077B5",textColor:"#333333",buttonBackgroundColor:"#0077B5",buttonTextColor:"white"}),p),Ne=t(null),Fe=t(null),De=t(null),$e=t(null),Ie=t(null),Be=r(l||""),ze=Be[0],Me=Be[1],We=r(!1),Le=We[0],Ue=We[1],Ae=r({x:0,y:0,width:G,height:v?G/v:G}),Ye=Ae[0],Xe=Ae[1],Ze=r({x:0,y:0}),Ge=Ze[0],He=Ze[1],Je=r(null),Ve=Je[0],Ke=Je[1],qe=r(!1),Qe=qe[0],et=qe[1],tt=r(ne),rt=tt[0],nt=tt[1],ot=r(!l),at=ot[0],it=ot[1],ct=r(null),lt=ct[0],st=ct[1],ut=r(null);ut[0];var pt=ut[1],ft=r(l),dt=ft[0],yt=ft[1],vt=r(!1),ht=vt[0],gt=vt[1],mt=n((function(e,t,r,n){var o=r/e,a=n/t;return Math.min(o,a,1)}),[]),bt=n((function(e,t){pt(e),t&&yt(t)}),[]);o((function(){if(Le&&Fe.current&&Ne.current){var e=Fe.current,t=e.naturalWidth,r=e.naturalHeight,n=Ne.current.getBoundingClientRect(),o=mt(t,r,n.width,n.height);Ie.current=o;var i=0===rt?o:rt,c=t*i,l=r*i,s=(n.width-c)/2,u=(n.height-l)/2,p=(n.width-Ye.width)/2,f=(n.height-Ye.height)/2;rt===ne&&nt(0),He({x:s,y:u}),Xe(a(a({},Ye),{x:p,y:f})),xt({x:s,y:u},i,a(a({},Ye),{x:p,y:f}))}}),[Le,G,rt,ne,mt,Ye.width,Ye.height]);var xt=n((function(e,t,r){var n=Ct(e,t,r);bt(r,n)}),[bt]),wt=n((function(e,t){se&&Fe.current&&Ne.current&&(et(!0),Ke({x:e,y:t}))}),[se]),jt=n((function(e,t){if(se&&Ve&&Qe&&Fe.current&&Ne.current){var r=e-Ve.x,n=t-Ve.y;Ke({x:e,y:t});var o={x:Ge.x+r,y:Ge.y+n};He(o);var a=0===rt&&Ie.current?Ie.current:rt;xt(o,a,Ye)}}),[se,Ve,Qe,Ye,xt,Ge,rt]),kt=function(){Qe&&(et(!1),Ke(null))},Ct=function(e,t,r){if(!Fe.current||!De.current)return"";var n=De.current,o=n.getContext("2d");if(!o)return"";n.width=r.width,n.height=r.height,o.clearRect(0,0,n.width,n.height),o.beginPath(),"circle"===y?o.arc(r.width/2,r.height/2,Math.min(r.width,r.height)/2,0,2*Math.PI):o.rect(0,0,r.width,r.height),o.clip();var a=(r.x-e.x)/t,i=(r.y-e.y)/t,c=r.width/t,l=r.height/t;o.drawImage(Fe.current,a,i,c,l,0,0,r.width,r.height);return n.toDataURL({png:"image/png",jpeg:"image/jpeg",webp:"image/webp"}[g],b)},St=function(){$e.current&&$e.current.click()},_t=0===rt&&Ie.current?Ie.current:rt,Rt=a({position:"relative",overflow:"hidden",maxWidth:"100%",userSelect:"none",backgroundColor:Pe.backgroundColor,border:"1px solid ".concat(Pe.borderColor),borderRadius:"8px",height:"".concat(Q,"px")},K),Ot={position:"absolute",left:"".concat(Ge.x,"px"),top:"".concat(Ge.y,"px"),transform:"scale(".concat(_t,")"),transformOrigin:"0 0",cursor:se?Qe?"grabbing":"grab":"default",display:ze&&Le?"block":"none",maxWidth:"none"},Et={position:"absolute",left:"".concat(Ye.x,"px"),top:"".concat(Ye.y,"px"),width:"".concat(Ye.width,"px"),height:"".concat(Ye.height,"px"),borderRadius:"circle"===y?"50%":"0",boxShadow:"0 0 0 1000px ".concat(Pe.overlayColor),pointerEvents:"none",overflow:"hidden"},Tt={position:"absolute",left:"".concat(Ye.x-7.5,"px"),top:"".concat(Ye.y-7.5,"px"),width:"".concat(Ye.width+10,"px"),height:"".concat(Ye.height+10,"px"),border:"2px dashed rgba(255, 255, 255, 0.8)",borderRadius:"circle"===y?"50%":"0",pointerEvents:"none"};return d.jsxs("div",{className:"profile-cropper-container ".concat($),style:{maxWidth:"600px",margin:"0 auto",padding:"20px",backgroundColor:"#ffffff",borderRadius:"8px",boxShadow:"0 0 10px rgba(0, 0, 0, 0.1)"},children:[w&&d.jsx("h1",{className:"profile-cropper-header ".concat(B),style:{fontSize:"24px",fontWeight:"bold",marginBottom:"16px",color:"#333333",textAlign:"center"},children:w}),d.jsx("canvas",{ref:De,style:{display:"none"}}),d.jsx("input",{ref:$e,type:"file",accept:be,onChange:function(e){var t=e.target.files;if(t&&0!==t.length){var r=t[0];if(!r.type.startsWith("image/"))return st(n="Please upload an image file"),void(_e&&_e(n));if(r.size>1024*we*1024){var n="Image must be less than ".concat(we,"MB");return st(n),void(_e&&_e(n))}st(null);var o=new FileReader;o.onload=function(e){var t,r=null===(t=e.target)||void 0===t?void 0:t.result;Me(r),Ue(!1),nt(0)},o.readAsDataURL(r)}},style:{display:"none"}}),d.jsxs("div",{className:"upload-container ".concat(at?"visible":"hidden"),onClick:St,style:{display:at?"flex":"none",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"300px",cursor:"pointer",backgroundColor:"#f7f7f7",border:"2px dashed ".concat(Pe.borderColor),borderRadius:"8px",padding:"20px"},children:[d.jsx("div",{className:"upload-icon",style:{fontSize:"40px",marginBottom:"10px",color:"#888"},children:"📷"}),d.jsx("div",{className:"upload-text",style:{fontSize:"16px",color:Pe.textColor,marginBottom:"5px"},children:pe}),d.jsx("div",{className:"upload-subtext",style:{fontSize:"12px",color:"#888"},children:de})]}),lt&&d.jsx("div",{className:"error-container ".concat(Oe),style:{textAlign:"center",margin:"10px 0"},children:d.jsx("div",{className:"error-text ".concat(Te),style:{color:"red",fontSize:"14px"},children:lt})}),ze&&d.jsxs(d.Fragment,{children:[d.jsxs("div",{ref:Ne,className:J,style:Rt,onMouseDown:function(e){e.preventDefault(),wt(e.clientX,e.clientY)},onMouseMove:function(e){jt(e.clientX,e.clientY)},onMouseUp:kt,onMouseLeave:kt,onTouchStart:function(e){var t=e.touches[0];wt(t.clientX,t.clientY),e.preventDefault()},onTouchMove:function(e){var t=e.touches[0];jt(t.clientX,t.clientY)},onTouchEnd:kt,children:[d.jsx("img",{ref:Fe,src:ze,alt:"Crop",onLoad:function(){Ue(!0),it(!1)},style:Ot,draggable:!1}),Le&&d.jsxs(d.Fragment,{children:[d.jsx("div",{style:{position:"absolute",inset:0,pointerEvents:"none"}}),d.jsx("div",{style:Et}),d.jsx("div",{style:Tt})]})]}),Le&&d.jsxs(d.Fragment,{children:[ke&&d.jsxs("div",{className:"zoom-controls",style:{display:"flex",alignItems:"center",margin:"10px 0"},children:[d.jsx("span",{style:{marginRight:"10px",fontSize:"14px",color:Pe.textColor},children:ve}),d.jsx("input",{type:"range",min:ne,max:te,step:ae,value:rt,onChange:function(e){if(ce){var t=parseFloat(e.target.value);if(Fe.current&&Ne.current){var r=Fe.current,n=r.naturalWidth,o=r.naturalHeight,a=0===rt&&Ie.current?Ie.current:rt,i=0===t&&Ie.current?Ie.current:t,c=(Ye.x+Ye.width/2-Ge.x)/(n*a)*(n*i),l=(Ye.y+Ye.height/2-Ge.y)/(o*a)*(o*i),s=Ye.x+Ye.width/2-c,u=Ye.y+Ye.height/2-l;nt(t),He({x:s,y:u}),xt({x:s,y:u},i,Ye)}}},style:{accentColor:Pe.accentColor,width:"100%"},disabled:!ce})]}),Se&&d.jsx("button",{className:"change-button",onClick:St,style:{padding:"8px 16px",backgroundColor:Pe.buttonBackgroundColor,color:Pe.buttonTextColor,border:"1px solid ".concat(Pe.borderColor),borderRadius:"4px",cursor:"pointer",fontSize:"14px",margin:"10px 0",display:"block"},children:ge})]})]}),P&&dt&&d.jsxs("div",{className:"preview-container ".concat(M),style:{display:"flex",flexDirection:"column",alignItems:"center",margin:"20px 0"},children:[d.jsx("img",{src:dt,alt:"Preview",style:{width:"".concat(F,"px"),height:"".concat(F,"px"),borderRadius:"circle"===y?"50%":"0",objectFit:"cover",border:"1px solid ".concat(Pe.borderColor),marginBottom:"10px",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)"}}),k&&d.jsx("span",{style:{fontSize:"14px",color:Pe.textColor},children:k})]}),d.jsxs("div",{className:"button-container ".concat(L),style:{display:"flex",justifyContent:"center",gap:"10px",marginTop:"16px"},children:[u&&d.jsx("button",{className:"cancel-button ".concat(X),onClick:u,disabled:ht,style:{padding:"10px 20px",backgroundColor:"#f0f0f0",color:"#333",border:"none",borderRadius:"4px",cursor:ht?"not-allowed":"pointer",fontWeight:"bold",opacity:ht?.5:1},children:R}),d.jsx("button",{className:"save-button ".concat(A),onClick:function(){return i(void 0,void 0,void 0,(function(){var e,t;return c(this,(function(r){switch(r.label){case 0:if(!dt)return[3,7];gt(!0),r.label=1;case 1:return r.trys.push([1,5,6,7]),s?[4,s(dt)]:[3,3];case 2:return r.sent(),[3,4];case 3:(e=document.createElement("a")).href=dt,e.download="profile-picture.".concat(g),e.click(),r.label=4;case 4:return[3,7];case 5:return t=r.sent(),console.error("Error saving image:",t),[3,7];case 6:return gt(!1),[7];case 7:return[2]}}))}))},disabled:!dt||ht,style:{padding:"10px 20px",backgroundColor:Pe.buttonBackgroundColor,color:Pe.buttonTextColor,border:"none",borderRadius:"4px",cursor:dt&&!ht?"pointer":"not-allowed",fontWeight:"bold",opacity:dt&&!ht?1:.5,transition:"all 0.2s ease"},children:ht?E:S})]})]})};export{y as ProfileCropper};
//# sourceMappingURL=index.mjs.map