{"version":3,"file":"Juicy_Button.Wb5O2cLH.mjs","names":["useRef"],"sources":["https:/framerusercontent.com/modules/H7WVYf3u21ZsCZHStFQL/UTtDbtHvmvajRVc9Pnec/Juicy_Button.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{motion,useMotionValue}from\"framer-motion\";import{useRef}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * @framerIntrinsicWidth 200\n * @framerIntrinsicHeight 200\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */function getRelativeCoordinates(event,referenceElement){console.log(\"event\",event.pageX,event.pageY);const position={x:event.pageX,y:event.pageY};const offset={left:referenceElement.offsetLeft,top:referenceElement.offsetTop,width:referenceElement.clientWidth,height:referenceElement.clientHeight};let reference=referenceElement.offsetParent;while(reference){offset.left+=reference.offsetLeft;offset.top+=reference.offsetTop;reference=reference.offsetParent;}return{x:position.x-offset.left-offset.width/2,y:position.y-offset.top-offset.height/2,width:referenceElement.clientWidth,height:referenceElement.clientHeight};}const containerVariants={rest:({textColor})=>({color:textColor,transition:{duration:.6,type:\"tween\",ease:\"easeOut\"}}),hover:({textColorHover})=>({color:textColorHover,transition:{duration:.6,type:\"tween\",ease:\"easeOut\"}}),tapped:({textColor})=>({color:textColor,scale:1,transition:{duration:.1,type:\"tween\",ease:\"easeOut\"}})};export default function Juicy_Button({label,labelFont,textColor,scaleAmount,textColorHover,background,backgroundHover,scaleDuration,radius=2,topLeft,topRight,bottomRight,bottomLeft,isRadiusMixed=false,padding,top,easeType,right,bottom,left,isPaddingMixed,borderColor,borderSize,icon}){const mouseX=useMotionValue(0);const mouseY=useMotionValue(0);const boxRef=useRef();const borderRadius=isRadiusMixed?`${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`:`${radius}px`;const allPadding=isPaddingMixed?`${top}px ${right}px ${bottom}px ${left}px`:`${padding}px`;const handleHover=event=>{const{x,y,width,height}=getRelativeCoordinates(event,boxRef.current);mouseX.set(x);mouseY.set(y);};const circleVariants={rest:{scale:0,opacity:1,transition:{duration:.2,type:\"tween\",ease:\"easeIn\"}},hover:{scale:scaleAmount,opacity:1,transition:{duration:scaleDuration,type:\"tween\",ease:easeType}},tapped:{scale:2,opacity:1}};return /*#__PURE__*/_jsxs(motion.button,{variants:containerVariants,initial:\"rest\",whileHover:\"hover\",whileTap:\"tapped\",custom:{textColor:textColor,textColorHover:textColorHover},style:{...containerStyle,padding:allPadding,border:`${borderSize}px solid ${borderColor}`,borderRadius,backgroundColor:background},ref:boxRef,onHoverStart:event=>{handleHover(event);},onHoverEnd:event=>{handleHover(event);},children:[/*#__PURE__*/_jsx(\"div\",{style:{...wrapper},children:/*#__PURE__*/_jsx(motion.div,{variants:circleVariants,style:{...circle,backgroundColor:backgroundHover,translateX:mouseX,translateY:mouseY,originX:.5,originY:.5}})}),/*#__PURE__*/_jsxs(\"div\",{style:{...labelFont,color:textColor},children:[\" \",/*#__PURE__*/_jsx(\"p\",{children:label})]})]});}const wrapper={position:\"absolute\",width:\"100%\",zIndex:-1};const circle={paddingTop:\"100%\",borderRadius:\"50%\",zIndex:-1,backgroundColor:`#EADF75`};const containerStyle={position:\"relative\",width:\"100%\",height:\"100%\",display:\"grid\",// change text style here because we can't customize that yet\nfontFamily:\"'JetBrains Mono', monospace\",borderRadius:\"2px\",justifyContent:\"center\",alignItems:\"center\",overflow:\"hidden\",cursor:\"pointer\",zIndex:9};Juicy_Button.defaultProps={padding:12,top:4,right:12,bottom:4,left:12,background:\"transparent\",isPaddingMixed:true,borderSize:0,borderColor:\"#transparent\"};addPropertyControls(Juicy_Button,{scaleAmount:{title:\"Scale\",type:ControlType.Number,defaultValue:2.5,min:.1,max:10,step:.1},scaleDuration:{title:\"Duration\",type:ControlType.Number,defaultValue:.3,min:.1,max:10,step:.1},easeType:{title:\"Easing Type\",type:ControlType.Enum,options:[\"linear\",\"easeIn\",\"easeOut\",\"easeInOut\",\"spring\"],defaultValue:\"easeOut\"},backgroundHover:{type:ControlType.Color,title:\"Hover Color\",defaultValue:\"transparent\"},textColorHover:{// Added this property control\ntype:ControlType.Color,title:\"Hover Text Color\",defaultValue:\"#ffffff\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Juicy_Button\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Juicy_Button.map"],"mappings":"yOAMG,SAAS,EAAuB,EAAM,EAAiB,CAAC,QAAQ,IAAI,QAAQ,EAAM,MAAM,EAAM,MAAM,CAAC,IAAM,EAAS,CAAC,EAAE,EAAM,MAAM,EAAE,EAAM,MAAM,CAAO,EAAO,CAAC,KAAK,EAAiB,WAAW,IAAI,EAAiB,UAAU,MAAM,EAAiB,YAAY,OAAO,EAAiB,aAAa,CAAK,EAAU,EAAiB,aAAa,KAAM,GAAW,EAAO,MAAM,EAAU,WAAW,EAAO,KAAK,EAAU,UAAU,EAAU,EAAU,aAAc,MAAM,CAAC,EAAE,EAAS,EAAE,EAAO,KAAK,EAAO,MAAM,EAAE,EAAE,EAAS,EAAE,EAAO,IAAI,EAAO,OAAO,EAAE,MAAM,EAAiB,YAAY,OAAO,EAAiB,aAAa,CAAwU,SAAwB,EAAa,CAAC,QAAM,YAAU,YAAU,cAAY,iBAAe,aAAW,kBAAgB,gBAAc,SAAO,EAAE,UAAQ,WAAS,cAAY,aAAW,gBAAc,GAAM,UAAQ,MAAI,WAAS,QAAM,SAAO,OAAK,iBAAe,cAAY,aAAW,QAAM,CAAC,IAAM,EAAO,EAAe,EAAE,CAAO,EAAO,EAAe,EAAE,CAAO,EAAOA,GAAQ,CAAO,EAAa,EAAc,GAAG,EAAQ,KAAK,EAAS,KAAK,EAAY,KAAK,EAAW,IAAI,GAAG,EAAO,IAAU,EAAW,EAAe,GAAG,EAAI,KAAK,EAAM,KAAK,EAAO,KAAK,EAAK,IAAI,GAAG,EAAQ,IAAU,EAAY,GAAO,CAAC,GAAK,CAAC,IAAE,IAAE,QAAM,UAAQ,EAAuB,EAAM,EAAO,QAAQ,CAAC,EAAO,IAAI,EAAE,CAAC,EAAO,IAAI,EAAE,EAAS,EAAe,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,WAAW,CAAC,SAAS,GAAG,KAAK,QAAQ,KAAK,SAAS,CAAC,CAAC,MAAM,CAAC,MAAM,EAAY,QAAQ,EAAE,WAAW,CAAC,SAAS,EAAc,KAAK,QAAQ,KAAK,EAAS,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,OAAoB,EAAM,EAAO,OAAO,CAAC,SAAS,EAAkB,QAAQ,OAAO,WAAW,QAAQ,SAAS,SAAS,OAAO,CAAW,YAAyB,iBAAe,CAAC,MAAM,CAAC,GAAG,EAAe,QAAQ,EAAW,OAAO,GAAG,EAAW,WAAW,IAAc,eAAa,gBAAgB,EAAW,CAAC,IAAI,EAAO,aAAa,GAAO,CAAC,EAAY,EAAM,EAAG,WAAW,GAAO,CAAC,EAAY,EAAM,EAAG,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,GAAG,EAAQ,CAAC,SAAsB,EAAK,EAAO,IAAI,CAAC,SAAS,EAAe,MAAM,CAAC,GAAG,EAAO,gBAAgB,EAAgB,WAAW,EAAO,WAAW,EAAO,QAAQ,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAc,EAAM,MAAM,CAAC,MAAM,CAAC,GAAG,EAAU,MAAM,EAAU,CAAC,SAAS,CAAC,IAAiB,EAAK,IAAI,CAAC,SAAS,EAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,0BANrgF,IAAiD,IAA0B,IAAoD,CAM4b,EAAkB,CAAC,MAAM,CAAC,gBAAc,CAAC,MAAM,EAAU,WAAW,CAAC,SAAS,GAAG,KAAK,QAAQ,KAAK,UAAU,CAAC,EAAE,OAAO,CAAC,qBAAmB,CAAC,MAAM,EAAe,WAAW,CAAC,SAAS,GAAG,KAAK,QAAQ,KAAK,UAAU,CAAC,EAAE,QAAQ,CAAC,gBAAc,CAAC,MAAM,EAAU,MAAM,EAAE,WAAW,CAAC,SAAS,GAAG,KAAK,QAAQ,KAAK,UAAU,CAAC,EAAE,CAAmpD,EAAQ,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,GAAG,CAAO,EAAO,CAAC,WAAW,OAAO,aAAa,MAAM,OAAO,GAAG,gBAAgB,UAAU,CAAO,EAAe,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,OAAO,QAAQ,OAChyF,WAAW,8BAA8B,aAAa,MAAM,eAAe,SAAS,WAAW,SAAS,SAAS,SAAS,OAAO,UAAU,OAAO,EAAE,CAAC,EAAa,aAAa,CAAC,QAAQ,GAAG,IAAI,EAAE,MAAM,GAAG,OAAO,EAAE,KAAK,GAAG,WAAW,cAAc,eAAe,GAAK,WAAW,EAAE,YAAY,eAAe,CAAC,EAAoB,EAAa,CAAC,YAAY,CAAC,MAAM,QAAQ,KAAK,EAAY,OAAO,aAAa,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,cAAc,CAAC,MAAM,WAAW,KAAK,EAAY,OAAO,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,CAAC,SAAS,CAAC,MAAM,cAAc,KAAK,EAAY,KAAK,QAAQ,CAAC,SAAS,SAAS,UAAU,YAAY,SAAS,CAAC,aAAa,UAAU,CAAC,gBAAgB,CAAC,KAAK,EAAY,MAAM,MAAM,cAAc,aAAa,cAAc,CAAC,eAAe,CAC3vB,KAAK,EAAY,MAAM,MAAM,mBAAmB,aAAa,UAAU,CAAC,CAAC"}