{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/E4JPQ0Ptnmg9WHfIQZw5/q6gEEqjDVF8wnn1ISaFZ/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,\"aria-label\":\"Button\",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__*/_jsx(\"div\",{style:{...labelFont},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 customise 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:\"#EADF75\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Juicy_Button\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Juicy_Button.map"],
  "mappings": "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",
  "names": ["init_ssg_sandbox_shims", "getRelativeCoordinates", "event", "referenceElement", "position", "offset", "reference", "containerVariants", "textColor", "textColorHover", "Juicy_Button", "label", "labelFont", "scaleAmount", "background", "backgroundHover", "scaleDuration", "radius", "topLeft", "topRight", "bottomRight", "bottomLeft", "isRadiusMixed", "padding", "top", "easeType", "right", "bottom", "left", "isPaddingMixed", "borderColor", "borderSize", "icon", "mouseX", "useMotionValue", "mouseY", "boxRef", "pe", "borderRadius", "allPadding", "handleHover", "x", "y", "width", "height", "circleVariants", "u", "motion", "containerStyle", "p", "wrapper", "circle", "addPropertyControls", "ControlType"]
}