react-peel/dist/index.mjs

react-peel is a react library to create realistic peeling effects. No dependencies.

import{forwardRef as G,useEffect as L,useRef as rt}from"react";var _={TOP_LEFT:0,TOP_RIGHT:1,BOTTOM_LEFT:2,BOTTOM_RIGHT:3};function it(){var u=100,b=["webkit","moz",""],S="http://www.w3.org/2000/svg",s="peel-",A,x,l,E,g,v=document.documentElement,M=v.style;function m(t){for(var e,n,i=0;i<b.length;i++)if(e=b[i],n=e?e+lt(t):t,n in M)return n}function T(){A=m("clipPath"),x=m("transform"),l=m("boxShadow"),E=m("filter"),B(),r.supported=!!(A&&x),r.effectsSupported=g}function B(){var t=document.createElement("div"),e=t.style;e.cssText="background:linear-gradient(45deg,#9f9,white);",g=(e.backgroundImage||"").indexOf("gradient")>-1}function P(t){return Math.round(t*u)/u}function j(t){return Math.max(0,Math.min(1,t))}function J(t,e,n){return(t-e)/(n-e)}function ct(t,e){return(e||1)*2*(.5-Math.abs(t-.5))}function lt(t){return t.slice(0,1).toUpperCase()+t.slice(1)}function ut(t){return t.replace(/-(\w)/g,function(e,n){return n.toUpperCase()})}function k(t){return s+t}function pt(t,e){t.style[A]=e}function W(t,e){t.style[x]=e}function ft(t,e,n,i,o,a){t.style[l]=K(e,n,i,o,a)}function dt(t,e,n,i,o){t.style[E]="drop-shadow("+K(e,n,i,null,o)+")"}function K(t,e,n,i,o){return P(t)+"px "+P(e)+"px "+P(n)+"px "+(i?P(i)+"px ":"")+"rgba(0,0,0,"+P(o)+")"}function X(t,e){t.style.opacity=e}function Y(t,e,n){if(g){var i;n.length===0?i="none":i="linear-gradient("+P(e)+"deg,"+n.join(",")+")",t.style.backgroundImage=i}}function U(t,e,n,i){t.addEventListener(e,n,i)}function q(t,e,n){t.removeEventListener(e,n)}function Q(t,e){var n=t.changedTouches?t.changedTouches[0]:t;return{x:n.clientX-e.getBoundingClientRect().left,y:n.clientY-e.getBoundingClientRect().top}}function Ot(t,e,n,i){return function(o){t.call(e,o,n,i)}}function O(t,e){return $(0,0,0,t,e)}function H(t,e){return $(255,255,255,t,e)}function $(t,e,n,i,o){return i=P(j(i)),"rgba("+t+","+e+","+n+","+i+") "+P(o*100)+"%"}function tt(t,e){return typeof t=="string"&&(t=(e||document).querySelector(t)),t}function gt(t,e){var n=document.createElement("div");return N(n,e),t.appendChild(n),n}function Ct(t,e){t.classList.remove(e)}function N(t,e){t.classList.add(e)}function yt(t){return t.style.zIndex}function vt(t,e){t.style.zIndex=e}function D(t,e,n){e=e||v;var i=document.createElementNS(S,t);e.appendChild(i);for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&Z(i,o,n[o]);return i}function Z(t,e,n){t.setAttributeNS(null,e,n)}function r(t,e){this.setOptions(e),this.el=tt(t,v),this.constraints=[],this.events=[],this.dragHandlers=[],this.setupLayers(),this.setupDimensions(),this.setCorner(this.getOption("corner")),this.setMode(this.getOption("mode")),this.init()}r.Corners=_,r.Defaults={topShadow:!0,topShadowBlur:5,topShadowAlpha:.5,topShadowOffsetX:0,topShadowOffsetY:1,topShadowCreatesShape:!0,backReflection:!1,backReflectionSize:.02,backReflectionOffset:0,backReflectionAlpha:.15,backReflectionDistribute:!0,backShadow:!0,backShadowSize:.04,backShadowOffset:0,backShadowAlpha:.1,backShadowDistribute:!0,bottomShadow:!0,bottomShadowSize:1.5,bottomShadowOffset:0,bottomShadowDarkAlpha:.7,bottomShadowLightAlpha:.1,bottomShadowDistribute:!0,setPeelOnInit:!0,clippingBoxScale:4,flipConstraintOffset:5,dragPreventsDefault:!0},r.prototype.setCorner=function(){var t=arguments;t[0]===void 0?t=[r.Corners.BOTTOM_RIGHT]:t[0].length&&(t=t[0]),this.corner=this.getPointOrCorner(t)},r.prototype.setMode=function(t){t==="book"?(this.addPeelConstraint(r.Corners.BOTTOM_LEFT),this.addPeelConstraint(r.Corners.TOP_LEFT),this.setOption("backReflection",!1),this.setOption("backShadowDistribute",!1),this.setOption("bottomShadowDistribute",!1)):t==="calendar"&&(this.addPeelConstraint(r.Corners.TOP_RIGHT),this.addPeelConstraint(r.Corners.TOP_LEFT))},r.prototype.setPeelPath=function(t,e){var n=arguments,i,o,a,c;i=new h(t,e),n.length===4?(o=new h(n[2],n[3]),this.path=new f(i,o)):n.length===8&&(a=new h(n[2],n[3]),c=new h(n[4],n[5]),o=new h(n[6],n[7]),this.path=new et(i,a,c,o))},r.prototype.handleDrag=function(t,e){this.dragHandlers.push(t),this.setupDragEvents(e)},r.prototype.handlePress=function(t,e){this.pressHandler=t,this.setupDragEvents(e)},r.prototype.setupDragEvents=function(t){var e=this,n,i,o;if(this.dragEventsSetup)return;t=t||this.el;function a(d,C){e.getOption("dragPreventsDefault")&&C.preventDefault(),i=d?"touchmove":"mousemove",o=d?"touchend":"mouseup",U(v,i,c),U(v,o,p),n=!1}function c(d){e.dragHandlers.forEach(C=>{y(C,d)}),n=!0}function p(d){!n&&e.pressHandler&&y(e.pressHandler,d),q(v,i,c),q(v,o,p)}function y(d,C){var nt=Q(C,e.el);d.call(e,C,nt.x,nt.y)}this.addEvent(t,"mousedown",a.bind(this,!1)),this.addEvent(t,"touchstart",a.bind(this,!0),mt()?{passive:!0}:!1),this.dragEventsSetup=!0};function mt(){let t=!1;try{let e=Object.defineProperty({},"passive",{get:function(){return t=!0,null}});window.addEventListener("test",null,e)}catch{console.warn("Passive event listener not support")}return t}r.prototype.removeEvents=function(){this.events.forEach(function(t,e){q(t.el,t.type,t.handler)}),this.events=[]},r.prototype.removeGlobalSvgElements=function(){var t=document.getElementsByClassName(k("svg-clip-element"));[...t].forEach(e=>e.remove())},r.prototype.clear=function(){this.removeEvents(),this.removeGlobalSvgElements()},r.prototype.setTimeAlongPath=function(t){t=j(t);var e=this.path.getPointForTime(t);this.timeAlongPath=t,this.setPeelPosition(e.x,e.y)},r.prototype.setFadeThreshold=function(t){this.fadeThreshold=t},r.prototype.setPeelPosition=function(){var t=this.getPointOrCorner(arguments);t=this.getConstrainedPeelPosition(t),t&&(this.peelLineSegment=this.getPeelLineSegment(t),this.peelLineRotation=this.peelLineSegment.getAngle(),this.setClipping(),this.setBackTransform(t),this.setEffects())},r.prototype.addPeelConstraint=function(){var t=this.getPointOrCorner(arguments),e=this.corner.subtract(t).getLength();this.constraints.push(new I(t,e)),this.calculateFlipConstraint()},r.prototype.setOption=function(t,e){this.options[t]=e},r.prototype.getOption=function(t){return this.options[ut(t)]},r.prototype.getAmountClipped=function(){var t=this.getTopClipArea(),e=this.width*this.height;return J(t,e,0)},r.prototype.addEvent=function(t,e,n,i){return U(t,e,n,i),this.events.push({el:t,type:e,handler:n}),n},r.prototype.getTopClipArea=function(){var t=new R;return this.elementBox.forEach(function(e){this.distributeLineByPeelLine(e,t)},this),R.getArea(t.getPoints())},r.prototype.calculateFlipConstraint=function(){var t=this.corner,e=this.constraints.concat();this.flipConstraint=e.sort(function(n,i){var o=t.y-n.center.y,a=t.y-i.center.y;return n-i})[0]},r.prototype.dragStart=function(t,e,n){},r.prototype.fireHandler=function(t,e){var n=Q(t,this.el);e.call(this,t,n.x,n.y)},r.prototype.setClipping=function(){var t=new R,e=new R;this.clippingBox.forEach(function(n){this.distributeLineByPeelLine(n,t,e)},this),this.topClip.setPoints(t.getPoints()),this.backClip.setPoints(e.getPoints())},r.prototype.distributeLineByPeelLine=function(t,e,n){var i=this.peelLineSegment.getIntersectPoint(t);this.distributePointByPeelLine(t.p1,e,n),this.distributePointByPeelLine(i,e,n)},r.prototype.distributePointByPeelLine=function(t,e,n){if(t){var i=this.peelLineSegment.getPointDeterminant(t);i<=0&&e.addPoint(t),i>=0&&n&&n.addPoint(this.flipPointHorizontally(t))}},r.prototype.setOptions=function(t){var e=t||{},n=r.Defaults;for(var i in n)!Object.prototype.hasOwnProperty.call(n,i)||i in e||(e[i]=n[i]);this.options=e},r.prototype.findOrCreateLayer=function(t,e,n){var i=t+"-element",o=k(t),a=tt(this.getOption(i)||"."+o,e);return a||(a=gt(e,o)),N(a,k("layer")),vt(a,n),a},r.prototype.getPointOrCorner=function(t){return t.length===2?new h(t[0],t[1]):typeof t[0]=="number"?this.getCornerPoint(t[0]):t[0]},r.prototype.getCornerPoint=function(t){var e=+!!(t&1)*this.width,n=+!!(t&2)*this.height;return new h(e,n)},r.prototype.getOptionalShape=function(){var t=["rect","polygon","path","circle"],e;return t.some(function(n){let i=this.getOption("shape");var a=i&&i[n],c;return a&&(c={},c.attributes=a,c.type=n,e=c),e},this),e},r.prototype.setupLayers=function(){var t=this.getOptionalShape(),e=this.topLayer=this.findOrCreateLayer("top",this.el,2),n=this.backLayer=this.findOrCreateLayer("back",this.el,3);this.bottomLayer=this.findOrCreateLayer("bottom",this.el,1),t?(this.topLayer=this.wrapShapeLayer(this.topLayer,"top-outer-clip"),this.backLayer=this.wrapShapeLayer(this.backLayer,"back-outer-clip"),this.topShapeClip=new w(e,t),this.backShapeClip=new w(n,t),this.bottomShapeClip=new w(this.bottomLayer,t),this.getOption("topShadowCreatesShape")&&(this.topShadowElement=this.setupDropShadow(t,e))):this.topShadowElement=this.findOrCreateLayer("top-shadow",e,1),this.topClip=new w(this.topLayer),this.backClip=new w(this.backLayer),this.backShadowElement=this.findOrCreateLayer("back-shadow",n,1),this.backReflectionElement=this.findOrCreateLayer("back-reflection",n,2),this.bottomShadowElement=this.findOrCreateLayer("bottom-shadow",this.bottomLayer,1),this.usesBoxShadow=!t},r.prototype.setupDropShadow=function(t,e){var n=D("svg",e,{class:k("layer")});return D(t.type,n,t.attributes),n},r.prototype.wrapShapeLayer=function(t,e){var n=yt(t);N(t,k("shape-layer"));var i=this.findOrCreateLayer(e,this.el,n);return i.appendChild(t),i},r.prototype.setupDimensions=function(){this.width=this.el.offsetWidth,this.height=this.el.offsetHeight,this.center=new h(this.width/2,this.height/2),this.elementBox=this.getScaledBox(1),this.clippingBox=this.getScaledBox(this.getOption("clippingBoxScale"))},r.prototype.getScaledBox=function(t){var e=t,n=t-1,i=new h(-this.width*n,-this.height*n),o=new h(this.width*e,-this.height*n),a=new h(this.width*e,this.height*e),c=new h(-this.width*n,this.height*e);return[new f(i,o),new f(o,a),new f(a,c),new f(c,i)]},r.prototype.getConstrainedPeelPosition=function(t){return this.constraints.forEach(function(e){var n=this.getFlipConstraintOffset(e,t);n&&(e=new I(e.center,e.radius-n)),t=e.constrainPoint(t)},this),t},r.prototype.getFlipConstraintOffset=function(t,e){var n=this.getOption("flipConstraintOffset");if(t===this.flipConstraint&&n){var i=this.corner.subtract(this.center),o=this.corner.subtract(t.center),a=o.getAngle(),c=o.rotate(-a),p=e.subtract(t.center).rotate(-a);if(i.x*i.y<0&&(p.y*=-1),p.x>0&&p.y>0)return J(p.getAngle(),45,0)*n}},r.prototype.getPeelLineSegment=function(t){var e=this.corner.subtract(t).scale(.5),n=t.add(e);e.x===0&&e.y===0&&(e=t.subtract(this.center));var i=e.getLength(),o=Math.max(this.width,this.height)/i*10,a=e.rotate(-90).scale(o),c=n.add(a),p=n.subtract(a);return new f(c,p)},r.prototype.setBackTransform=function(t){var e=this.flipPointHorizontally(this.corner),n=(this.peelLineRotation-90)*2,i=t.subtract(e.rotate(n)),o="translate("+P(i.x)+"px, "+P(i.y)+"px) rotate("+P(n)+"deg)";W(this.backLayer,o),W(this.topShadowElement,o)},r.prototype.getPeelLineDistance=function(){var t,e,n,i;this.peelLineRotation<90?(t=r.Corners.TOP_RIGHT,e=r.Corners.BOTTOM_LEFT):this.peelLineRotation<180?(t=r.Corners.BOTTOM_RIGHT,e=r.Corners.TOP_LEFT):this.peelLineRotation<270?(t=r.Corners.BOTTOM_LEFT,e=r.Corners.TOP_RIGHT):this.peelLineRotation<360&&(t=r.Corners.TOP_LEFT,e=r.Corners.BOTTOM_RIGHT),n=this.getCornerPoint(t),i=this.getCornerPoint(e);var o=new f(n,i).scale(2),a=this.peelLineSegment.getIntersectPoint(o);if(!a)return 2;var c=n.subtract(a).getLength(),p=n.subtract(i).getLength();return c/p},r.prototype.setEffects=function(){var t=this.getPeelLineDistance();this.setTopShadow(t),this.setBackShadow(t),this.setBackReflection(t),this.setBottomShadow(t),this.setFade()},r.prototype.setTopShadow=function(t){if(this.getOption("topShadow")){var e=this.getOption("topShadowBlur"),n=this.getOption("topShadowOffsetX"),i=this.getOption("topShadowOffsetY"),o=this.getOption("topShadowAlpha"),a=this.exponential(t,5,o);this.usesBoxShadow?ft(this.topShadowElement,n,i,e,0,a):dt(this.topShadowElement,n,i,e,a)}},r.prototype.distributeOrLinear=function(t,e,n){return e?ct(t,n):t*n},r.prototype.exponential=function(t,e,n){return n*j(Math.pow(1+t,e)-1)},r.prototype.setBackReflection=function(t){var e=[];if(this.canSetLinearEffect("backReflection",t)){var n=this.getOption("backReflectionDistribute"),i=this.getOption("backReflectionSize"),o=this.getOption("backReflectionOffset"),a=this.getOption("backReflectionAlpha"),c=this.distributeOrLinear(t,n,i),p=t-o,y=p-c,d=y-c;e.push(H(0,0)),e.push(H(0,d)),e.push(H(a,y)),e.push(H(0,p))}Y(this.backReflectionElement,180-this.peelLineRotation,e)},r.prototype.setBackShadow=function(t){var e=[];if(this.canSetLinearEffect("backShadow",t)){var n=this.getOption("backShadowSize"),i=this.getOption("backShadowOffset"),o=this.getOption("backShadowAlpha"),a=this.getOption("backShadowDistribute"),c=this.distributeOrLinear(t,a,n),p=t-i,y=p-c,d=y-c;e.push(O(0,0)),e.push(O(0,d)),e.push(O(o,y)),e.push(O(o,p))}Y(this.backShadowElement,180-this.peelLineRotation,e)},r.prototype.setBottomShadow=function(t){var e=[];if(this.canSetLinearEffect("bottomShadow",t)){var n=this.getOption("bottomShadowSize"),i=this.getOption("bottomShadowOffset"),o=this.getOption("bottomShadowDarkAlpha"),a=this.getOption("bottomShadowLightAlpha"),c=this.getOption("bottomShadowDistribute"),p=t-(.025-i),y=p-this.distributeOrLinear(t,c,.03)*n-i,d=y-(.02*n-i);e=[O(0,0),O(0,d),O(a,y),O(a,p),O(o,t)]}Y(this.bottomShadowElement,this.peelLineRotation+180,e)},r.prototype.canSetLinearEffect=function(t,e){return this.getOption(t)&&e>0},r.prototype.setFade=function(){var t=this.fadeThreshold,e=1,n;t&&(this.timeAlongPath!==void 0?n=this.timeAlongPath:n=this.getAmountClipped(),n>t&&(e=(1-n)/(1-t)),X(this.topLayer,e),X(this.backLayer,e),X(this.bottomShadowElement,e))},r.prototype.flipPointHorizontally=function(t){return new h(t.x-(t.x-this.center.x)*2,t.y)},r.prototype.init=function(){this.getOption("setPeelOnInit")&&this.setPeelPosition(this.corner),N(this.el,k("ready"))};function w(t,e){this.el=t,this.shape=w.createClipPath(t,e||{type:"polygon"}),W(this.el,"translate(0px,0px)")}w.getDefs=function(){return this.defs||(this.svg=D("svg",null,{class:k("svg-clip-element")}),this.defs=D("defs",this.svg)),this.defs},w.createClipPath=function(t,e){var n=w.getId(),i=D("clipPath",this.getDefs()),o=D(e.type,i,e.attributes);return Z(i,"id",n),pt(t,"url(#"+n+")"),o};function Pt(){if(crypto&&crypto.getRandomValues){var t=new Uint32Array(4);return crypto.getRandomValues(t),t.join("").replace(/[^a-zA-Z0-9]/g,"")}else return Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15)}w.getId=function(){return"svg-clip-"+Pt()},w.prototype.setPoints=function(t){var e=t.map(function(n){return P(n.x)+","+P(n.y)}).join(" ");Z(this.shape,"points",e)};function I(t,e){this.center=t,this.radius=e}I.prototype.containsPoint=function(t){if(this.boundingRectContainsPoint(t)){var e=this.center.x-t.x,n=this.center.y-t.y;e*=e,n*=n;var i=e+n,o=this.radius*this.radius;return i<=o}return!1},I.prototype.boundingRectContainsPoint=function(t){return t.x>=this.center.x-this.radius&&t.x<=this.center.x+this.radius&&t.y>=this.center.y-this.radius&&t.y<=this.center.y+this.radius},I.prototype.constrainPoint=function(t){if(!this.containsPoint(t)){var e=t.subtract(this.center).getAngle();t=this.center.add(new h(this.radius,0).rotate(e))}return t};function R(){this.points=[]}R.getArea=function(t){var e=0,n=0;return t.forEach(function(i,o,a){var c=a[(o+1)%a.length];e+=i.x*c.y,n+=i.y*c.x}),(e-n)/2},R.prototype.addPoint=function(t){this.points.push(t)},R.prototype.getPoints=function(){return this.points};function et(t,e,n,i){this.p1=t,this.c1=e,this.p2=i,this.c2=n}et.prototype.getPointForTime=function(t){var e=Math.pow(1-t,3),n=3*t*Math.pow(1-t,2),i=3*Math.pow(t,2)*(1-t),o=Math.pow(t,3),a=e*this.p1.x+n*this.c1.x+i*this.c2.x+o*this.p2.x,c=e*this.p1.y+n*this.c1.y+i*this.c2.y+o*this.p2.y;return new h(a,c)};function f(t,e){this.p1=t,this.p2=e}f.EPSILON=1e-6,f.prototype.getPointForTime=function(t){return this.p1.add(this.getVector().scale(t))},f.prototype.scale=function(t){var e=1+t/2,n=this.p1.add(this.p2.subtract(this.p1).scale(t)),i=this.p2.add(this.p1.subtract(this.p2).scale(t));return new f(n,i)},f.prototype.getPointDeterminant=function(t){var e=(t.x-this.p1.x)*(this.p2.y-this.p1.y)-(t.y-this.p1.y)*(this.p2.x-this.p1.x);return e>-f.EPSILON&&e<f.EPSILON&&(e=0),e},f.prototype.getIntersectPoint=function(t){var e=this;function n(d,C){return d.x*C.y-d.y*C.x}var i=e.p2.subtract(e.p1),o=t.p2.subtract(t.p1),a=n(t.p1.subtract(e.p1),i),c=n(i,o);if(c==0)return null;var p=a/c,y=n(t.p1.subtract(e.p1),o)/c;return y>=0&&y<=1&&p>=0&&p<=1?e.p1.add(i.scale(y)):null},f.prototype.getAngle=function(){return this.getVector().getAngle()},f.prototype.getVector=function(){return this.vector||(this.vector=this.p2.subtract(this.p1)),this.vector};function h(t,e){this.x=t,this.y=e}return h.DEGREES_IN_RADIANS=180/Math.PI,h.degToRad=function(t){return t/h.DEGREES_IN_RADIANS},h.radToDeg=function(t){for(var e=t*h.DEGREES_IN_RADIANS;e<0;)e+=360;return e},h.vector=function(t,e){var n=h.degToRad(t);return new h(Math.cos(n)*e,Math.sin(n)*e)},h.prototype.add=function(t){return new h(this.x+t.x,this.y+t.y)},h.prototype.subtract=function(t){return new h(this.x-t.x,this.y-t.y)},h.prototype.scale=function(t){return new h(this.x*t,this.y*t)},h.prototype.getLength=function(){return Math.sqrt(Math.pow(this.x,2)+Math.pow(this.y,2))},h.prototype.getAngle=function(){return h.radToDeg(Math.atan2(this.y,this.x))},h.prototype.setAngle=function(t){return h.vector(t,this.getLength())},h.prototype.rotate=function(t){return this.setAngle(this.getAngle()+t)},T(),r}import{jsx as V}from"react/jsx-runtime";var ot=G(bt);function bt({children:u,options:b={},containerProps:S,...s},A){let x=rt(null),l=rt(null);St(),L(()=>{function g(){if(!x.current)return;let v=it(),M=new v(x.current,wt(b));if(l.current=M,A&&(A.current=M),s.peelPosition&&l.current.setPeelPosition(s.peelPosition.x,s.peelPosition.y),s.corner)if(Object.prototype.hasOwnProperty.call(s.corner,"x")&&Object.prototype.hasOwnProperty.call(s.corner,"y")){let{x:m,y:T}=s.corner;l.current.setCorner(m,T)}else F(s.corner)&&l.current.setCorner(z(s.corner));s.constraints&&(Array.isArray(s.constraints)?s.constraints.forEach(m=>{E(m)}):E(s.constraints)),s.mode&&l.current.setMode(s.mode),s.fadeThreshold&&l.current.setFadeThreshold(s.fadeThreshold),s.peelPath&&Array.isArray(s.peelPath)&&l.current.setPeelPath(...s.peelPath),s.drag&&l.current?.handleDrag(function(m,T,B){l.current.setPeelPosition(T,B)}),s.handleDrag&&l.current?.handleDrag((m,T,B)=>s.handleDrag?.(m,T,B,l.current)),s.handlePress&&l.current?.handlePress(m=>s.handlePress?.(m,l.current))}return g(),()=>{l.current&&l.current.clear()}},[b]),L(()=>{s.timeAlongPath&&l.current?.setTimeAlongPath(s.timeAlongPath)},[s.timeAlongPath]),L(()=>{s.peelPosition&&l.current.setPeelPosition(s.peelPosition.x,s.peelPosition.y)},[s.peelPosition]),L(()=>{if(s.corner)if(Object.prototype.hasOwnProperty.call(s.corner,"x")&&Object.prototype.hasOwnProperty.call(s.corner,"y")){let{x:g,y:v}=s.corner;l.current.setCorner(g,v)}else F(s.corner)&&l.current.setCorner(z(s.corner))},[s.corner]),L(()=>{s.peelPath&&Array.isArray(s.peelPath)&&l.current.setPeelPath(...s.peelPath)},[s.peelPath]),L(()=>{s.mode&&l.current.setMode(s.mode)},[s.mode]),L(()=>{s.fadeThreshold&&l.current.setFadeThreshold(s.fadeThreshold)},[s.fadeThreshold]),L(()=>{s.constraints&&(Array.isArray(s.constraints)?s.constraints.forEach(g=>{E(g)}):E(s.constraints))},[s.constraints]);function E(g){if(F(g))l.current.addPeelConstraint(z(g));else if(Object.prototype.hasOwnProperty.call(g,"x")&&Object.prototype.hasOwnProperty.call(g,"y")){let v=g;l.current.addPeelConstraint(v.x,v.y)}}return V("div",{ref:x,className:"peel "+s?.className,...S,style:{height:s.height||"100%",width:s.width||"100%",...S?.style},children:u})}function wt(u){return u.corner&&(u.corner=F(u.corner)?z(u.corner):void 0),u}function F(u){return Object.keys(_).includes(u)}function z(u){return _[u]}ot.displayName="PeelWrapper";var St=()=>{L(()=>{let u=document.createElement("style");return u.innerHTML=`
    .peel {
      position: relative;
      opacity: 0;
    }
    
    .peel-ready {
      opacity: 1;
    }
    
    .peel-svg-clip-element {
      position: absolute;
      top: -10000px;
      left: -10000px;
      width: 1px;
      height: 1px;
      opacity: 0;
    }
    
    .peel-layer {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
      -webkit-transform-origin: top left;
      -moz-transform-origin: top left;
      transform-origin: top left;
    }
    `,document.head.appendChild(u),()=>{document.head.removeChild(u)}},[])},st=G(function({className:u,...b},S){return V("div",{ref:S,className:"peel-top "+u,...b})});st.displayName="PeelTop";var at=G(function({className:u,...b},S){return V("div",{ref:S,className:"peel-back "+u,...b})});at.displayName="PeelBack";var ht=G(function({className:u,...b},S){return V("div",{ref:S,className:"peel-bottom "+u,...b})});ht.displayName="PeelBottom";export{at as PeelBack,ht as PeelBottom,st as PeelTop,ot as PeelWrapper};