{"version":3,"file":"ClipCircle.BPnS8o7c.mjs","names":[],"sources":["https:/framerusercontent.com/modules/TQ4keQyIKFIxHsYxBxqD/jM0VFMtWx2GmD54Ja10r/ClipCircle.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{motion}from\"framer-motion\";/**\n * CIRCLE CLIP\n * By Benjamin\n *\n * @framerIntrinsicWidth 200\n * @framerIntrinsicHeight 200\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */ export default function CircleClip(props){const circleValue=props.circleType?props.circlePercentage+\"%\":props.circlePixels+\"px\";const xValue=`calc(${props.atX}% - ${props.offsetX}px)`;const yValue=`calc(${props.atY}% - ${props.offsetY}px)`;const clipPathValue=`circle(${circleValue} at ${xValue} ${yValue})`;// const ref = React.useRef()\n// React.useEffect(() => {\n//     animate(ref.current, { clipPath: clipPathValue })\n// }, [clipPathValue])\nreturn /*#__PURE__*/ _jsx(motion.div,{// ref={ref}\nstyle:{position:\"absolute\",inset:0,width:\"100%\",height:\"100%\",maxWidth:\"100%\",maxHeight:\"100%\",backgroundColor:props.backgroundColor,borderRadius:props.radius,overflow:\"hidden\",clipPath:clipPathValue,cursor:\"pointer\"},layout:\"position\",animate:{clipPath:clipPathValue,backgroundColor:props.backgroundColor},transition:{...props.transition}});};CircleClip.displayName=\"Circle Clip\";addPropertyControls(CircleClip,{backgroundColor:{title:\"Backdrop\",type:ControlType.Color,defaultValue:\"#0CF\"},circleType:{type:ControlType.Boolean,title:\"Type\",enabledTitle:\"%\",disabledTitle:\"PX\"},circlePercentage:{type:ControlType.Number,title:\"Circle\",min:0,max:200,defaultValue:25,unit:\"%\",hidden:props=>!props.circleType},circlePixels:{type:ControlType.Number,title:\"Circle\",defaultValue:25,unit:\"px\",hidden:props=>props.circleType,displayStepper:true},atX:{type:ControlType.Number,title:\"X\",min:0,max:100,defaultValue:50,unit:\"%\"},atY:{type:ControlType.Number,title:\"Y\",min:0,max:100,defaultValue:50,unit:\"%\"},offsetX:{type:ControlType.Number,title:\"Offset X\",unit:\"px\",displayStepper:true},offsetY:{type:ControlType.Number,title:\"Offset Y\",unit:\"px\",displayStepper:true},transition:{type:ControlType.Transition,title:\"Transition\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CircleClip\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"200\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicHeight\":\"200\",\"framerDisableUnlink\":\"*\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ClipCircle.map"],"mappings":"6MAUI,SAAwB,EAAW,EAAM,CAAuM,IAAM,EAAc,UAAxM,EAAM,WAAW,EAAM,iBAAiB,IAAI,EAAM,aAAa,KAA+J,MAAM,QAA3I,EAAM,IAAI,MAAM,EAAM,QAAQ,KAAoH,GAAG,QAA7F,EAAM,IAAI,MAAM,EAAM,QAAQ,KAAsE,GAIrT,OAAqB,EAAK,EAAO,IAAI,CACrC,MAAM,CAAC,SAAS,WAAW,MAAM,EAAE,MAAM,OAAO,OAAO,OAAO,SAAS,OAAO,UAAU,OAAO,gBAAgB,EAAM,gBAAgB,aAAa,EAAM,OAAO,SAAS,SAAS,SAAS,EAAc,OAAO,SAAS,EAAE,OAAO,WAAW,QAAQ,CAAC,SAAS,EAAc,gBAAgB,EAAM,eAAe,EAAE,WAAW,CAAC,GAAG,EAAM,UAAU,CAAC,CAAC,CAAE,iBAf5S,IAAoD,IAAkC,EAewN,EAAW,YAAY,cAAc,EAAoB,EAAW,CAAC,gBAAgB,CAAC,MAAM,WAAW,KAAK,EAAY,MAAM,aAAa,MAAM,EAAE,WAAW,CAAC,KAAK,EAAY,QAAQ,MAAM,OAAO,aAAa,IAAI,cAAc,IAAI,EAAE,iBAAiB,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,IAAI,EAAE,IAAI,IAAI,aAAa,GAAG,KAAK,IAAI,OAAO,GAAO,CAAC,EAAM,UAAU,EAAE,aAAa,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,aAAa,GAAG,KAAK,KAAK,OAAO,GAAO,EAAM,WAAW,eAAe,EAAI,EAAE,IAAI,CAAC,KAAK,EAAY,OAAO,MAAM,IAAI,IAAI,EAAE,IAAI,IAAI,aAAa,GAAG,KAAK,GAAG,EAAE,IAAI,CAAC,KAAK,EAAY,OAAO,MAAM,IAAI,IAAI,EAAE,IAAI,IAAI,aAAa,GAAG,KAAK,GAAG,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,KAAK,KAAK,eAAe,EAAI,EAAE,QAAQ,CAAC,KAAK,EAAY,OAAO,MAAM,WAAW,KAAK,KAAK,eAAe,EAAI,EAAE,WAAW,CAAC,KAAK,EAAY,WAAW,MAAM,YAAY,CAAC,CAAC"}